TOOLS - CSS: Professional Techniques for Modern Layout - page 30

h is will put a thick, solid red line around any element with a style attribute, any font
element, and any center element. You could spice it up even further with something like
background-color: lime to really drive home the point. h e idea is to catch places
where dodgy markup has appeared, whether through entry via a CMS or some other means.

You might think that validation would catch any markup problems, but that's not always true.
Sure, it will warn you if you're using font , but there are other problems you may encounter
that a validator won't catch. Consider the common example of a JavaScript link:

< a href="#" onclick="javascript:nextPage();">Next< / a>

h is will all look i ne to a validator, because the markup is correct. h e problem is that for
anyone without JavaScript, the link will do nothing. h ere should be some kind of non-JS
fallback, and it should be handled with an href value. So another line of the meyerweb
diagnostic styles says:

a[href="#"] { background : lime ;}

h at will punch up any link that lacks a non-JS fallback value for its href attribute. (It works
using an attribute selector; for more, see “Simple Attribute Selection” in Chapter 2.)

How would you use diagnostic CSS? Either by importing it into your development site's CSS
and then removing it before going live, or by setting it up as a user style sheet in your browser
so that you can apply it to any page you visit.

32

Here's a full diagnostic style sheet which does things like i nd elements that have no content,
call out images without alt or title attributes as well as those that are empty, i nd tables
without summary attributes and table headers that have invalid scope values, and links that
have broken or empty title and href attributes. Note that this version will not work in IE7
because of the attribute selectors. h is version won't work in IE8, either, because of the :not()
and :empty() pseudo-classes. Figure 1-32 shows a test page for this diagnostic CSS.

div:empty , span:empty ,
li:empty , p:empty ,
td:empty , th:empty { padding : 0.5em ; background : yellow ;}
*[style] , font , center { outline : 5px solid red ;}
*[class=""] , *[id=""] { outline : 5px dotted red ;}
img[alt=""] { border : 3px dotted red ;}
img:not([alt]) { border : 5px solid red ;}
img[title=""] { outline : 3px dotted fuchsia ;}
img:not([title]) { outline : 5px solid fuchsia ;}
table:not([summary]) { outline : 5px solid red ;}
table[summary=""] { outline : 3px dotted red ;}
th { border : 2px solid red ;}
th[scope="col"] , th[scope="row"] { border : none ;}
a[href]:not([title]) { border : 5px solid red ;}
a[title=""] { outline : 3px dotted red ;}
a[href="#"] { background : lime ;}
a[href=""] { background : fuchsia ;}