diff --git a/README.md b/README.md index f5829a4..775d5e3 100644 --- a/README.md +++ b/README.md @@ -19,4 +19,8 @@ Each condition is specified in three areas: - Setting up the :after area for display (trying to reset common styles like colors, font sizes, etc). - Specifying the color severity (green, yellow, red) and content (which is the error or warning message to be displayed). - - Creating the outline around the offending element according to it's color severity. \ No newline at end of file + - Creating the outline around the offending element according to it's color severity. + +Install +--- +Visit [http://yahoo.github.com/debugCSS/](http://yahoo.github.com/debugCSS/) to install the bookmarklet. \ No newline at end of file diff --git a/debugCSS.css b/debugCSS.css index b8b3822..cb5a971 100644 --- a/debugCSS.css +++ b/debugCSS.css @@ -19,6 +19,10 @@ so they are color coded to highlight severity. Green is "probably not a big problem", yellow is "worth looking at" and red is "you really should fix this." + + Red: #F88; + Yellow: #FF8; + Green: #8F8; */ /******************/ @@ -26,22 +30,45 @@ /******************/ /* All errors should try to post a message explaining the problem. */ -table:not([summary]):after, +table[summary]:after, +table > *:first-child:not(caption):after, table > tr:after, table th:not([scope]):after, table thead td:after, +table > colgroup ~ caption:after, +table > thead ~ colgroup + *:before, +table > tfoot ~ colgroup + *:before, +table > tbody ~ colgroup + *:before, +table > thead ~ caption:after, +table > tfoot ~ caption:after, +table > tbody ~ caption:after, table > tbody:first-child:after, -table > tbody + tfoot:after, -table > tr:first-child:last-child:after, -table > tbody > tr:first-child:last-child:after, +table > tfoot ~ thead:after, +table > tbody ~ tfoot:after, +table > tbody ~ thead:after, +table > tr:only-child:after, +table > tbody > tr:only-child:after, table > *:not(thead):not(tfoot):not(tbody):not(tr):not(colgroup):not(caption):after, +colgroup *:not(col):after, table[align]:after, table[bgcolor]:after, table[border]:after, table[cellpadding]:after, table[cellspacing]:after, -table[width]:after, -img:not([alt]):after, +*:not(img):not(iframe)[width]:after, /* Acceptable for transitional doctypes, but should probably be relegated to CSS */ +*:not(img):not(iframe)[height]:after, +*[border]:after, +*:not(area):not(base):not(br):not(col):not(embed):not(hr):not(iframe):not(img):not(input):not(textarea):empty:after, +a a:after, +img:not([alt]) ~ *:not(area):not(base):not(br):not(col):not(embed):not(hr):not(iframe):not(img):not(input):first-of-type:before, +img:not([src]) ~ *:not(area):not(base):not(br):not(col):not(embed):not(hr):not(iframe):not(img):not(input):first-of-type:before, +img[src=""] ~ *:not(area):not(base):not(br):not(col):not(embed):not(hr):not(iframe):not(img):not(input):first-of-type:before, +img[src="#"] ~ *:not(area):not(base):not(br):not(col):not(embed):not(hr):not(iframe):not(img):not(input):first-of-type:before, +img[src="spacer.gif"] ~ *:not(area):not(base):not(br):not(col):not(embed):not(hr):not(iframe):not(img):not(input):first-of-type:before, +/* +img[src*="&"]:not([src*="&"]) ~ *:not(area):not(base):not(br):not(col):not(embed):not(hr):not(iframe):not(img):not(input):first-of-type:before, +a[href*="&"]:not([href*="&"]):after, +*/ a:not([href]):after, a[href="#"]:after, a[href*=javascript\:]:after, @@ -57,35 +84,176 @@ h3 div:after, h4 div:after, h5 div:after, h6 div:after, -a div:after, span div:after, -html[xmlns] a h1:after, /* Try to select only in XHTML documents (thanks, Thierry). */ +html[xmlns] a div:after, /* Try to select only in XHTML documents (thanks, Thierry). */ +html[xmlns] a h1:after, html[xmlns] a h2:after, html[xmlns] a h3:after, html[xmlns] a h4:after, html[xmlns] a h5:after, html[xmlns] a h6:after, -ol > *:not(li), -ul > *:not(li), +ol > *:not(li):after, +ul > *:not(li):after, dl > *:not(dt):not(dd):after, form > *:not(fieldset):after, -fieldset *:not(legend):first-child:after, -iframe:not([title]):after, +fieldset > *:not(legend):first-child:after, +iframe:not([title]) ~ *:not(area):not(base):not(br):not(col):not(embed):not(hr):not(iframe):not(img):not(input):first-of-type:before, center:after, u:after, font:after, map:after, +br ~ *:not(area):not(base):not(br):not(col):not(embed):not(hr):not(iframe):not(img):not(input):first-of-type:before, +br + br ~ *:not(area):not(base):not(br):not(col):not(embed):not(hr):not(iframe):not(img):not(input):first-of-type:before, b:after, i:after, blink:after, -marquee: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, +*[class^="4"]:after, +*[class^="5"]:after, +*[class^="6"]:after, +*[class^="7"]:after, +*[class^="8"]:after, +*[class^="9"]:after, +*[class^="0"]:after, +*[id^="1"]:after, +*[id^="2"]:after, +*[id^="3"]:after, +*[id^="4"]:after, +*[id^="5"]:after, +*[id^="6"]:after, +*[id^="7"]:after, +*[id^="8"]:after, +*[id^="9"]:after, +*[id^="0"]:after, +*[class*=left]:after, +*[class*=right]:not([class*=opyright]):after, +*[class*=bottom]:after, +*[class*=center]:after, +*[class*=clear]:after, +*[class*=float]:after, +*[class*=large]:after, +*[class*=small]:after, +*[class*=blue]:after, +*[class*=green]:after, +*[class*=yellow]:after, +*[class*=white]:after, +*[class*=black]:after, +*[class*=Left]:after, +*[class*=Right]:after, +*[class*=Bottom]:after, +*[class*=Center]:after, +*[class*=Clear]:after, +*[class*=Float]:after, +*[class*=Large]:after, +*[class*=Small]:after, +*[class*=Blue]:after, +*[class*=Green]:after, +*[class*=Yellow]:after, +*[class*=White]:after, +*[class*=Black]:after, +*[id*=left]:after, +*[id*=right]:not([id*=opyright]):after, +*[id*=bottom]:after, +*[id*=center]:after, +*[id*=clear]:after, +*[id*=float]:after, +*[id*=large]:after, +*[id*=small]:after, +*[id*=blue]:after, +*[id*=green]:after, +*[id*=yellow]:after, +*[id*=white]:after, +*[id*=black]:after, +*[id*=Left]:after, +*[id*=Right]:after, +*[id*=Bottom]:after, +*[id*=Center]:after, +*[id*=Clear]:after, +*[id*=Float]:after, +*[id*=Large]:after, +*[id*=Small]:after, +*[id*=Blue]:after, +*[id*=Green]:after, +*[id*=Yellow]:after, +*[id*=White]:after, +*[id*=Black]:after, +*[class*=\\]:after, +*[class*=\.]:after, +*[class*=\#]:after, +*[class*=\~]:after, +*[class*=\!]:after, +*[class*=\@]:after, +*[class*=\$]:after, +*[class*=\%]:after, +*[class*=\^]:after, +*[class*=\&]:after, +*[class*=\*]:after, +*[class*=\(]:after, +*[class*=\)]:after, +*[class*=\=]:after, +*[class*=\,]:after, +*[class*=\/]:after, +*[class*=\']:after, +*[class*=\;]:after, +*[class*=\:]:after, +*[class*=\"]:after, +*[class*=\?]:after, +*[class*=\>]:after, +*[class*=\<]:after, +*[class*=\[]:after, +*[class*=\]]:after, +*[class*=\{]:after, +*[class*=\}]:after, +*[class*=\|]:after, +*[class*=\`]:after, +*[id*=\\]:after, +*[id*=\.]:after, +*[id*=\#]:after, +*[id*=\~]:after, +*[id*=\!]:after, +*[id*=\@]:after, +*[id*=\$]:after, +*[id*=\%]:after, +*[id*=\^]:after, +*[id*=\&]:after, +*[id*=\*]:after, +*[id*=\(]:after, +*[id*=\)]:after, +*[id*=\=]:after, +*[id*=\,]:after, +*[id*=\/]:after, +*[id*=\']:after, +*[id*=\;]:after, +*[id*=\:]:after, +*[id*=\"]:after, +*[id*=\?]:after, +*[id*=\>]:after, +*[id*=\<]:after, +*[id*=\[]:after, +*[id*=\]]:after, +*[id*=\{]:after, +*[id*=\}]:after, +*[id*=\|]:after, +*[id*=\`]:after, +body:after { border: 1px solid #000; color: #000; display: block; font-family: helvetica; font-size: 12px; - font-weight: normal; + font-style: normal; + font-weight: bold; + line-height: 1.3em; + padding: .1em .3em; position: absolute; + text-decoration: none; text-transform: none; z-index: 99999; } @@ -96,89 +264,152 @@ marquee:after { element. */ -table:not([summary]):after { - background: green; - content: 'Should you have a SUMMARY attribute on your TABLE?'; +table[summary]:after { + background: #8F8; + content: 'SUMMARY attribute is obsolete'; +} + +table > *:first-child:not(caption):after { + background: #8F8; + content: 'Should you have a CAPTION on your TABLE?'; } table > tr:after { - background: yellow; - content: 'TABLE does not have a TBODY.'; + background: #FF8; + content: 'TABLE does not have a TBODY'; } table th:not([scope]):after { - background: green; - content: 'Should TH have a SCOPE attribute (ROW or COL)?.'; + background: #8F8; + content: 'Should TH have a SCOPE attribute (ROW or COL)? OK if using ID and HEADERS'; } table thead td:after { - background: green; - content: 'Cells in THEAD should be TH.'; + background: #8F8; + content: 'Cells in THEAD should be TH'; +} + +table > colgroup ~ caption:after { + background: #FF8; + content: 'CAPTION must come before COLGROUP'; +} + +table > thead ~ colgroup + *:before, +table > tfoot ~ colgroup + *:before, +table > tbody ~ colgroup + *:before { + background: #FF8; + content: 'COLGROUP must come before THEAD, TFOOT and TBODY'; +} + +table > thead ~ caption:after, +table > tfoot ~ caption:after, +table > tbody ~ caption:after { + background: #FF8; + content: 'CAPTION must come before THEAD, TFOOT and TBODY'; } table > tbody:first-child:after { - background: green; + background: #8F8; content: 'Do you need a THEAD or TFOOT?'; } -table > tbody + tfoot:after { - background: yellow; - content: 'TBODY should come after TFOOT.'; +table > tfoot ~ thead:after { + background: #FF8; + content: 'TFOOT should come after THEAD'; +} + +table > tbody ~ tfoot:after { + background: #FF8; + content: 'TBODY should come after TFOOT'; } -table > tr:first-child:last-child:after, -table > tbody > tr:first-child:last-child:after { - background: green; +table > tbody ~ thead:after { + background: #FF8; + content: 'TBODY should come after THEAD'; +} + +table > tr:only-child:after, +table > tbody > tr:only-child:after { + background: #8F8; content: 'Only one TR in TABLE. Are you using it for layout?'; } table > *:not(thead):not(tfoot):not(tbody):not(tr):not(colgroup):not(caption):after { - background: yellow; + background: #FF8; content: 'Only THEAD/TFOOT/TBODY/COLGROUP/CAPTION/TR can be children of a TABLE'; } +colgroup *:not(col):after { + background: #FF8; + content: 'Only COLs can be children of COLGROUP'; +} + table[align]:after, table[bgcolor]:after, table[border]:after, table[cellpadding]:after, table[cellspacing]:after, -table[width]:after { - background: yellow; - content: 'Element has inline style.'; +*:not(img):not(iframe)[width]:after, +*:not(img):not(iframe)[height]:after, +*[border]:after { + background: #FF8; + content: 'Element has inline style'; +} + +*:not(area):not(base):not(br):not(col):not(embed):not(hr):not(iframe):not(img):not(input):not(textarea):empty:after { + background: #FF8; + content: 'Element is empty. Is this necessary?'; +} + +a a:after { + background: #F88; + content: 'A tag within another A tag - this looks like a bug'; } -img:not([alt]):after { - background: yellow; - content: 'Image does not have an ALT attribute.'; +img:not([alt]) ~ *:not(area):not(base):not(br):not(col):not(embed):not(hr):not(iframe):not(img):not(input):first-of-type:before { + background: #FF8; + content: 'Image does not have an ALT attribute'; +} + +img:not([src]) ~ *:not(area):not(base):not(br):not(col):not(embed):not(hr):not(iframe):not(img):not(input):first-of-type:before, +img[src=""] ~ *:not(area):not(base):not(br):not(col):not(embed):not(hr):not(iframe):not(img):not(input):first-of-type:before, +img[src="#"] ~ *: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: 'IMG without proper SRC attribute. Serious implications for some browsers'; +} + +img[src="spacer.gif"] ~ *:not(area):not(base):not(br):not(col):not(embed):not(hr):not(iframe):not(img):not(input):first-of-type:before { + background: #FF8; + content: 'spacer.gif used - is this used for layout?'; } a[href="#"]:after, a:not([href]):after { - background: yellow; - content: 'Anchor tag is # or does not exist - does not degrade gracefully.'; + background: #FF8; + content: 'Anchor tag is # or does not exist - does not degrade gracefully'; } a[href*=javascript\:]:after, a[onclick]:after, a[onmouseover]:after, a[onmouseout]:after { - background: yellow; - content: 'Inline JS on anchor.'; + background: #FF8; + content: 'Inline JS on anchor'; } label:not([for]):after { - background: yellow; + background: #FF8; content: 'Should LABEL have a FOR attribute?'; } nav:not([role]):after { - background: yellow; - content: 'NAV element should have a ROLE attribute.'; + background: #FF8; + content: 'NAV element should have a ROLE attribute'; } div[role="img"]:not([aria-label]):after { - background: yellow; - content: 'DIV used as image should have ARIA-LABEL.'; + background: #FF8; + content: 'DIV used as image should have ARIA-LABEL'; } h1 div:after, @@ -187,69 +418,263 @@ h3 div:after, h4 div:after, h5 div:after, h6 div:after, -a div:after, span div:after, +html[xmlns] a div:after, html[xmlns] a h1:after, html[xmlns] a h2:after, html[xmlns] a h3:after, html[xmlns] a h4:after, html[xmlns] a h5:after, html[xmlns] a h6:after { - background: yellow; - content: 'Block level element within inline element.'; + background: #FF8; + content: 'Block level element within inline element'; } ol > *:not(li):after, ul > *:not(li):after { - background: yellow; + background: #FF8; content: 'Only LIs can be children of UL or OL'; } dl > *:not(dt):not(dd):after { - background: yellow; + background: #FF8; content: 'Only DT/DD can be children of a DL'; } form > *:not(fieldset):after { - background: green; + background: #8F8; content: 'Should you be using a FIELDSET?'; } -fieldset *:not(legend):first-child:after { - background: green; +fieldset > *:not(legend):first-child:after { + background: #8F8; content: 'Should your FIELDSET be using a LEGEND?'; } -iframe:not([title]):after { - background: green; - content: 'IFRAME lacks TITLE attribute.'; +iframe:not([title]) ~ *:not(area):not(base):not(br):not(col):not(embed):not(hr):not(iframe):not(img):not(input):first-of-type:before { + background: #FF8; + content: 'IFRAME lacks TITLE attribute'; } center:after, u:after, font:after { - background: yellow; - content: 'Deprecated tag used.'; + background: #FF8; + content: 'Deprecated tag used'; +} + +*[class^="1"]:after, +*[class^="2"]:after, +*[class^="3"]:after, +*[class^="4"]:after, +*[class^="5"]:after, +*[class^="6"]:after, +*[class^="7"]:after, +*[class^="8"]:after, +*[class^="9"]:after, +*[class^="0"]:after { + background: #FF8; + content: 'Class name cannot start with number'; +} + +*[id^="1"]:after, +*[id^="2"]:after, +*[id^="3"]:after, +*[id^="4"]:after, +*[id^="5"]:after, +*[id^="6"]:after, +*[id^="7"]:after, +*[id^="8"]:after, +*[id^="9"]:after, +*[id^="0"]:after { + background: #FF8; + content: 'ID cannot start with number'; +} + +*[class*=left]:after, +*[class*=right]:not([class*=opyright]):after, +*[class*=bottom]:after, +*[class*=center]:after, +*[class*=clear]:after, +*[class*=float]:after, +*[class*=large]:after, +*[class*=small]:after, +*[class*=blue]:after, +*[class*=green]:after, +*[class*=yellow]:after, +*[class*=white]:after, +*[class*=black]:after, +*[class*=Left]:after, +*[class*=Right]:after, +*[class*=Bottom]:after, +*[class*=Center]:after, +*[class*=Clear]:after, +*[class*=Float]:after, +*[class*=Large]:after, +*[class*=Small]:after, +*[class*=Blue]:after, +*[class*=Green]:after, +*[class*=Yellow]:after, +*[class*=White]:after, +*[class*=Black]:after { + background: #8F8; + /* I know that these aren't necessarily bad, but probably worth highlighting */ + content: attr(class) ' has implied style meaning - should you be naming it differently?'; +} + +*[id*=left]:after, +*[id*=right]:not([id*=opyright]):after, +*[id*=bottom]:after, +*[id*=center]:after, +*[id*=clear]:after, +*[id*=float]:after, +*[id*=large]:after, +*[id*=small]:after, +*[id*=blue]:after, +*[id*=green]:after, +*[id*=yellow]:after, +*[id*=white]:after, +*[id*=black]:after, +*[id*=Left]:after, +*[id*=Right]:after, +*[id*=Bottom]:after, +*[id*=Center]:after, +*[id*=Clear]:after, +*[id*=Float]:after, +*[id*=Large]:after, +*[id*=Small]:after, +*[id*=Blue]:after, +*[id*=Green]:after, +*[id*=Yellow]:after, +*[id*=White]:after, +*[id*=Black]:after { + background: #8F8; + /* I know that these aren't necessarily bad, but probably worth highlighting */ + content: attr(id) ' has implied style meaning - should you be naming it differently?'; +} + +*[class*=\\]:after, +*[class*=\.]:after, +*[class*=\#]:after { + background: #F88; + content: 'Classname has an ambiguous character'; +} + +*[id*=\\]:after, +*[id*=\.]:after, +*[id*=\#]:after { + background: #F88; + content: 'ID has an ambiguous character'; +} + +*[class*=\~]:after, +*[class*=\!]:after, +*[class*=\@]:after, +*[class*=\$]:after, +*[class*=\%]:after, +*[class*=\^]:after, +*[class*=\&]:after, +*[class*=\*]:after, +*[class*=\(]:after, +*[class*=\)]:after, +*[class*=\=]:after, +*[class*=\,]:after, +*[class*=\/]:after, +*[class*=\']:after, +*[class*=\;]:after, +*[class*=\:]:after, +*[class*=\"]:after, +*[class*=\?]:after, +*[class*=\>]:after, +*[class*=\<]:after, +*[class*=\[]:after, +*[class*=\]]:after, +*[class*=\{]:after, +*[class*=\}]:after, +*[class*=\|]:after, +*[class*=\`]:after { + background: #FF8; + content: 'Class has an illegal character'; +} + +*[id*=\~]:after, +*[id*=\!]:after, +*[id*=\@]:after, +*[id*=\$]:after, +*[id*=\%]:after, +*[id*=\^]:after, +*[id*=\&]:after, +*[id*=\*]:after, +*[id*=\(]:after, +*[id*=\)]:after, +*[id*=\=]:after, +*[id*=\,]:after, +*[id*=\/]:after, +*[id*=\']:after, +*[id*=\;]:after, +*[id*=\:]:after, +*[id*=\"]:after, +*[id*=\?]:after, +*[id*=\>]:after, +*[id*=\<]:after, +*[id*=\[]:after, +*[id*=\]]:after, +*[id*=\{]:after, +*[id*=\}]:after, +*[id*=\|]:after, +*[id*=\`]:after { + background: #FF8; + content: 'ID has an illegal character'; } /* These may not be "wrong", but let's bug you anyway. */ map:after { - background: green; + background: #8F8; content: 'Is MAP appropriate here?'; } +br ~ *:not(area):not(base):not(br):not(col):not(embed):not(hr):not(img):not(input):first-of-type:before { + background: #8F8; + content: 'Is BR appropriate here?'; +} + +br + br ~ *: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: 'Should you be using a P tag?'; +} + b:after, i:after { - background: green; + background: #8F8; content: 'Should you be using STRONG or EM?'; } blink:after, marquee:after { - background: yellow; + background: #FF8; content: 'Should you be using STRONG or EM?'; } +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 { + background: #8F8; + content: 'script tag without type defined'; +} + +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 { + background: #8F8; + 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 */ /******************/ @@ -258,31 +683,48 @@ marquee:after { element so it's easy to spot. Use outline instead of border to avoid messing with the document flow. */ - -table:not([summary]), -table th:not([scope]), -table thead td, -table > tr:first-child:last-child, -table > tbody > tr:first-child:last-child, -table > tbody:first-child, -form > *:not(fieldset), -fieldset *:not(legend):first-child, -map, -b, -i { - outline: 5px solid green; +a a, +img:not([src]), +img[src=""], +img[src="#"], +/* +img[src*="&"]:not([src*="&"]), +a[href*="&"]:not([href*="&"]), +*/ +*[class*=\\], +*[class*=\.], +*[class*=\#], +*[id*=\\], +*[id*=\.], +*[id*=\#] { + counter-increment: error; + outline: 5px solid #F88; } table > tr, -table > tbody + tfoot, +table > colgroup ~ caption, +table > thead ~ colgroup, +table > tfoot ~ colgroup, +table > tbody ~ colgroup, +table > thead ~ caption, +table > tfoot ~ caption, +table > tbody ~ caption, +table > tfoot ~ thead, +table > tbody ~ tfoot, +table > tbody ~ thead, +colgroup *:not(col), table > *:not(thead):not(tfoot):not(tbody):not(tr):not(colgroup):not(caption), table[align], table[bgcolor], table[border], table[cellpadding], table[cellspacing], -table[width], +*:not(img):not(iframe)[width], +*:not(img):not(iframe)[height], +*[border], +*:not(area):not(base):not(br):not(col):not(embed):not(hr):not(iframe):not(img):not(input):not(textarea):empty, img:not([alt]), +img[src="spacer.gif"], a:not([href]), a[href="#"], a[href*=javascript\:], @@ -298,8 +740,8 @@ h3 div, h4 div, h5 div, h6 div, -a div, span div, +html[xmlns] a div, html[xmlns] a h1, html[xmlns] a h2, html[xmlns] a h3, @@ -310,10 +752,185 @@ ol > *:not(li), ul > *:not(li), dl > *:not(dt):not(dd), iframe:not([title]), +*[class^="1"], +*[class^="2"], +*[class^="3"], +*[class^="4"], +*[class^="5"], +*[class^="6"], +*[class^="7"], +*[class^="8"], +*[class^="9"], +*[class^="0"], +*[id^="1"], +*[id^="2"], +*[id^="3"], +*[id^="4"], +*[id^="5"], +*[id^="6"], +*[id^="7"], +*[id^="8"], +*[id^="9"], +*[id^="0"], +*[class*=\~], +*[class*=\!], +*[class*=\@], +*[class*=\$], +*[class*=\%], +*[class*=\^], +*[class*=\&], +*[class*=\*], +*[class*=\(], +*[class*=\)], +*[class*=\=], +*[class*=\,], +*[class*=\/], +*[class*=\'], +*[class*=\;], +*[class*=\:], +*[class*=\?], +*[class*=\>], +*[class*=\<], +*[class*=\[], +*[class*=\]], +*[class*=\{], +*[class*=\}], +*[class*=\|], +*[class*=\`], +*[id*=\~], +*[id*=\!], +*[id*=\@], +*[id*=\$], +*[id*=\%], +*[id*=\^], +*[id*=\&], +*[id*=\*], +*[id*=\(], +*[id*=\)], +*[id*=\=], +*[id*=\,], +*[id*=\/], +*[id*=\'], +*[id*=\;], +*[id*=\:], +*[id*=\?], +*[id*=\>], +*[id*=\<], +*[id*=\[], +*[id*=\]], +*[id*=\{], +*[id*=\}], +*[id*=\|], +*[id*=\`], center, u, font, blink, marquee { - outline: 5px solid yellow; + counter-increment: warning; + outline: 5px solid #FF8; +} + +table[summary], +table > *:first-child:not(caption), +table th:not([scope]), +table thead td, +table > tr:first-child:last-child, +table > tbody > tr:first-child:last-child, +table > tbody:first-child, +form > *:not(fieldset), +fieldset > *:not(legend):first-child, +map, +br, +b, +i, +*[class*=left], +*[class*=right]:not([class*=opyright]), +*[class*=bottom], +*[class*=center], +*[class*=clear], +*[class*=float], +*[class*=large], +*[class*=small], +*[class*=blue], +*[class*=green], +*[class*=yellow], +*[class*=white], +*[class*=black], +*[class*=Left], +*[class*=Right], +*[class*=Bottom], +*[class*=Center], +*[class*=Clear], +*[class*=Float], +*[class*=Large], +*[class*=Small], +*[class*=Blue], +*[class*=Green], +*[class*=Yellow], +*[class*=White], +*[class*=Black], +*[id*=left], +*[id*=right]:not([id*=opyright]), +*[id*=bottom], +*[id*=center], +*[id*=clear], +*[id*=float], +*[id*=large], +*[id*=small], +*[id*=blue], +*[id*=green], +*[id*=yellow], +*[id*=white], +*[id*=black], +*[id*=Left], +*[id*=Right], +*[id*=Bottom], +*[id*=Center], +*[id*=Clear], +*[id*=Float], +*[id*=Large], +*[id*=Small], +*[id*=Blue], +*[id*=Green], +*[id*=Yellow], +*[id*=White], +*[id*=Black], +script:not([type]), +style:not([type]), +body script ~ *:not(script), +body style { + counter-increment: notice; + outline: 5px solid #8F8; +} + +body { + counter-reset: error warning notice; +} + +body:after { + background: #FFF; + content: 'Errors: ' counter(error) ' | Warnings: ' counter(warning) ' | Notices: ' counter(notice); + font-size: 125%; + right: 1em; + outline: 5px solid #000; + position: fixed; + bottom: 1em; +} + +/*********/ +/* EXTRA */ +/*********/ + +/* Stuff that helps in developing / debugging, but don't quite fit anywhere + else. +*/ + +body > img:only-child { + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgAgMAAAAOFJJnAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAlQTFRF/+Pj2tra2dnZ4Z9gVgAAAHxJREFUGBkFwUGKxDAQBDB9shqcuw2T/3TAc5+A95UruZv+IoNqvEWCavLFDB2M5vPgGpyFNOcB80cPJMxgHhLkQ4IxuBorpDA3Y+MazEfC2+gwgnOxHnSogb15F1JcGxmkcBb1AwlVqCIHadZGwt+NGmQhD1lIuB+scOUfnCk3BP0u5SsAAAAASUVORK5CYII=); + border: 50px solid rgba(0, 0, 0, 0.08); + box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); + display: block; + margin: 1em auto; + padding: 0; } \ No newline at end of file