If your a web designer or developer it’s very difficult to escape the hype surrounding CSS3, yet it has created a divide in the development community. The crux of the divide is that developers feel they still cannot use CSS3 in their work. Consistency of brand and design is always a must for clients and their customers. With the demise of IE6 it seems an appropriate time to move to the new standards and encourage and embrace the future standards.
Cascading Style Sheets (CSS) is used to control the style and layout of Web pages. CSS3 is the latest standard for CSS and contains a number of new selectors. The CSS3 standards are completely backwards compatible, so you do not have to change existing designs as browsers will always support CSS2.
The CSS3 standards have been split up into “modules”. The old specification has been split into smaller pieces, and the new ones have been added. Some of the most important CSS3 modules are:
- Box Model
- Backgrounds and Borders
- Text Effects
- 2D/3D Transformations
- Multiple Column Layout
- User Interface
- CSS3 Recommendation
The CSS3 specification is still under development by W3C at the time of writing the W3C working group notes were last updated on the 12th May 2011 . However, many of the new CSS3 properties have been implemented in modern browsers.
Vendor Specific Prefixes
The parts of the CSS3 standards that are currently supported by browsers is done so using vendor prefixes. The original reason for these prefixes were meant for developers to use as a means for testing browser implementations.
Vendor prefixes that are in use today are :
- -moz- : Firefox
- -webkit- : Webkit browsers such as Safari and Chrome
- -o- : Opera
- -ms- : Internet Explorer
When coding CSS3 with vendor prefixes it is good practice, where possible, to place a non prefixed version after any vendor prefixed version to ensure future standards compatibility of your website CSS markup.
Now for some actual CSS3 examples
The border-radius property is a shorthand property for setting the four border-*-radius properties. This property allows you to add rounded borders to elements!
The border-radius property allows you to add rounded corners to elements.
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
-o-border-radius: 10px 10px 10px 10px;
border-radius: 10px 10px 10px 10px;
The border-radius property is supported in IE9+, Firefox 4+, Chrome, Safari 5+, and Opera.
If you want to see border-radius in IE use CSS3pie.com – PIE makes Internet Explorer 6-9 capable of rendering several of the most useful CSS3 decoration features).
The box-shadow property attaches one or more drop-shadows to the box. Box shadow is very similar to text-shadow but applies to the whole element rather than just the text within it.
The box-shadow property allows you to add a drop shadow to elements.
box-shadow: 5px 5px 5px #999;
The box-shadow property is supported in IE9+, Firefox 4, Chrome, Opera, and Safari 5.1.1.