This is a legacy document, and retained on the site in order to avoid link rot. The content is likely no longer (a) accurate, (b) representative of the views and philosophies of current site management, or (c) up to date.

CSS: Striving for Perfection

Nobody's Perfect

Browser implementors? Imperfect. Authors? Imperfect. Reconciliation of imperfections? Maybe… The browsers often used for rendering CSS pages vary widely in their support of both the CSS1 and CSS2 recommendations. (1) Fortunately, there is a handy reference grid (2) for determining what properties are supported in CSS1. Unfortunately, there is not yet a complete reference for support of CSS2.

Now that you've memorized that handy grid, what if you really want to declare rules on properties that are noted as 'unsupported', or 'buggy'? Our own Bugs and Workarounds document may help some. An additional source of help is the Stylesheets newsgroup which includes regular posters who have already experienced the worst implementation releases (IE3), and the best (Opera 3.6), and can usually tell you whether to give up hope entirely, or suggest minor revisions which will allow the best possible rendering for all browsing situations.

But, you splutter, that sounds like bad news. Where is the good news? Read on…

HTML Validation

Whilst it isn't exactly 'Good News', making sure that your HTML validates is a good first step in assuring maximum potential for rendering of your CSS suggestions. There are three syntax validators worth mentioning and available on-line, and at least one that can be used locally in a Win environment, that I would recommend:

There are other tools for checking (or linting) your HTML markup; sometimes these tools advertise themselves as 'validators', or include 'validation' or 'validator' in their name.

That's unfortunate, as well as untrue. A tool which advises you that an unclosed <P> may cause problems in the Yadda Yadda browser is not a validator; validators don't give advice -- they report errors.

A validator uses the specific "Document Type Declaration" which you add in your HTML markup to find and include a "Document Type Definition" into your document before it starts to check the syntax of your markup against that definition. Any discrepancies between your HTML markup and what is stated as correct syntax in the external DTD will be reported as an error, nothing more, nothing less.

CSS Linting

The logical step after validating your HTML is to check that your CSS rules are valid. The way to accomplish that is to use one of the online CSS Lints.

  1. CSSCheck by Liam Quinn; checks whether your CSS rules are 'legal' from the standpoint of CSS specifications.
  2. The W3C CSS "Validator" issues errors and warnings based on the legality of your rules with the CSS recommendations.

These tools are not validators, but their use is important to ensure that your CSS is correct, and can therefore be correctly interpreted by CSS aware browsers. They differ in several ways. (3)

As Good as it Gets

Validated HTML, with error-free CSS suggestions is as good as it gets. As long as there are non-CSS browsers being used, and as long as there are buggy CSS browsers being used, you are not likely to get pixel perfect control over the rendering of documents you have authored. Even if all deployed UAs were perfect, total author control is not an option. As long as users can disable CSS support, or author their own style rules to override those you have made … the user has the final say in how pages are rendered. Accept that, and your CSS experience will be less frustrating, and more satisfying. Craft the best CSS you can, and be content.

Related Links

Other HTML checkup tools

Miscellaneous

Footnotes

(1)CSS 1 Recommendation .

(1) CSS 2 Recommendation .

(2) Master Grid .

(2) Differences explained.

-

Unknown