Diagnostic Styling

Published 10 years, 4 months ago

On stage at An Event Apart Chicago, I made reference to recent efforts I’ve been making to develop a set of “diagnostic” styles.  I’d hoped to have them ready for presentation in Chicago, but didn’t get it done in time.

Well, they’re still not really done, but as I’ve now torn them apart and rebuilt them three or four times, with no real end to that cycle in sight, it’s time for me to get them off of my hard drive and into the public eye.  It’s a little bit complicated, so rather than post the whole thing in this entry, I’m going to link to a demonstration page.  I first want to say a few things about it, though.

The primary goal here is to have a set of rules that can be applied during the development phase of a new layout.  These rules’ aim is to visually highlight problems in the markup.  For example, here’s one of the rules:

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

That brings some eye-watering attention to any link that has an empty href, or is (most likely) being used as a JavaScript trigger with no fallback.

Where things got tricky was when I wanted to do things like higlight images that didn’t have alt or title attributes.  In a perfect CSS3 world, I could just say img:not(img[alt]) to select non-alted images.  At least, I think that’s what I would say—:not() syntax makes my temples throb.  Since I was developing these with the idea of releasing them to a more general development audience, though, I decided to use regular old non-:not selectors.

So what I ended up doing, in slightly simplified form, was this sort of thing:

img {outline: 5px solid red;}
img[alt][title] {outline-width: 0;}
img[alt] {outline-color: fuchsia;}
img[alt], img[title] {outline-style: double;}
img[alt=""][title], img[alt][title=""] {outline-width: 3px;}
img[alt=""][title=""] {outline-style: dotted;}

The logic works out like so:

  1. Set all images to have a big red outline.
  2. If an image has both alt and title attributes, set the outline width to zero.
  3. If an image has an alt attribute, set the outline color to fuchsia.  This means the outline of any image that doesn’t have an alt attribute will stay red.
  4. As long as an image has either an alt or a title attribute, make its outline style double.
  5. If an image has an empty alt with any kind of title, or vice versa, make the outline’s width three pixels.
  6. If an image’s alt and title attributes are both empty, then make the outline dotted.

Whew.  Maybe I piled a few too many conditions in there, but I wanted to get some finer granularity on the results, which you can see demonstrated (along with several other things, like highlighting table headers without scope attributes and tables without summary attributes) at the diagnostic demonstration page.  On that page, you’ll see a number of examples and the style sheet that drives them all.  If it’s getting in the way of seeing what’s going on, move the mouse over it to mostly clear it away without actually removing it.  Mouse back out to bring it back.  (Maybe I should reverse those states—what do you think?)

Admittedly, much of what these styles do can be replicated with tools like the Web Developer Toolbar.  The advantage I find with writing my own diagnostic styles is that I can tune them to present exactly the way I want them.  Outlining deprecated elements is fine, but what if I’d rather make them lime-green on cyan to really drive the point into my optic nerves?

Anyway, I don’t for an instant think that these constitute a replacement for the WDT.  They’re just another handy tool to have in the toolbox.

A final note: when actually using diagnostic styles, all of the declarations should be marked !important so as to ensure their application.  I left those directives out of the demo page for clarity’s sake.  If you’re going to use diagnostic styles of this sort in your own projects, remember that you’ll need to add them.

I’m putting these out for comment, suggestions, and general community improvement.  Anyone see things we could add or upgrade?  Let us know!


  1. Probably a bit extreme to highlight all links without title attributes – that would include every link in your post, and most of the WordPress links around the site.

    Forcing title attributes on all links is taking accessibility too far.

  2. I think I’ve gone blind. :-\
    This makes so much sense though…why haven’t people done it before? :-D

  3. This is something I’ve actually been doing while building sites for some time now–though I only do the link highlights, since any time I place an image on the page, it will receive the proper alt text immediately, not to mention that every image doesn’t necessarily deserve a title attribute.

  4. David: It’s not really forcing anything, just calling attention to them if wanted. Basically this is a method that can be altered to your wishes, right?

    The advantage I find with writing my own diagnostic styles is that I can tune them to present exactly the way I want them.

  5. Interesting. And, if built into a development stylesheet, perhaps easier to use as a default test than relying on WDT.

    I know this is a total rabbit hole for this conversation, but I’d be curious to know your comments on the table-headers-with-scope-attributes, versus using col-groups and cols. Resource suggestions for that?

  6. Oh this is good Eric! (or is it “God”? :-) )

    That’s another cool stylesheet to add to the custom sheets easily accessed in Opera… maybe even temporarily substitute the print or mobile/handheld stylesheet for ultra-easy keyboard on-off’ing (that’s a word, right?)

  7. CSS Tricks: Fehlende Attribute mittels CSS darstellen…

  8. It looks like the real advantage of this is that is doesn’t require the use of any development tools — so you can foist it on less-skilled content writers.

    Applying one of these awful backgrounds to font tags would definitely help get them off our site ;-)

  9. Sorry, Charlie; I don’t have any resource suggestions. I know which I prefer, but I don’t want to tear open that particular rabbit hole here.

  10. Another one that’s useful for when debugging someone else’s code:

    div { border: solid 2px red; }
    div div { border-color: orange; }
    div div div { border-color: yellow; }
    div div div div { border-color: green; }
    div div div div div { border-color: aqua; }
    div div div div div div { border-color: navy; }
    div div div div div div div { border-color: purple; }

    That should be enough; gods help you if it isn’t! The purpose of this, obviously, is to highlight obscenely nested divs, the sign that someone doesn’t quite understand floats and positioning in a large project.

    One page I was working on debugging showed up some navy boxes recently, using this stylesheet. I took the original programmer aside and explained about semantic CSS and the judicious use of position: relative, but I’m not sure it will take…

  11. This would be incredibly useful if it was turned into a bookmarklet: if someone were to host a public copy of the diagnostic CSS file, you could make a bookmarklet

  12. Every time that I read one of these technical posts, I am reminded of just how little I know.

    Bat–

    I will start using your div diagnostic style sheet. Thank you very much.

    Meyer–

    Are you suggesting that both title and alt tags should be used for every image? If so, what are your reasons? Thanks.

  13. thacker,
    I know you asked Eric, but here’s my two cents anyway. From where I sit having a title and alt on all images in a web page is a good idea simply because by mousing over it (the image) the title appears as a tool tip to provide some insight into relevant content that may not appear in the photo directly (say the poor person forgot a caption with their photo or there is a hotspot inthe image that isn’t outlined).

    We all know that the intended purpose of the alt text is to provide a more detailed description of the images which is more than the title should do so they work in concert with one another.In fact, I once saw a picture of Mount St Hellens from a web cam where the alt text went on for about a page, but man what a description! Anyway, I digress. The exception to this rule of course is when images are used as backgrounds of divs or other elements as title and alt do not apply to background images anyway.

    After all, other than “Because I don’t want to…” or whatever, can you think of a reason why not having a title and alt on every image is a good idea?

  14. Regarding alt and title, my understanding is this:

    The alt attribute displays when images don’t. Whether it’s because the image link is broken or because the browser doesn’t display images, possibly even because the user has switched images off to save download time, the take-away message is this: alt text is an alternative to the image.

    The title attribute, when you get right down to it, gives you a tooltip. It will appear along with the image, but only when the mouse is hovering over the image. So a title text is an optional bit of information about the image.

    Rule of thumb #1: write your alt text as if the image were not there and you want to convey the same information. In many cases, since the image is the whole point of the page, an alt text of “” is perfectly reasonable.

    Rule of thumb #2: some browsers can’t manage much more than a few words in their tooltips (an extension exists for Firefox to fix this; search for Long Titles on the add-ons website to find it) so titles should be short. They are not a description!

    Suppose you have a picture of Mount St Helens, as Jeff mentioned. The alt text should be something like “Mount St Helens looks like an ordinary hill, except for the velociraptors crawling around the smoking caldera” and the title should say something like “Mount St Helens, photo taken 23 Dec 2003”. If there’s any other description, it belongs in the accompanying text.

  15. Jeff and Bat–

    Gentlemen, thank you very much.

    I will re-adopt the use of both.

    Bat, I noticed in your response the lack of punctuation in your examples of alt and title. I am always concerned about the presentation of run-on-sentences for reasons of accessibility. Will accessibility user agents, in particular Braille readers, create a break/pause for alt and title tags without punctuation? I too often leave out punctuation in title and alt description and possibly shouldn’t. Header elements, for example, are not paused in all assistive technology user agents without a closing punctuation mark.

    Jeff–

    can you think of a reason why not having a title and alt on every image is a good idea?

    I had stopped using both tags for images because JAWS, I believe, or one of the major assistive user agents would read both. It was redundant. But, Bat’s recommendation of differentiation between the two resolves that and adds useful information. Plus, I generally specify a style rule for alt tags just for monitor display.

    I continually revisit these issues and the use of images for Web content. It is a visual medium and design plays a critical part in establishing mood and perception. Strip out all of the design and create perception with alt, title, long description, D links, standard text — is tough as hell, for me at least.

    Back at Bat–

    Your div tag CSS rules, I am considering trying, if possible, to add title and content to your rules to label each color as one, two and so forth.

    Meyer–

    You may want to give some thought to inclusion of Bat’s div rule. For example, used a template from Microsoft on a boinking site and completely overlooked issues of nested div tags. Normally, from scratch design, such nesting may not have been done [probably would have anyway — very bad habit].

    Thank you very much.

  16. May I suggest a few additions?

    *[align], *[valign], *[border], table[cellspacing], table[cellpadding], *[width], *[height], a[href^=”javascript:”], *[onload], *[onunload], *[onchange], *[onsubmit], *[onreset], *[onselect], *[onblur], *[onfocus], *[onkeydown], *[onkeypress], *[onkeyup], *[onclick], *[ondblclick], *[onmousedown], *[onmousemove], *[onmouseover], *[onmouseout], *[onmouseup]
    {outline:5px solid red;}

    and then the following to allow image heights/widths:
    img[width], img[height] {outline:0;}

    I was thinking of throwing ‘blink’ in there as well, but how much more of an eyesore could we make blinking text???

  17. […] styles stellt Eric Meyer vor. Fehlerhaftes HTML wird so hervorragend gekennzeichnet (siehe Demo): Diagnostic Styling Tags: CSS, HTML « […]

  18. Nice idea. I’m already outlining block level elements during development for some time now. Extending that idea to highlight accessibility problems is a very good idea.

  19. Diagnostic Styling…

    Diagnostic Styling
    The primary goal here is to have a set of rules that can be applied during the development phase of a new layout. These rules’ aim is to visually highlight problems in the markup. For example, here”s one of the rules:
    a[href=…

  20. I like the idea of calling out certain elements with missing attributes.

    I mainly use the WDT for that too but I also have a couple lines of CSS stored as snippets in Dreamweaver:

    border: 1px solid red!important; /* delete before going live */

    which makes it very easy just to drop them in when I’m coding. Think I’ll be adding a few more ;-)

  21. I myself use this piece of diagnostic code allot.

    div#cntContent { color: #f00; }
    div#cntContent * { color: #000; }

    This will highlight content text which doesn’t have proper P/UL/etc markup to be red. Especially handy for content management systems so that the client learns to use semantic HTML.

  22. […] Para profundizar en la lógica de esta hoja de estilo nada mejor que leer el artículo de Eric: Diagnostic Styling […]

  23. […] Diagnose-Stylesheet ist eine Idee von Eric Meyer. Ziel ist es sich durch eine extra CSS-Datei auf Probleme aufmerksam […]

  24. I am quite sure that the syntax for :not() is img:not([alt]).
    Isn’t writing img:not(img[alt]) saying img>img:not([alt])? Not sure.

    One thing you could add to your stylesheet is input[type=text]:not([size]). For fun, not that size is required but maybe desired.

    My 2 cents. ;)

  25. […] בעיצוב אבחוני תוכלו לצפות בדוגמאות נוספות. Tags:css Uncategorized עיצוב אבחוני […]

  26. I like Jason’s idea. I could see setting up a big nasty border in a specific color just for attributes that are depreciated.

    Also, setting up an alternate stylesheet that you could click over to that eliminates these styles might be nice, so you can choose to look at them or not look at them depending on what you are working on.

  27. What you want is img:not([alt]).

    :not() is (currently, to my annoyance) not allowed to have more than one thing inside of it. So you’re not allowed to write img:not(img[alt]); it’s a parse error.

    Apparently this restriction was to allow implementations to be simpler, although it really doesn’t make much difference.

  28. […] testing on a shoestring was hoping to publish one here, but it’s not quite done [here it is] Dean Edwards’ IE7 script is a library to make lots of things work in IE5 and IE6 used to be […]

  29. […] CSS Diagnostic Styling Eric Meyer veröffentlicht eine CSS-Datei, die beim Testen eines neuen Design Layouts auf eventuelle Fehler oder Versäumnisse visuell hinweisen – etwa bei fehlenden alternativen Beschreibungen oder falsch verlinkten Elementen. […]

  30. […] CSS Diagnostic StylingEric Meyer presents a diagnostic CSS-file; its primary goal is to have a set of rules that can be applied during the development phase of a new layout. These rules” aim is to visually highlight problems in the markup. […]

  31. […] Eric Meyer explains on his blog how you can use styling to emphasise certain uses of elements in your layout: Diagnostic Styling. […]

  32. This is a superbly simple useful technique … thanks!!!

  33. […] CSS Diagnostic StylingEric Meyer presents a diagnostic CSS-file; its primary goal is to have a set of rules that can be applied during the development phase of a new layout. These rules” aim is to visually highlight problems in the markup. […]

  34. […] Meyer has created some Diagnostic Styling that allows you to see your bad code. Fleshing this idea out a little bit could be a useful tool […]

  35. […] 100% compliant, pode utilizar um recurso que está sendo discutido no 456 Berea Street e no blog do Eric Meyer: o diagnóstico de erros de marcação através de folhas de […]

  36. Eric,
    Great post. What immediately came to mind for me is how this could be used on a browser-by browser basis to highlight browser errors (i.e. 6/7, safari). Theoretically, wouldn’t it be possible to show the actual effects certain settings would have on ie 6 and 7 etc by applying a stylesheet in firefox and thereby debug in firefox. Although correctly writing your styles should alleviate most of these errors, some still exist. This would be most helpful for those on macs. I think I might give it a go.

  37. […] Eric’s Archived Thoughts: Diagnostic Styling (tags: development css webdesign testing accessibility) […]

  38. […] Eric Meyer seine “disgnostic styles” vorgestellt hatte, gibt Roger Johansson den Hinweis, auch Kunden auf diese Weise auf Markup-Fehler […]

  39. […] di una pagina in fase di sviluppo. Allo stesso modo, possiamo usare quello che Eric Meyer chiama styling diagnostico, per evidenziare errori e sviste […]

  40. It’s great idea but I think there are many situations where something can go wrong and this is just an extra job for developer, that’s why we have validators, developer tools etc…

  41. […] Diagnostic Styling […]

  42. Interesting idea and I think I would find some of these very useful when doing accessibility testing.

    Just to turn the idea on it’s head for a moment: how about making any items which fail the various tests just disappear from the page. This wouldn’t help with fixing the problems but could be good to show a developer “this is what is left after all the invalid/incomplete stuff is removed”, could be a useful wake-up call to some/many.

  43. Zeldman has been doing that for missing background colors, like on Yahoo!.

  44. This is wicked, thanks!

  45. […] Meyer предложил использовать опредленные CSS правила для выявления […]

  46. […] Meyer представил ряд правил CSS, применяя которые можно визуально отслеживать ошибки […]

  47. Looks great. Let me know (or get the word out generally) when a good diagnostic sheet is pulled together using Eric’s beginnings and all the great suggestions that have been made.

  48. […] Meyer presents a set of CSS rules to apply during development which call attention to markup problems. It makes debugging your code […]

  49. […] Oct 25th, 2007 by deepakd Saw an interesting technique for styling. Find link below. http://meyerweb.com/eric/thoughts/2007/09/07/diagnostic-styling/ […]

  50. […] CSS Diagnostic Styling Eric Meyer presents a diagnostic CSS-file; its primary goal is to have a set of rules that can be applied during the development phase of a new layout. These rules” aim is to visually highlight problems in the markup. […]

  51. デバッグ用CSS「Diagnostic Styling」とそのサンプルコード…

    CSSを使って開発中のHTMLのデバッグを行ってしまうという考え方の紹介とそのサンプルコードをメモしておきます。 デバッグ用CSSとは何か。 まず、サンプルのコードを示してみます。 img[…

  52. […] de estilos que muestre evidentemente un marcado HTML deficiente o anticuado no es de nada nueva. Ya Eric Meyer hizo referencia a esfuerzos para desarrollar estilos que diagnosticaran etiquetas o atributos mal utilizados o […]

  53. […] an additional debugging CSS-code in case you run in problems. Consider using Eric Meyer’s Diagnostic Styling as a debugging stylesheet to test your CSS-code and fix […]

  54. […] to take care of diagnostic styling in case you run in some problems. Consider using Eric Meyer”s Diagnostic Styling as a debugging stylesheet to test your CSS-code and fix […]

  55. […] take care of diagnostic styling in case you run in some problems. Consider using Eric Meyer’s Diagnostic Styling as a debugging stylesheet to test your CSS-code and fix […]

  56. […] to take care of diagnostic styling in case you run in some problems. Consider using Eric Meyer”s Diagnostic Styling as a debugging stylesheet to test your CSS-code and fix […]

  57. […] Diagnostic Styling […]

  58. […] to take care of diagnostic styling in case you run in some problems. Consider using Eric Meyer”s Diagnostic Styling as a debugging stylesheet to test your CSS-code and fix […]

  59. Hi Eric,

    I’ve been using your CSS Diagnostic to test various websites for a while now, and am using my own more or less tweaked version, just some minor things for my tastes.

    Anyway, I’d turned it into a Javascript bookmarklet some time ago and thought maybe you’d be interested in using it. Just create a new bookmark and enter the script below for the location. Obviously, you’ll want to advise your users to change the URL, unless you’re gonna host a CSS Diagnostic style sheet for us all to use. ;)

    Also, make sure it’s all on one line; I think that makes a difference for bookmarklets.

    Hope it’s useful.
    Bill Brown
    TheHolierGrail.com

    javascript:(function(){cssdebug=document.createElement(‘LINK’);cssdebug.rel="stylesheet";cssdebug.type="text/css";cssdebug.href="http://meyerweb.com/eric/tools/css/diagnostics/diagnostic.css";document.getElementsByTagName(‘HEAD’)[0].appendChild(cssdebug);})();

  60. […] The idea borrows upon the spirit of “Diagnostic Styling” evangelized by Eric Meyer (1) (2) by using a few extra […]

  61. […] the mind of CSS deity Eric Meyer comes diagnostic styling. The concept is simple. Create stylesheet that points out, in glaring lime and fuchsia, mistakes in […]

  62. […] to take care of diagnostic styling in case you run in some problems. Consider using Eric Meyer”s Diagnostic Styling as a debugging stylesheet to test your CSS-code and fix […]

  63. […] to take care of diagnostic styling in case you run in some problems. Consider using Eric Meyer”s Diagnostic Styling as a debugging stylesheet to test your CSS-code and fix […]

  64. […] had previously read Eric’s article about Diagnostic Styling, but I guess I didn’t really think too much about using it. This could definitely be useful […]

  65. […] that post I mentioned Marco Battilana”s Big Red Angry Text and Eric Meyer”s Diagnostic Styling. Both articles contain examples of stylesheets that will highlight problematic […]

  66. […] is a diagnosis tool created by Eric Meyers. Click here to see the […]

  67. […] isn’t a plug-in or browser add-on. Using Diagnostic CSS Styling helps point out, for the most part, incomplete tagging. CSS allows you to style based on attribute […]

  68. […] correct backend developers to write valid markup, you can also use diagnostic styling. Diagnositc styling is a CSS file which contains selectors which highlight basic markup faults. […]

  69. […] Eric’s Archived Thoughts: Diagnostic Styling […]

Leave a Comment

Management reserves the right to edit or remove any comment, especially when abusive or irrelevant to the topic at hand. HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <em> <i> <q cite=""> <s> <strong> <pre class=""> <kbd>


Comment Preview

If you're satisfied with what you've written, then go ahead...