meyerweb.com

Skip to: site navigation/presentation
Skip to: Thoughts From Eric

Diagnostic Styling

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!

71 Responses»

    • #1
    • Comment
    • Fri 7 Sep 2007
    • 1145
    David Carrington wrote in to say...

    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
    • Comment
    • Fri 7 Sep 2007
    • 1155
    Philip wrote in to say...

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

    • #3
    • Comment
    • Fri 7 Sep 2007
    • 1157
    Paul Armstrong wrote in to say...

    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
    • Comment
    • Fri 7 Sep 2007
    • 1241
    Brad Bice wrote in to say...

    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
    • Comment
    • Fri 7 Sep 2007
    • 1245
    Charlie Park wrote in to say...

    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
    • Comment
    • Fri 7 Sep 2007
    • 1506
    Chriztian Steinmeier wrote in to say...

    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
    • Fri 7 Sep 2007
    • 1533
    Received from lycka.de

    CSS Tricks: Fehlende Attribute mittels CSS darstellen…

    • #8
    • Comment
    • Fri 7 Sep 2007
    • 1535
    Nathan Vack wrote in to say...

    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
    • Comment
    • Fri 7 Sep 2007
    • 1620
    Eric Meyer wrote in to say...

    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
    • Comment
    • Fri 7 Sep 2007
    • 1915
    Eric TF Bat wrote in to say...

    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
    • Comment
    • Fri 7 Sep 2007
    • 2037
    Strange Pants wrote in to say...

    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
    • Comment
    • Fri 7 Sep 2007
    • 2131
    thacker wrote in to say...

    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
    • Comment
    • Fri 7 Sep 2007
    • 2241
    Jeff wrote in to say...

    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
    • Comment
    • Sat 8 Sep 2007
    • 0850
    Eric TF Bat wrote in to say...

    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
    • Comment
    • Sat 8 Sep 2007
    • 1030
    thacker wrote in to say...

    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
    • Comment
    • Sat 8 Sep 2007
    • 1038
    Jason wrote in to say...

    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
    • Sat 8 Sep 2007
    • 1148
    Received from » 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
    • Comment
    • Sun 9 Sep 2007
    • 0627
    Siegfried wrote in to say...

    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
    • Sun 9 Sep 2007
    • 1019
    Received from 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
    • Comment
    • Mon 10 Sep 2007
    • 0006
    David Mead wrote in to say...

    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
    • Comment
    • Mon 10 Sep 2007
    • 0319
    Paul van Steenoven wrote in to say...

    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
    • Mon 10 Sep 2007
    • 1608
    Received from 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
    • Tue 11 Sep 2007
    • 1332
    Received from 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
    • Comment
    • Wed 12 Sep 2007
    • 0338
    Mats Lindblad wrote in to say...

    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
    • Sat 15 Sep 2007
    • 1449
    Received from און אוף » Blog Archive » עיצוב אבחוני - שימוש ב-CSS לצורך אבחון תקינות בקוד

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

    • #26
    • Comment
    • Mon 17 Sep 2007
    • 1909
    Chris Coyier wrote in to say...

    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
    • Comment
    • Mon 24 Sep 2007
    • 1625
    David Baron wrote in to say...

    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
    • Thu 4 Oct 2007
    • 0110
    Received from 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
    • Tue 9 Oct 2007
    • 1405
    Received from 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
    • Tue 9 Oct 2007
    • 1458
    Received from 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
    • Tue 9 Oct 2007
    • 1708
    Received from 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
    • Comment
    • Wed 10 Oct 2007
    • 1339
    Daniel wrote in to say...

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

    • #33
    • Pingback
    • Thu 11 Oct 2007
    • 0241
    Received from 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
    • Fri 12 Oct 2007
    • 1309
    Received from 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
    • Fri 12 Oct 2007
    • 1344
    Received from 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
    • Comment
    • Sat 13 Oct 2007
    • 1226
    mel hogan wrote in to say...

    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
    • Sat 13 Oct 2007
    • 1720
    Received from links for 2007-10-13 « Marc Ashwell

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

    • #38
    • Pingback
    • Sun 14 Oct 2007
    • 0543
    Received from » 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
    • Sun 14 Oct 2007
    • 1134
    Received from 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
    • Sun 14 Oct 2007
    • 1333
    • #41
    • Comment
    • Mon 15 Oct 2007
    • 0429
    3kolone wrote in to say...

    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
    • Mon 15 Oct 2007
    • 1032
    • #43
    • Comment
    • Tue 16 Oct 2007
    • 1007
    Richard Morton wrote in to say...

    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
    • Comment
    • Tue 16 Oct 2007
    • 1747
    halans wrote in to say...

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

    • #45
    • Comment
    • Wed 17 Oct 2007
    • 1549
    Harry Roberts wrote in to say...

    This is wicked, thanks!

    • #46
    • Pingback
    • Thu 18 Oct 2007
    • 0844
    Received from Life Style » » CSS для диагностики

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

    • #47
    • Pingback
    • Tue 23 Oct 2007
    • 0447
    Received from Информационный блог VideoShot.ru » Архив блога » Diagnostic Styling

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

    • #48
    • Comment
    • Tue 23 Oct 2007
    • 1244
    Christian wrote in to say...

    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
    • Wed 24 Oct 2007
    • 0550
    Received from 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
    • Thu 25 Oct 2007
    • 0408
    Received from 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
    • Fri 16 Nov 2007
    • 1150
    Received from 行搏客 » 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
    • Sat 19 Jan 2008
    • 0708
    Received from TRANS [hatena]

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

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

    • #53
    • Pingback
    • Fri 25 Apr 2008
    • 1350
    Received from 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
    • Fri 2 May 2008
    • 1040
    Received from 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
    • Fri 2 May 2008
    • 2302
    Received from 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
    • Thu 8 May 2008
    • 2140
    Received from 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
    • Tue 20 May 2008
    • 1246
    Received from 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
    • Sun 25 May 2008
    • 0920
    Received from » CSS Collection 2008 CSS Concept: CSS can be just that easy..

    […] Diagnostic Styling […]

    • #59
    • Pingback
    • Fri 13 Jun 2008
    • 0446
    Received from 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
    • Comment
    • Tue 1 Jul 2008
    • 1803
    Bill Brown wrote in to say...

    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
    • Wed 27 Aug 2008
    • 0250
    Received from 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
    • Wed 10 Sep 2008
    • 1135
    Received from 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
    • Fri 26 Sep 2008
    • 1716
    Received from 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
    • Tue 30 Sep 2008
    • 2219
    Received from 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
    • Wed 5 Nov 2008
    • 2240
    Received from 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
    • Fri 6 Feb 2009
    • 0258
    Received from 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
    • Thu 12 Feb 2009
    • 1241
    Received from About the Design | WPESP - WordPress Themes

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

    • #68
    • Pingback
    • Tue 17 Mar 2009
    • 0914
    Received from 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
    • Tue 17 Mar 2009
    • 1455
    Received from 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
    • Comment
    • Wed 12 Aug 2009
    • 0501
    Jens Meiert wrote in to say...

    Manual trackback: QA Style Sheet—Diagnostic styling reloaded.

    • #71
    • Pingback
    • Thu 10 Sep 2009
    • 1538
    Received from Ennuyer.net » Blog Archive » Rails Reading - Sept 10, 2009

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

Leave a Comment

Line and paragraph breaks automatic, e-mail address required but never displayed, HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>



Remember to encode character entities if you're posting markup examples! Management reserves the right to edit or remove any comment—especially those that are abusive, irrelevant to the topic at hand, or made by anonymous posters—although honestly, most edits are a matter of fixing mangled markup. Thus the note about encoding your entities. If you're satisfied with what you've written, then go ahead...


September 2007
SMTWTFS
August October
 1
2345678
9101112131415
16171819202122
23242526272829
30  

Sidestep

Feeds

Extras