THE CSS3 LOWDOWN
What is CSS3?
CSS3 is an extension of CSS 2.1 that adds powerful new functionality, but it’s no longer a single specification. Instead, it’s been divided up into several modules. Each module is a standalone specification for a subsection of CSS, like selectors, text, or backgrounds. Every module has its own set of authors and its own timetable. The advantage of this is that the entire CSS3 specification doesn’t have to be held up waiting for one little bit to get worked out—the module that that little bit is in can wait, while the rest moves forward.
Overview of What’s New
Much of CSS3 is a repeat of CSS 2.1, of course. But there are many additions and revisions. What follows isn’t an exhaustive list of differences— there are far too many changes to list here—but an overview of the best-supported, popular, and useful changes to CSS from level 2.1 to level 3.
Image-free visual effects: CSS3 contains a lot of new properties that allow you to create visual effects that previously could be accomplished only with images (or sometimes scripting), such as rounded corners, drop shadows, semitransparent backgrounds, gradients, and images for borders. Many of these new properties are in the Backgrounds and Borders module; others are in the Colors and Image Values modules.
Box transformations: Another category of visual effects that CSS3 makes possible are those that manipulate the box’s position and shape in two-or three-dimensional space, such as rotating, scaling, or skewing it. These effects are called transforms, and are covered in the 2D Transforms and 3D Transforms modules.
Unique fonts: The Fonts module introduces the @font-face rule that allows you to link to a font file on your server and use it to display the text on your page, instead of being limited to the fonts on your users’ machines. This makes beautiful typography so much more attainable.
Powerful selectors: CSS3 introduces over a dozen new selectors, mostly pseudo-classes and attribute selectors. They allow you to target specific pieces of your HTML without needing to add IDs or classes, streamlining your code and making it more error-proof. These selectors are included in the Selectors module, naturally.
Media queries: .The Media Queries module introduces syntax for feeding styles based on the capabilities of the user’s display or device, such as the viewport width, screen resolution, and how many colors it can display. Media queries are a great tool for creating mobile-optimized web sites.
Multiple-column layouts: CSS3 introduces a few new modules that make multi-column layouts easier to create. The Multicolumn Layout module deals with flowing the text of a single block into multiple columns, similar to newspaper layout. The Flexible Box Layout module deals with making blocks align horizontally or vertically with each other and making them more flexible to the available space than floats or positioning can be. There are also more experimental layout modules called Template Layout and Grid Positioning.
Where CSS3 Stands
So just how soon is all this cool new CSS3 stuff going to be finalized so we can use it??, we can hear you asking. As we mentioned before, each module is on its own timetable . The table lists the status,usually called a maturity level but sometimes called a stability status by the W3C, of the current version of the module as well as the next version, with links to each document.
All of the current CSS3 modules and their statuses
The levels the W3C uses are, from least mature to most mature:
Working Draft: The first publicly available version of the specification, published for review by the community, in order to solicit further changes. A module or specification can go through several working drafts.
Last Call: A working draft with a deadline for final comments.
It indicates the working group thinks the module does what it should though it usually receives significant changes after this point and is probably planning to advance it to the next level.
Candidate Recommendation: The working group believes the module meets requirements, is stable, and should be implemented by browsers and put into everyday use by web developers, in order to see how implementable it is. Browsers are allowed to drop their vendor prefixes. Changes are still possible after this point, but not many and not major.
Proposed Recommendation: A mature, well-reviewed document that has been sent to the W3C Advisory Committee for final endorsement. There are rarely changes after this point.
Recommendation: Complete and finalized. Normally referred to as a “standard.”
Hopefully it’s clear from this list that we web developers are not only mallowed to use W3C specifications long before they are complete and finalized Recommendations, but that we are expected to. In fact, if you look at the list on the W3C site, shown in Figure above, you may notice that only the SVG module, at the very bottom of the list, is at Recommendation status (at the time of this writing). Even CSS 2.1, which we’ve been using for many, many years, is still a Candidate Recommendation, not even a Proposed Recommendation. Thus, even though it is not a finalized standard, we can use much of CSS3 now.
Use CSS3 Now
A couple of CSS3 modules are at Candidate Recommendation status, indicating they should be used, but it’s also fine to use some pieces that are still in Working Draft status. While you should wait to use properties and techniques that are still undergoing change and have poor browser support, there’s no need to wait to use the better-supported and stable parts of CSS3 in appropriate situations.
Not until new CSS techniques get put to work can we discover the real-world challenges of using them so that the W3C can address these challenges. Using new CSS techniques now in real situations helps the web development community uncover shortcomings, discrepancies, and holes in the specification, and introduces new ideas for how the specification can be improved, extended, or clarified. We can help CSS3 become better by testing it out while we still have a chance to change it, rather than waiting until the specification is finalized and missing our chance.
Using these somewhat cutting-edge techniques also shows the browser vendors which pieces of CSS3 are the most popular and useful to web developers. In effect, it pressures those vendors to support the new pieces of CSS and move forward.
So, using new CSS early is an essential part of the process towards getting that new CSS to be standard CSS. It will never get finalized if it never gets used.
We are not saying that everything that’s listed on the W3C site is fair game to use right now. Not all new properties and techniques are ready to be used now, or to be used on every project. You should use only those pieces of CSS3 that are fairly stable and won’t harm non-supporting browsers by their lack. And you should use them wisely! Don’t add CSS3 just because you can decide if it makes sense for the site’s goals and its users, and add it where appropriate.
Some pieces of CSS3 are not at Candidate Recommendation level yet, but have stable syntax that has not changed for a long time and probably won’t change in the future. Unfortunately, there’s no way to know what these pieces are by looking at the W3C site alone. Instead, you have to rely on other articles and books to fill you in on the history and stability of a particular property or technique. Here, we’ll deal almost entirely with pieces of CSS3 that are stable and practical to use now; in the rare exceptions when we do delve into the more experimental, We’ll always give you a heads-up.