Advanced Search

Diagnostic stylesheet

/ Published in: CSS
Save to your folder(s)
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.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. /* Images */
  2. img {outline: 5px solid red;}
  3. img[alt][title] {outline-width: 0;}
  4. img[alt] {outline-color: fuchsia;}
  5. img[alt], img[title] {outline-style: double;}
  6. img[alt=""][title], img[alt][title=""] {outline-width: 3px;}
  7. img[alt=""][title=""] {outline-style: dotted;}
  8. img[width], img[height] {outline:0;}
  9.  
  10. /* Links */
  11. a[href="#"] {background: lime;}
  12. a[href=""] {background: fuchsia;}
  13.  
  14. /* Nested divs */
  15. div { border: solid 2px red; }
  16. div div { border-color: orange; }
  17. div div div { border-color: yellow; }
  18. div div div div { border-color: green; }
  19. div div div div div { border-color: aqua; }
  20. div div div div div div { border-color: navy; }
  21. div div div div div div div { border-color: purple; }
  22.  
  23. /* other */
  24. *[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


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.