Debug CSS

By Dave Tufts – Tuesday, Mar 10, 2009 / 2:45pm View more articles

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

Tuesday, Mar 10, 2009 / 5:14pm ∞ Mike Kivikoski said…

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.

Wednesday, Mar 11, 2009 / 8:21pm ∞ Errol Sayre said…

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.

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.

Meet The Author

Dave Tufts

Vice President, Director of Technology

Search

Recent Blog Posts

We Visitors

iMarc
14 Inn Street
Newburyport, MA 01950
Phone: (978) 462-8848
Fax: (978) 462-8807
Directions

Contact Us

Whether you have a huge project specification or just want to talk about updating your site, we’re here to help. Fill out the form, and we’ll get right back to you.

Lunchroom Banter (Volume XX)

Nick commented: Since Bill didn't do it, I will. "Oh snap!"

iMarcians with staying power

Nick commented: Congratulations on the anniversaries. I had a professor tell me early on at the Art Institute that "you can expect to change web jobs every 2-3 years until you settle somewhere". I love proving this guy wrong every day. Congrats again.

Twitter, Alone, Is Not Customer Service

Jay G commented: Same here, and my story is with Alaska Air, too. Their website said the customer service phone number was open something like 8am-8pm PST, but this was after hours, so I tweeted. Lo, and behold, I got a tweet response in 10 minutes with the 24/7 phone number. But this didn't change the confusion from their website…

Mobile browsers: Here's the data

Robert Mohns commented: The data comes from visitors to iMarc.net — an important detail I forgot to include! — not the web as a whole. As for why so little Flash on mobile devices… I'd say this is because even Flash Lite is pretty resource intensive, and it's just not essential to the core content most people need to access. I don't think it has a lot to do…

Jason Cronkhite commented: Robert, The data on Flash is interesting. What is your source? I am interested because of my interest in a live streaming company. Further, I'm curious why this is the case for Flash. Is there any merit to HTML5 that Jobs argues? Do you think this has anything to do with mobile network capacity for streaming…