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.

  1. 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.

  2. Great Article. Set these diagnostic styles with JavaScript via a bookmarklet and you can build your own kind of WDT in a way…

  3. 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!

  4. 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”])

  5. 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”.

  6. 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=”“] {

    background:green;

    }

    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.

  7. 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.

  8. 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

Impress us

Be friendly / use Textile