advanced code snippet search

We Recommend

CSS: The Definitive Guide CSS: The Definitive Guide
Provides you with a comprehensive guide to CSS implementation, along with a thorough review of all aspects of CSS 2.1. Updated to cover Internet Explorer 7, Microsoft's vastly improved browser, this new edition includes content on positioning, text wrapping (nowrap), lists and generated content, table layout, user interface, paged media, and more.

Posted By

j_junyent on 12/01/07


Tagged

diagnostic


Versions (?)


Who likes this?

3 people have marked this snippet as a favorite

alvaroisorna
SpinZ
stoker


Diagnostic stylesheet

Published in: CSS 

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

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.

Plain TextExpand 
  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;}

Report this snippet 

You need to login to post a comment.