No Content, Only Style

Original Experiment Date

April 22, 2003

Description

This was my first CSS experiment, and I wrote it shortly after first learning about CSS generated content. It was the starting point for my interest in experimenting with CSS.

The main purpose of CSS is to separate style from content: (X)HTML provides the framework for the content and CSS provides the layout. Every newer version of HTML loses more of its layout properties and CSS is becoming increasingly powerful for advanced layouts. However, CSS also provides the ability to add (limited) content to a page, and in this experiment I went the extra mile and here all content is provided by CSS. In addition I played with CSS counters and the :hover pseudo-class.

The generated content is available in CSS2, but this demo also requires some aspects of CSS3. After writing this testcase I found a good explanation of the various options of CSS generated content.

Test

View No Content, Only Style. The experiment consists of three alternate stylesheets providing three different pages, with different layouts and contents. Make sure to switch to the alternate stylesheets; in Opera go to the View menu and select Style.

Advantages

The advantages of using CSS generated content are numerous, but they are not explored in this demo.

Disadvantages

This extreme use of CSS generated content serves no practical purpose, other than to amuse!

Browser support

Opera 7+