From 3856fed62369edaf7f60e49e5171dea9935a743b Mon Sep 17 00:00:00 2001 From: Harry Roberts Date: Fri, 15 Oct 2021 16:49:58 +0200 Subject: [PATCH 1/2] Except malformed or non-standard JS type attrs MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Browsers will completely skip over any script element that has either a malformed or non-standard type attribute, so they’re effectively completely non-blocking. Exempt any scripts that match this condition. --- ct.css | 42 +++++++++++++++++++++++++++++++++++++----- test/index.html | 21 +++++++++++++++++---- 2 files changed, 54 insertions(+), 9 deletions(-) diff --git a/ct.css b/ct.css index e44d5d6..f9c4c15 100644 --- a/ct.css +++ b/ct.css @@ -35,6 +35,7 @@ head { head, head script, +head script[type]:not([type="text/javascript"]), head script:not([src])[async], head script:not([src])[defer], head style, head [rel="stylesheet"], @@ -126,6 +127,7 @@ head script:not(:empty) { */ head script[src]:not([async]):not([defer]):not([type=module]) ~ title, +head script[type]:not([type="text/javascript"]) ~ title, head script:not(:empty) ~ title { display: block; border-style: var(--ct-is-affected); @@ -195,11 +197,41 @@ head script:not([src])[defer] { } head script:not([src])[async]::before { - content: "The async attribute is redundant on inline scripts" + content: "[The async attribute is redundant on inline scripts]" } head script:not([src])[defer]::before { - content: "The defer attribute is redundant on inline scripts" + content: "[The defer attribute is redundant on inline scripts]" + } + + + + + +/** + * Supplying a character encoding for scripts is invalid and may pervert the + * script from loading. + */ +head script[type*="charset"] { + border-style: var(--ct-is-problematic); + border-color: var(--ct-warn); +} + + head script[type*="charset"]::before { + content: "[charset on scripts may prevent script from loading]" + } + + + + + +head script[type="text/javascript"] { + border-style: var(--ct-is-problematic); + border-color: var(--ct-warn); +} + + head script[type="text/javascript"]::before { + content: "[" attr(type) " is redundant: you might as well delete it]" } @@ -275,8 +307,8 @@ head > meta[charset]:not(:nth-child(-n+5))::before { * We’re done! */ -link[rel="stylesheet"][media="print"], -link[rel="stylesheet"].ct, style.ct, -script[async], script[defer], script[type=module] { +head link[rel="stylesheet"][media="print"], +head link[rel="stylesheet"].ct, head style.ct, +head script[async], head script[defer], head script[type=module], head script[type]:not([type="text/javascript"]) { display: none; } diff --git a/test/index.html b/test/index.html index d6dba0c..704e499 100644 --- a/test/index.html +++ b/test/index.html @@ -3,6 +3,10 @@ + + + 🧠 ct.css – Let’s take a look inside your <head> + + + + @@ -23,8 +29,6 @@ - 🧠 ct.css – Let’s take a look inside your <head> - + + + + diff --git a/test/index.html b/test/index.html index 704e499..e835c48 100644 --- a/test/index.html +++ b/test/index.html @@ -78,6 +78,10 @@ } + + + +