Diagnostic Styling
11 Comments
Comments are ordered by helpfulness, as indicated by you. Help us pick out the gems and discourage asshattery by voting on notable comments.
Got something to add? You can leave a comment below.
Brian Suda
Wilco
I’ve been experimenting with something quite similar for my work with accessibility checks. This technique works great on detecting other problems as well, like missing alt on image maps and image buttons. Or i suppose for having a failsafe on your code to see if you have a lang on your html.
On the accessibility check i also use it to detect handlers, missing titles on frames, javascript in the href and embedded objects. Something I also find helpful is to have it behind a body:hover so you can see it without all the outlines.
Great Article. Set these diagnostic styles with JavaScript via a bookmarklet and you can build your own kind of WDT in a way…
Connor Treacy
I do something similar when I’m testing sites, but I put all the css into a file called “debug.css” and pre-qualify each rule with “body.debug”. Then it’s possible to deploy to a live site, and use either a DOM manipulator like the IE Dev Toolbar or Firebug to set the class of the body tag to “debug”.
Nice tip about the negative selectors though!
malte
It’s been some time since I used it the last time, but I’m pretty sure, that at least Gecko supports multiple “not” pseudo classes like this:
th:not([scope=“col”]):not([scope=“row”])
Marcos Sader
<blockquote>As I said at the beginning, much of what I covered here doesn’t work in Internet Explorer, most particularly :not() and outline. (Oh, so basically everything? -Ed.)</blockquote>
You can use a Javascript library to add that functionality to IE, i would suggest jQuery which has implemented most of the <a href=“http://docs.jquery.com/Selectors”>advanced selectors</a> used in the “diagnostic styles”.
Caius Durling
My debug.css is up at http://caius.name/code/debug.css
Just a complete file of all the code mentioned in this article.
Daniel Skinner
Another selector I used is to check whether external links have a rel attribute.
This will only work if relative internal links are used.
/* Highlight external links with no rel attribute */
a[href^=“http://”]:not([rel]), a[href^=“http://”][rel=”“] {
}
This selector highlights all links whose href attribute starts with http:// only if the link doesn’t have a rel attribute (or it is empty).
The reason I do this is because you cannot use the target attribute in XHTML. I give all external links rel=“external” and a piece of JavaScript finds these links and adds a target attribute to it (which is perfectly valid DOM).
You could easily modify the selector to find all external links that do not have a target attribute.
Kevin Rapley
@Daniel Skinner the target attribute cannot be used in XHTML Strict, but is perfectly valid for Transitional. If you build in transitional then you can apply the following:
/* external link with no target=”_blank” specified */
a[href^=“http:”]:not([target=”_blank”]) {
border-bottom: 5px solid blue;
}
This happily highlights an external link without a target=”_blank” specified but adding a bottom border in blue allowing
a[href]:not([title]) {
border: 5px solid red;
}
to still operate. I really like the rel used alongside dom for Strict markup, I will have to look into this. Thanks.
Behrends
Great article, but what makes me wonder is the fact that the css validator on w3c.org found 191 mistakes on the actual page of your articel.
http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2F24ways.org%2F2007%2Fdiagnostic-styling&profile=css21&usermedium=all&warning=1&lang=en
Chris
Its also worth mentioning for anyone who has not also read Marco Battilana’s article, Big Red Angry Text on Accessites.org that diagnostic styling can help clients maintain their sites by highlighting any errors they put in, such as depreciated attributes and tags.
All in all a good article though; a beautifully clear explanation of a very handy technique. Just the sort of thing one would want for Christmas.
Another option if you don’t have access to a testing environment, is to just use the User-Stylesheets and apply them through the browser.