Debug CSS
Debug CSS is nothing new. Eric Meyer has been talking about them since the 1940's. Still, not many developers use them when building and testing.
I just added a debug CSS to a site that we're working on. Its purpose is to visually highlights 5 markup problems.
- Images with a blank alt attribute value, i.e. alt="". This won't cause validation errors, but a blank alt doesn't help with accessibility either.
- Images with a missing alt attribute. A strict doc type and Firefox's HTML Validator extension brings this error to light as well. A debug CSS is even better, highlighting the error right on the page.
- Undefined links, i.e. href="". This is common when building a site. The developer knows that something is linked but isn't sure of the URL yet. When testing, instead of manually clicking through all the links, a debug CSS can highlight them.
- Links to nothing, i.e. href="#". Identical to the item above, but some developers prefer href="#" to href="".
- Empty containers. These too aren't technically errors, but why go live with a bunch of empty markup containers?
Here's the simple debug CSS that I like to add.
img[alt=""] { border: 3px dotted red; }
img:not([alt]) { border: 5px solid red; }
a[href="#"] { background-color: lime; }
a[href=""] { background-color: lime; }
span:empty, li:empty, p:empty, td:empty, th:empty {
padding: .5em; background-color: yellow; }
Once the site is cleaned up, remove the debug css, or not.
Happy Debugging!
Comments
Very cool. I've often used the old div {border: 1px dotted red;} to troubleshoot layout problems (sometimes just putting a border in fixes them) but hadn't thought to use it with attributes... definitely goin’ in my bag-o.
Read something more recent.
Statements and opinions expressed in this blog and any comments made are the private opinions of the respective poster, and, as such, iMarc LLC is neither responsible nor liable for such content.
Visitors
Debug sheets are a savior, especially when working with a large team or training a client on the proper ways to use their CMS. Thanks for the post.