Beyond CSS 2.1

Cascading Style Sheets (CSS) is a language that can be used to describe the presentation of a document written in a markup language like HTML. It is designed to enable the separation of a page's structure and content from it's presentation.

CSS 1 was published as a W3C Recommendation in 1996 and included support for font properties, colors of text and backgrounds, background images, margin, border, and padding. The CSS 2 Recommendation was released in 1998 and added a series of new capabilities like absolute, relative and fixed positioning of elements, z-index and media types.

To consolidate the language, CSS 2.1 was introduced in 2005 to remove features that were poorly supported cross-browser, fix errors and add already-implemented browser extensions to the specification. Today most of CSS 2.1 is supported by the latest Web browsers [1][2] [3], while the specification itself is still a Candidate Recommendation.

CSS 3 and vendor specific CSS extensions

CSS 3 is in development since 1999 and has slowly grown into an enormous specification split up into 43 modules, all with a different status (from not started yet to Candidate Recommendation). This modularized approach makes it different from the previous specifications, quoting Eric Meyer:

"It really means there is no such thing as CSS 3 the way there was a CSS 2. There's no great big monolithic specification called CSS 3. There's just a bunch of parallel efforts, some of which move more quickly than others."

It is not surprising that when we look at the adoption of CSS 3 by the latest Web browsers we can see that it's feature support is highly fragmented [1][2][3]. When you implement the better supported CSS 3 properties into your Web pages, you will immediately notice that you have to use multiple style declarations to make things work. For example, to implement a border radius of 10 pixels, you will need a mix of vendor-specific and CSS properties:

.rounded-corners {
    -webkit-border-radius: 10px;  
    -moz-border-radius: 10px;  
    -khtml-border-radius: 10px;  
    border-radius: 10px;  
}

According to the CSS 2.1 specification browser makers should use these vendor-specific extensions when they include features that are not (yet) part of the CSS specification. Because this leaves some room for interpretation, the Internet Explorer team defined the following rules for themselves to determine whether or not a property should use a vendor specific prefix:

  • The property is vendor specific and is not defined in a CSS specification/module.
  • The property is part of a CSS specification/module that hasn't received Candidate Recommendation status from the W3C.
  • The property is a partial implementation of a property that is defined in a CSS specification/module.

The most important prefixes are:

The disadvantages of these extensions are that you have to create multiple style rules to only define one property and - because nothing is written in stone yet - they may be subject to change. So if you use them today you might have to revisit your style sheets in a couple of years time. Because of this the CSS 2.1 Recommendation advises Web authors not to use vendor-specific properties at all, which in other words means that we should not use a new CSS 3 feature until its corresponding module is finalized and the feature itself is supported cross-browser. I know, it's like reading a disclaimer on a package of cigarettes.

Conclusion

For Web developers it is a bitter pill to swallow that CSS 3 is currently merely a playground for browser and specification makers, especially there it defines tons of cool new features that we would like to get our hands dirty with. The specification is definately not on the road to nowhere, however it does drive the slow lane, because it clearly lacks a scope and a coordinated effort.

So how can we Web developers be saved? Two years ago Andy Budd asked himself the same question and wondered if we wouldn't be better off to take all the CSS 3 properties, values and selectors currently supported by the latest browsers and create a simpler interim specification that we can start using soon and name it CSS 2.2.

Dreaming on

To give a good indication what is possible with CSS 3 in some browsers today, please browse through the following resources (please note that some examples have specific browser requirements):

To stay up-to-date about the latest CSS 3 news:

Comments

None