Progressive enhancement using CSS - examples

This document gives minimal-case examples of some of the techniques referred to in the Wiki associated with the CSS Discuss mailing list. The relevant CSS is in the HTML head.

Summary using headings

The Alternate Stylesheet suppresses the body text so that only the headings (h1, h2 ...) are left. You can therefore see an overview of the document structure (of course, a real example would involve a much longer document). This paragraph doesn't appear in the full document but appears here, where it can give a summary of the full text of this section.

If you are using a browser that supports Alternate Stylesheets, select it now (View - Style in Opera; View - Use Style in Moz).

Instant Question and Answer

CSS Quick Quiz

You will need to supply a link to a separate page containing the answers for users of lesser browsers and for accessibility.

For supporting browsers, hover over the question to reveal the answer (no cheating, now!).

  1. A Rule consists of a Selector followed by ...
  2. A Declaration Block is delimited by ...
  3. A Declaration Block contains zero or more ...
  4. A Declaration consists of a Property, followed by a colon, followed by ...
  5. Multiple Declarations for the same Selector are separated by ...

Other Uses

There are other uses for this technique (try hovering on this text).