Zoe Mickley Gillenwater [Zoe Mickley Gillenwater] - Stunning CSS3: A Project-Based Guide to the Latest in CSS

Before you start using CSS3, you should have a grasp of the what, why, and how behind it. In this chapter, youll learn how CSS3 is different from CSS 2.1 and get an overview on where browser support currently stands. For those browsers that dont support CSS3 as fully as we would like, well go over a number of ways to provide workarounds and CSS3 emulation. Youll also learn about all the practical benefits that can come from using CSS3 right away in your projects, including a number of reasons (lets not call them arguments) you can use to convince skeptical clients or bosses. Finally, well go over how CSS3 fits into a progressive enhancement design methodology and best practices for using CSS3 to make it as robust and future-proof as possible.

CSS3 is an extension of CSS 2.1 that adds powerful new functionality, but its no longer a single specification. Instead, its 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 doesnt have to be held up waiting for one little bit to get worked outthe module that that little bit is in can wait, while the rest moves forward.

You can see a list of all the modules, plus their current status on the path towards being finalized, at www.w3.org/Style/CSS/current-work. Well discuss the status of these modules later in this chapter, but for now lets get right into whats new and exciting in CSS3.

Much of CSS3 is a repeat of CSS 2.1, of course. But there are many additions and revisions. What follows isnt an exhaustive list of differencesthere are far too many changes to list herebut 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. Well go over many of these effects in , and use them again in later chapters.

Box transformations. Another category of visual effects that CSS3 makes possible are those that manipulate the boxs 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. Youll learn about transforms in .

.

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. Youll learn about some of them in .

Transitions and animations. CSS3 transitions, covered in a module of the same name, are a simple type of animation that allow you to ease the change from one style on an element to another, such as gradually and smoothly changing the color of a button when you hover over it. Full-fledged CSS3 animations, again covered in a module of the same name, can make more complicated style changes and movements possible without needing Flash or JavaScript. Both are covered in .

Media queries. The Media Queries module introduces syntax for feeding styles based on the capabilities of the users 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. Youll learn about them in .

Multiple-column layouts. CSS3 introduces a few new modules that make multi-column layouts easier to create. The Multi-column Layout module deals with flowing the text of a single block into multiple columns, similar to newspaper layout; well cover this in .

). 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.

Figure 1.1. All of the current CSS3 modules and their statuses

www.w3.org

The levels the W3C uses are, from least mature to most mature:

1. 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.
2. Last Call. A working draft with a deadline for final comments. It indicates the working group thinks the module does what it shouldthough it usually receives significant changes after this pointand is probably planning to advance it to the next level.
3. 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.