Extra checks for script and style tags

If a script tag isn’t at the bottom of your body - and if you have any style tags in your body, we should let you know.
imbrianj · Jul 30, 2014 · e38b4ad · e38b4ad
1 parent 3fb2663
commit e38b4ad
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 29 deletions.
diff --git a/debugCSS.css b/debugCSS.css
@@ -110,6 +110,8 @@ blink:after,
 marquee:after,
 script:not([type]) ~ *:not(area):not(base):not(br):not(col):not(embed):not(hr):not(iframe):not(img):not(input):first-of-type:before,
 style:not([type]) ~ *:not(area):not(base):not(br):not(col):not(embed):not(hr):not(iframe):not(img):not(input):first-of-type:before,
+body script ~ *:not(script):before,
+body style ~ *:not(area):not(base):not(br):not(col):not(embed):not(hr):not(iframe):not(img):not(input):first-of-type:before,
 *[class^="1"]:after,
 *[class^="2"]:after,
 *[class^="3"]:after,
@@ -381,21 +383,6 @@ img[src="spacer.gif"] ~ *:not(area):not(base):not(br):not(col):not(embed):not(hr
   content: 'spacer.gif used - is this used for layout?';
 }
 
-/*
- * Some (most?) browsers convert &amp; to & once rendered.
- */
-
-/*
-img[src*="&"]:not([src*="&amp;"]) ~ *:not(area):not(base):not(br):not(col):not(embed):not(hr):not(iframe):not(img):not(input):first-of-type:before {
-  background: #F88;
-  content: 'Unencoded &amp; in img src';
-}
-
-a[href*="&"]:not([href*="&amp;"]):after {
-  background: #F88;
-  content: 'Unencoded &amp; in anchor';
-}
-*/
 a[href="#"]:after,
 a:not([href]):after {
   background: #FF8;
@@ -678,6 +665,16 @@ style:not([type]) ~ *:not(area):not(base):not(br):not(col):not(embed):not(hr):no
   content: 'style tag without type defined';
 }
 
+body script ~ *:not(script):before {
+  background: #8F8;
+  content: 'script tag should be at the bottom of your body';
+}
+
+body style ~ *:not(area):not(base):not(br):not(col):not(embed):not(hr):not(iframe):not(img):not(input):first-of-type:before {
+  background: #8F8;
+  content: 'CSS should be in your head';
+}
+
 /******************/
 /* ERROR OUTLINES */
 /******************/
@@ -829,9 +826,7 @@ center,
 u,
 font,
 blink,
-marquee,
-script:not([type]),
-style:not([type]) {
+marquee {
   counter-increment: warning;
   outline: 5px solid #FF8;
 }
@@ -900,7 +895,11 @@ i,
 *[id*=Green],
 *[id*=Yellow],
 *[id*=White],
-*[id*=Black] {
+*[id*=Black],
+script:not([type]),
+style:not([type]),
+body script ~ *:not(script),
+body style {
   counter-increment: notice;
   outline: 5px solid #8F8;
 }

diff --git a/playgrounds/other.html b/playgrounds/other.html
@@ -236,18 +236,9 @@ <h4>img[src=""]</h4>
               <h4>img[src="#"]</h4>
               <img src="#" alt="Lorem Ipsum" />
             </li>
-            <li>
-              <a href="/&some=link">Link with unencoded &amp;</a>
-            </li>
-            <li>
-              <img src="https://secure.gravatar.com/avatar/cf776780e895d2c099f8fb13cb7c6af2?s=140&some=img" />
-              <p>
-                Image with unencoded &amp;
-              </p>
-            </li>
             <li>
               <h4>h1 div</h4>
-              <h1><div>Div within header</div</h1>
+              <h1><div>Div within header</div></h1>
               <p>
                 Note: Similarly, h2 - h6 are applicable
               </p>
@@ -360,6 +351,16 @@ <h4>*[border]</h4>
                 Note: This is allowable in transitional doctypes
               </p>
             </li>
+            <li>
+              <h4>body script ~ *:not(script)</h4>
+              <script type="text/javascript"></script>
+              <span>Script not the last element in the body</span>
+            </li>
+            <li>
+              <h4>body style</h4>
+              <style type="text/css"></style>
+              <span>Style inside body</span>
+            </li>
           </ul>
         </div>
       </div>