HTML & CSS Direct Study

The new features in the upcoming CSS3

CSS2 has been around for over 11 years and has allowed web page developers to add consistency, creative ideas, and change how viewers interact with the internet forever. However, it does seem odd that as technology rapidly changes that the current CSS we are using is 11 years old. CSS3 has been around, but it is not frequently used. The limited usage may be a result of the browser capabilities or the fact the designers just don't know much about it.


Browser Capabilities -- before we talk about what CSS3 can do its important to understand how browsers understand CSS3.

• Vendor-specific extensions: Browsers have only partially activated some CSS3 elements. This is a result of the uncertainty that WC3 will recommend all CSS3 functions. As a result of users having to use extensions, style sheets can become large, disorganized, and time consuming as a result of how each browser reacts differently.

Five main types of extensions browsers (the first 2 are the most commonly used):

1. -moz- : Gecko-based browsers such as Firefox
2. -webkit- : Used with Safari
3. -khtml- :Konqueror
4. -o- : Opara
5. -ms-: Internet Explorer

When looking at the element that CSS3 can provide designers we break them into 13 different categories. Each category does not necessarily work with all browsers.

1. Selectors
2. RGBA and Opacity
3. Multi-Column Layout
4. Multiple Backgrounds
5. Word Wrap
6. Text Shadow
7. @font-face-Attribute
8. Border Radius
9. Border Image
10. Box Shadow
11. Box Sizing
12. Media Queries
13. Speech

Smashing Magazine -- Article