Diagnostic Css

From CSS Discuss

Jump to: navigation, search


Using CSS as a Diagnostic Tool

Our List Chaperone, Eric Meyer , wrote an article with the above title for O'Reilly in 2000. The technique enables developers to use their own special style sheet to help them design and debug their pages by exposing aspects of the page structure. Here's the article:-


The two follow-up "CSS Anarchist" articles are also well worth reading.

Summary of technique

For those not familiar with User Stylesheets , here's a recap: A Web page is rendered according to a style sheet (sometimes several) written by the page author. It's also possible for the user to create a style sheet and to declare it to the browser (see browser support, below). Where CSS rules conflict, it's possible to declare that the user's rule should prevail over the author's. Therefore, the user style sheet can contain rules which expose aspects of the structure and design of any page viewed, for the purpose of testing and diagnosis of both HTML and CSS. You can diagnose any page of any site, not just your own. A diagnostic style sheet can become as indispensible a part of a developer's toolkit as the W3C HTML and CSS validators. To start you off, an example is given below.

Browser support

Browser support for User Stylesheets is variable.

Opera: see Opera User Stylesheets. Opera is very good for our present purpose, firstly because its CSS2 support level is high; secondly because you can easily toggle the diagnostic style sheet(s) on and off, making debugging very easy; and thirdly because it allows several user style sheets to be used at the same time.

A diagnostic style sheet (such as the example below) can therefore be modularised. You could have one style sheet to show borders around divs and tables; another to show class and id names; and another to highlight deprecated elements and atributes. The first two examples could be used together to expose the wireframe for a page (it helps if you de-emphasise the content by using opacity on all images and greying-out all text).

Thus, rather than cramming all possible diagnostics on to the screen, you can display the page with only the diagnostics you need for your current purpose. See Opera User Stylesheets.

Gecko-based (including Firefox): see Mozilla User Stylesheets. Firefox is good for our present application in that its CSS2 support level is high. However, you have to define a separate Profile for diagnostic purposes. It's much easier if you install the Chris Pederick Web Developer extension: firstly, it has several of its own diagnostics built in; secondly, it enables you easily to switch in your own diagnostic stylesheet. There is also an add-on called Stylish which improves Firefox's user stylesheet support.

IE: see User Stylesheets . There are two big drawbacks for diagnostic use. Firstly, IE (up to IE7 at least) has no support for some of the CSS2 features which are particularly useful for diagnostic purposes (and which are used in the example diagnostic style sheet referred to below). Secondly, toggling the style sheet on and off is cumbersome.

Example diagnostic style sheet

An example diagnostic style sheet is posted here by Jim Wilkinson (who originated the present page):-


A few brief explanations and comments follow. I've crammed in as many diagnostics as I can into a single style sheet because it's possible to define only one user style sheet at a time in browsers other than Opera. I've tried to minimize re-flow by using colours rather than padding and by keeping generated text small and short. I've indicated use of divs, classes and ids as well as use of tables. Outlines might be better than borders at minimizing re-flow but are not fully supported.

Several of the diagnostics are intuitive enough to use the file as-is but please examine the code where you will find extra notes and explanations.

All of the diagnostics are shown by Opera and most by Firefox. IE (7 and earlier) does not show most of the diagnostics. However, the very useful table-exposing diagnostics do work in IE.

Although the file I've published is generally generic, it includes a few personal preferences and you're welcome to adapt the file to reflect your own. Feedback and improvements are very welcome where they will assist listers generally, especially in the area of robustness across Web sites.

Grateful acknowledgments are due to Eric Meyer and to some unknown Opera developers.

Related: Dom Inspector

Personal tools