CSS Caveats (new edition)

1. Not all user agents support CSS.
   Special-purpose browsers like speech-based or text-only browsers typically ignore CSS. Indexing robots do that, too, so search engines “see” your page without style sheets. In particular, they process the textual content as in the HTML document, ignoring all of CSS.
2. CSS support varies.
   There is great variation in the coverage of CSS support in browsers, and no all-encom­pass­ing documentation of the support. Although support has generally become better in new versions, especially IE 8, there are still problems lurking around. Moreover, older versions of IE, with many CSS bugs and limitations, are still in widespread use.
3. CSS support can be disabled.
   Users may switch CSS support off because they have special needs (e.g., need very large font size) or because too many sites use CSS to create confusing appearance, or for other reasons. (On IE, there is no simple way way to turn off CSS as a whole, but the acces­si­bil­i­ty settings let the user tell the browser to ignore colors, font size, and font family settings on web pages.)
4. CSS rules can be ignored or overridden.
   Browsers may ignore some (or all) of your CSS rules because specifications allow them to be ignored or because the browser has a user-settable option that overrides the effect of a rule. For example, a browser that normally displays background images may omit them when instructed to do so. Some browsers have a user-settable minimum font size.
5. Browsers have bugs.
   There is a wide range of different bugs in CSS support, most of which manifest them­selves in particular situations only—e.g., for some values (especially exceptional values) for a property, or for specific combinations of values. No exhaustive documentation exists even for a single browser, though you can find many useful lists of known bugs.
6. Quirks Mode means quirks.
   Widely used browsers have “Quirks Mode,” which means that they deliberately simulate many errors and oddities in older browsers. In particular, this means interpreting CSS code against the specification, e.g. wrong box model (widths and heights often calculated by wrong rules).
7. The cascade surprises you.
   The C in CSS stands for cascade, the most misunderstood of all CSS concepts, next to the inheritance concept. It means, in particular, that a browser style sheet or a user style sheet may override your style sheet, with strange effects if any of the style sheets is poorly designed.
8. CSS specs are a moving target.
   Although CSS 2.1 is stable and official (W3C Recommendation), authors want to use CSS3 features, too. CSS3 is just a collection of documents of very varying maturity, mostly just drafts. This means that they may change at any moment. Browser support varies greatly, too.
9. Form fields form into problems
   Browsers, especially older browsers, often use built-in routines for rendering form fields like input boxes and buttons. This means that they are largely immune to CSS. You might also destroy some of the nice default rendering features (such as rounded corners) in new browsers, if you style form fields too eagerly. More info: Affecting the presentation of form fields on Web pages.
10. A style sheet may get lost.
    An external style sheet associated with a document may get lost, e.g. due to server overload (so that an HTML file gets loaded but a CSS file does not) or due to storage issues (e.g., a server that stores old copies of pages might store an HTML file but not an associated CSS file).
11. Styling may get lost in transfer.
    If the user e.g. copies part or all of a web page and pastes it to Word or Excel, mostly just the content is transferred. Some markup may affect the result (e.g., an HTML table becomes a Word table), but style sheets are ignored.

The confusing cascade and inheritance

The cascade concept is generally misunderstood, but there are many good textbooks on CSS that explain it pretty well. The following explanation is intended to give a rough idea.

CSS differs from many other styling approaches in its somewhat simplistic idea of a style sheet as a collection style rules. Although a rule may assign values to several properties (for the elements that match the selector of the rule), this is really just technical grouping. The rule can conceptually be split to rules that each assign a value to just one property. Each of these elementary rules is processed separately in the cascade. I think this is the point that people miss most often when they think about the cascade.

Consider, for example, the following style sheet:

body { background: #fffff0; color: black; }
h1   { background: #ffffcc; }

This is effectively equivalent to the following “separated” style sheet:

body { background: #fffff0; }
body { color: black; }
h1   { background: #ffffcc; }

In the cascade, each of these three rules is processed separately. This means that e.g. the first two rules are overridden by rules for body in another style sheet, whereas the rule that sets background for h1 is applied. In this case, it is evident the h1 element cannot inherit its text color (the color property) from the body element as set in this style sheet. Thus, the style sheet is unsafe; you should always set the color for an element when you set its background, and vice versa.

In fact, even if the three rules are all applied, the h1 element could still get a background that is unsuitable for the text color set here. Inheritance is probably the most misunderstood single concept in CSS. An element does not inherit a property if any style sheet, no matter how low in the cascade, assigns a value to that property for that element. Thus, for example, viewed on a browser with a browser style sheet containing the following style sheet (sensible as such, if the user likes it), a document using our sample style sheet would result in the main heading appearing as black on almost black:

h1   { background: black; color: white; }

Due to the cascade, rules from different style sheets (and different parts of a style sheet) may get combined in many ways. An element’s background or font family may be taken from one style sheet and its color or font size from another. This is often problematic, but when you know and remember it, you will create more robust style sheets than most other authors.

This document is based on the CSS Caveats document by Sue Sims at the CSS Pointers Group site. The following is the last content of that document, as far as I know.

• Usual caveats
  • Not all browsers support CSS.
  • Not all browser versions support CSS to the same extent.
  • Not all users will have enabled CSS in CSS enabled browsers.
  • Some users of NN may have disabled Javascript, thus disabling CSS.
  • Some users may have enabled their own stylesheets, disabling yours.
  • CSS2 and CSS-P are moving targets. Use with care.
  • Font specification is problematic.
• Unusual caveats may apply. ;-)

I found the document most instructive and often referred to it, though by years it somewhat lost its accuracy and adequacy. Now that it is apparently not available at its original site and is not maintained, I decided to honor it by creating a new document along the same lines but with some modernizations and additions.