CSS demos

Some demonstrations of recent features of CSS or features under development.

Note that they are either still in working draft stage or became Candidate Recommendation very recently, so don't expect them to work in many browsers yet.

Demos of opacity and RGBA

CSS3 introduces two different ways to create transparent elements: an 'opacity' property and transparent colors. They have different effects:

Demo of 'inline-block'

In CSS2, an element was either 'inline' or 'block' (or table or some other special types), but CSS 2.1 provides a hybrid of the two: an element that can be put in the middle of a line, like a word, but that can contain multiple lines of text. Useful for (big) buttons, for example, or for the following example:

Alternative style sheets

This is not a new feature (it has existed since CSS1), but recently browsers have started doing interesting things with it. One document can have multiple style sheets. This very simple example shows how that feature can be used to create two views of the same document, in this case a view that shows the "diffs" relative to a previous version (marked up with <ins> and <del>) and another that only shows the new version.

Media-dependent styles

The recent Candidate Recommendation for "Media Queries" extends another feature that CSS has had since level 1: media-dependent styles. (HTML4 and XML have the same.) The new features allow finer distinctions, but there are no publicly available implementations yet, so this demo only shows the old media queries:

Styling the targeted element

One of the new selectors of CSS3 is a pseudo-class ':target', that matches the element that is targeted by the fragment ID of the URL (i.e., the part after the "#"). This allows to highlight the element, or indeed to hide non-targeted elements, as the second example below shows.

Bert Bos
Created 14 May 2003