Posted By

j_junyent on 12/01/07

Tagged

Versions (?)

Last Edited at 12/01/07 03:16pm

Statistics

Viewed 422 times

Favorited by 1 user(s)

Related snippets

Diagnostic stylesheet

/ Published in: CSS

The primary goal here is to have a set of rules that can be applied during the development phase of a new layout. These rulesâ€™ aim is to visually highlight problems in the markup.

Highlighted TextExpand

/* Images */
img {outline: 5px solid red;}
img[alt][title] {outline-width: 0;}
img[alt] {outline-color: fuchsia;}
img[alt], img[title] {outline-style: double;}
img[alt=""][title], img[alt][title=""] {outline-width: 3px;}
img[alt=""][title=""] {outline-style: dotted;}
img[width], img[height] {outline:0;}

/* Links */
a[href="#"] {background: lime;}
a[href=""] {background: fuchsia;}

/* Nested divs */
div { border: solid 2px red; }
div div { border-color: orange; }
div div div { border-color: yellow; }
div div div div { border-color: green; }
div div div div div { border-color: aqua; }
div div div div div div { border-color: navy; }
div div div div div div div { border-color: purple; }

/* other */
*[align], *[valign], *[border], table[cellspacing], table[cellpadding], *[width], *[height], a[href^=â€javascript:â€], *[onload], *[onunload], *[onchange], *[onsubmit], *[onreset], *[onselect], *[onblur], *[onfocus], *[onkeydown], *[onkeypress], *[onkeyup], *[onclick], *[ondblclick], *[onmousedown], *[onmousemove], *[onmouseover], *[onmouseout], *[onmouseup] {outline:5px solid red;}

URL: http://meyerweb.com/eric/thoughts/2007/09/07/diagnostic-styling/

Report this snippet Tweet

Comments

Subscribe to comments

Comment:

You need to login to post a comment.