CSS 3 Modules

Additional New Features, Modules, Attributes, and Values

CSS 3's modularized specification, allows browser support for modules incrementally without having to perform major refactoring of their codebases. The modularization concept not only makes the process of approving individual CSS 3 modules easier and faster, but it also makes documenting the spec easier.

Some New CSS 3 Features Include:

Borders

1. Border-color
2. Border-image
3. Border-radius
4. Box-shadow

Backgrounds

1. Background-origin and
       background-clip
2. Background-size
3. Multiple backgrounds

Color

1. HSL colors
2. HSLA colors
3. Transformed from RGB to RGBA
        colors with “A” standing for opacity.
4. Opacity
5. Gradient

Text-Effects

1. Text-shadow
2. Text-overflow
3. Word-wrap

User Interface

1. Box-sizing
2. Resize
3. Outline
4. nav-top, nav-right, nav-bottom, nav-left

Selectors

CSS 3 introduces some new selectors. Using these selectors you can choose DOM elements based on their attributes. So you don't need to specify classes and IDs for every element. Instead, you can utilize the attribute field to style them. The most useful attributes for selectors are:

[attr^=val] — matches a DOM element with the attribute attr and a value starting with val
[attr$=val] — matches a DOM element with the attribute attr and a value ending with the suffix val
[attr*=val] — matches a DOM element with the attribute attr and a value containing the substring val

Top

Basic Box Model

Overflow-x, overflow-y

Generated Content:  More detailed information can be found at w3c.org.
Media Queries:  More detailed information can be found at w3c.org.
Multi-Column Layouts:  More detailed information can be found at w3c.org.

• Eliminates unnecessary divs and floats.
• Browser specific properties are needed at this time.
• Speech – More detailed information can be found at w3c.org.
• More information on how all of these effects work can be found at
      css3.info/preview.

Using CSS 3 Transitions

CSS 3 enables simple animations and stylistic changes based on user interactivity, all within style rules, without the use of Javascript. Click here for a Demo.
At the time of this writing, Transitions is the least supported of the new CSS 3 modules. The new specification is recent and is still undergoing significant changes.
Support in varying degrees exists in most modern browsers with Safari and Chrome taking the lead.

Current Browser Support

• Firefox 4.0
• Safari 4+
• Opera 10.5+
• Chrome 4+

Top