Diagnostic Styling

Published 16 years, 7 months past

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!

Comments (72)

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

    lycka.de

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

    » Sauberes Markup dank CSS — cne _LOG Archiv

    […] 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. Trackback ::

    iLab

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

    Webmaster Libre | Una hoja de estilo para diagnosticar fallos en el marcado

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

  23. Pingback ::

    CSS Diagnose für Zuhause » CSS

    […] 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. Pingback ::

    און אוף » Blog Archive » עיצוב אבחוני - שימוש ב-CSS לצורך אבחון תקינות בקוד

    […] בעיצוב אבחוני תוכלו לצפות בדוגמאות נוספות. 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. Pingback ::

    Information Squid » Blog Archive » AEAChicago2007 - “The State of CSS in an IE7 World” by Eric Meyer

    […] 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. Pingback ::

    Nachlese September 2007 - Die Seiten des Monats | Nachlese

    […] 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. Pingback ::

    Best of September 2007 | Best of the Month

    […] 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. Pingback ::

    Twan van Elk » Blog Archive » CSS to the rescue

    […] 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. Pingback ::

    Funky Penguin News » Blog Archive » Best of September 2007

    […] 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. Pingback ::

    Eric’s Archived Thoughts: Diagnostic Styling - Matt Heerema : Web Design

    […] 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. Pingback ::

    CSS para diagnóstico de marcação incorreta — RafaelMarin.net

    […] 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. Pingback ::

    links for 2007-10-13 « Marc Ashwell

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

  38. Pingback ::

    » Noch mehr sauberer Code dank CSS — cne _LOG Archiv

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

  39. Pingback ::

    ReFactor.it - Evidenziare gli elementi deprecati con i CSS

    […] 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. Pingback ::

    Ess - Sibran Lens » Blog Archive » Diagnostic Styling

    […] http://meyerweb.com/eric/thoughts/2007/09/07/diagnostic-styling/ […]

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

  42. Pingback ::

    Max Design - standards based web design, development and training » Some links for light reading (16/10/07)

    […] Diagnostic Styling […]

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

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

  45. This is wicked, thanks!

  46. Pingback ::

    Life Style » » CSS для диагностики

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

  47. Pingback ::

    Информационный блог VideoShot.ru » Архив блога » Diagnostic Styling

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

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

  49. Pingback ::

    CSS - Diagnostic Styling | Web 2.0 Resources

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

  50. Pingback ::

    Diagnostic Styling « Deepak Devadasan Blog

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

  51. Pingback ::

    行搏客 » 2007年9月最佳

    […] 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. […]

  52. Trackback ::

    TRANS [hatena]

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

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

  53. Pingback ::

    CSSLab » Rayos-X contra no-estándares

    […] 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 […]

  54. Pingback ::

    Improving Code Readability With CSS Styleguides | CSS | Smashing Magazine

    […] 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 […]

  55. Pingback ::

    Journal - Featda69 » Blog Archive » Improving Code Readability With CSS Styleguides

    […] 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 […]

  56. Pingback ::

    deshock.com » Improving Code Readability With CSS Styleguides

    […] 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. Pingback ::

    provoke.pl » Blog Archive » Improving Code Readability With CSS Styleguides

    […] 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 […]

  58. Pingback ::

    » CSS Collection 2008 CSS Concept: CSS can be just that easy..

    […] Diagnostic Styling […]

  59. Pingback ::

    YY学CSS » 翻译：Improving Code Readability With CSS Styleguides

    […] 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 […]

  60. 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);})();

  61. Pingback ::

    Pixel Precision with Diagnostic CSS | Aloe Studios Blog

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

  62. Pingback ::

    Beaconfire Wire » Blog Archive » Diagnose content entry errors…with css?

    […] 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 […]

  63. Pingback ::

    Yasar Gokcek - Improving Code Readability With CSS Styleguides

    […] 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. Pingback ::

    Improving Code Readability With CSS Styleguides « Where LOVE begins

    […] 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 […]

  65. Pingback ::

    An Event Apart Chicago | Trevor Davis

    […] 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 […]

  66. Pingback ::

    Use CSS Diagnostics with Stylish to find bad HTML - FrontView

    […] 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 […]

  67. Pingback ::

    About the Design | WPESP - WordPress Themes

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

  68. Pingback ::

    Coding faster and easier within your browser: CSS, HTML, Javascript :: DesignWell :: Interactive media tutorials and tips

    […] 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 […]

  69. Pingback ::

    Building Cascadin Stylesheets for the Enterprise | Chris van Leeuwen

    […] 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. […]

  70. Manual trackback: QA Style Sheet—Diagnostic styling reloaded.

  71. Pingback ::

    Ennuyer.net » Blog Archive » Rails Reading - Sept 10, 2009

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

  72. I found this article six months ago and have now incorporated the CSS into my daily development as a visual check of my work. I know it was originally posted years ago but I would like to know how to incorporate ARIA tags in to the CSS for checking ?

Add Your Thoughts

Meyerweb dot com 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>

if you’re satisfied with it.

Comment Preview