Advanced Search

Return to Snippet

Revision: 4360
at December 1, 2007 15:16 by j_junyent
Initial Code 
/* 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;}
Initial URL 
http://meyerweb.com/eric/thoughts/2007/09/07/diagnostic-styling/
Initial Description 
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.
Initial Title 
Diagnostic stylesheet
Initial Tags 

                                

                                                            

                                    

                                        

                                        Initial Language
                                        

                                    

                                    
CSS