What Is CSS 3?

CSS 3 is the next version of the CSS (Cascading Style Sheet) specification, and a current working draft by the Wirld Wide Web Consortium (W3C). The draft attempts to monularize the specification to allow easier updating in the future. Here's the abstract of the current draft (retrieved December 10th 2007):

"The members of the CSS&FP Working Group have decided to modularize the CSS specification. This modularization will help to clarify the relationships between the different parts of the specification, and reduce the size of the complete document. It will also allow us to build specific tests on a per module basis and will help implementors in deciding which portions of CSS to support. Furthermore, the modular nature of the specification will make it possible for individual modules to be updated as needed, thus allowing for a more flexible and timely evolution of the specification as a whole."

Major Updates in CSS 3

In addition to modularization, there are several other major additions or changes in CSS 3. Here are the ones that should be most interesting to web designers.

• Multi-Column Layout
• New Selectors
• Improved Color Control

Multi-Column Layouts in CSS 3

The multi column layout module in CSS 3 adds functionality to flow the content of an element into multiple columns. This will be important in designing CSS layouts, because the space on wide screen resolutions can be more effectively used without forcing long lines of text.

Firefox has partial support of the functions of CSS 3 multi column layout: It supports -moz-column count, -moz-column width and a few other CSS attributes. They work like column-width and column-count in the CSS 3 draft module do.

CSS 3 Selectors

In addition to the selectors found in CSS 2, many additional selectors are added. The most useful of the many new CSS 3 selectors are the attribute selectors [a^=v], [a$=v] and [a*=v], and the nth-child selector.

With the attribute selectors, targeting only some elements is easy without the need of adding classes. Targeting all images from a certain location, all links with a certain relationship, etc. is very simple. The newest browser versions support these selectors, though some incompletely.

The nth-child selector allows highlighting of every other row in a table, of every other paragraph in a long piece of text, or many other meat tricks. The selector is supported partially by the current version of Firefox.

Color Improvements in CSS 3

The most widely supported and the most interesting addition to color handling in CSS 3 is alpha support. This functions both through opacity, and the new RGBA color values. Opacity works in all major browsers except Internet Explorer. RGBA colors are currently only supported by Safari 3 and Firefox 3 beta.