Posted By

JimSangwine on 05/05/11


Tagged


Versions (?)

CSS Diagnostics


 / Published in: CSS
 

  1. /* Find mistakes in HTML and highlight the crap out of them. */
  2.  
  3. /* Empty Elements */
  4. div:empty, span:empty, li:empty, p:empty, td:empty, th:empty
  5. { padding: 20px; border: 5px dotted yellow !important; }
  6.  
  7. /* Empty Attributes */
  8. *[alt=""], *[title=""], *[class=""], *[id=""], a[href=""], a[href="#"]
  9. { border: 5px solid yellow !important; }
  10.  
  11. /* Deprecated Elements */
  12. applet, basefont, center, dir, font, isindex, menu, s, strike, u
  13. { border: 5px dotted red !important; }
  14.  
  15. /* Deprecated Attributes */
  16. *[background], *[bgcolor], *[clear], *[color], *[compact], *[noshade], *[nowrap], *[size], *[start],
  17. *[bottommargin], *[leftmargin], *[rightmargin], *[topmargin], *[marginheight], *[marginwidth], *[alink], *[link], *[text], *[vlink],
  18. *[align], *[valign],
  19. *[hspace], *[vspace],
  20. *[height], *[width],
  21. ul[type], ol[type], li[type]
  22. { border: 5px solid red !important; }
  23.  
  24. /* Proposed Deprecated Elements */
  25. input[type="button"], big, tt
  26. { border: 5px dotted #33FF00 !important; }
  27.  
  28. /* Proposed Deprecated Attributes */
  29. *[border], a[target], table[cellpadding], table[cellspacing], *[name]
  30. { border: 5px solid #33FF00 !important; }
  31.  
  32. /* Eric Meyer's version: */
  33.  
  34. div:empty, span:empty,
  35. li:empty, p:empty,
  36. td:empty, th:empty {padding: 0.5em; background: yellow;}
  37.  
  38. *[style], font, center {outline: 5px solid red;}
  39. *[class=""], *[id=""] {outline: 5px dotted red;}
  40.  
  41. img[alt=""] {border: 3px dotted red;}
  42. img:not([alt]) {border: 5px solid red;}
  43. img[title=""] {outline: 3px dotted fuchsia;}
  44. img:not([title]) {outline: 5px solid fuchsia;}
  45.  
  46. table:not([summary]) {outline: 5px solid red;}
  47. table[summary=""] {outline: 3px dotted red;}
  48. th {border: 2px solid red;}
  49. th[scope="col"], th[scope="row"] {border: none;}
  50.  
  51. a[href]:not([title]) {border: 5px solid red;}
  52. a[title=""] {outline: 3px dotted red;}
  53. a[href="#"] {background: lime;}
  54. a[href=""] {background: fuchsia;}

Report this snippet  

You need to login to post a comment.