What’s New in CSS3

April 3, 2010 | by Asea Ginsburg | Posted in CMS, Web Design, Web Development

This is the third generation of the recommendation from the W3C in regards to CSS. Unlike CSS 2.1, which is still unfinished, CSS3 has been broken up into different unique modules. What this means is that CSS for layout will go into one specific module, and all text properties will go into another module and so on. You are probably wondering what’s the benefit? The benefit is that from browser and implementation perspective, browser developers can now implement CSS3 module by module, instead of implementing entire CSS specification. This helps speed up the entire implementation process.

From a development point of view, CSS3 will allow to:

• Programmatically style HTML elements
• Ability to create reflections
• Ability to define level of opacity
• Method of applying round corners to block elements and images
• Method of using images as borders
• Method of displaying shadow or blur effect
• Method of using multiple background images on a single block element
• Method of using any web font as long as license allows it
• Method of splitting content into columns
• Method of transforming an element: ex. rotate, resize, skew
• Method of animating certain properties of an element: ex. fade in/fade out
• Ability to support non-Latin text
• And many other even more exciting features which are not only great from design perceptive, but most importantly from semantically correct markup stand point.

Of course all these things are possible now, but a lot of them require either a third-party plug-in or additional software to create, such as image editing software. In terms of layout, there really is no robust option to display things horizontally or vertically. CSS3 makes a big step towards not only defining a standard, but offering some exciting possibilities in terms of layout.

As far as current implementation goes, it is happening fast. Even IE9 claims to have significant CSS3 support. You are probably asking yourself – but can I use CSS3 now? My answer is that it all depends. If you are a CSS coder, then it is beneficial to start learning and playing with it today. However always remember that CSS3 is not supported well across browsers yet and even properties that are supported in certain browsers are not supported in the same manner or at all in other browsers. This means that depending on the way CSS3 has been implemented, the site might look slightly or significantly different in various browsers, and in some it might even look broken, depending on layout and design. So it is extremely important to know the target audience of your site and all the possibilities and limitations of CSS2, CSS3, and limitations of the modern browsers.

Treat supported CSS3 features as visual rewards rather than necessary requirements or broken elements. When it doubt, ask yourself “Does it hinder functionality, usability, accessibility?” And if it does not, then I say go ahead and use it. But if it does, then it definitely needs to be implemented using a standard approach that works today.

For example, if a visual element is integral to your brand, include it as an image; do not rely on CSS3 yet. But if it is not, then do not worry about whether it is 100% supported in all browsers. The bottom line is that a website is nothing without its content and its usable and accessible functionality. If these things are missing, then it really does not matter what technology or CSS level is being used. Also keep in mind that the fact that somebody else is using CSS3 now does not mean you have to use it. It all depends on the target market and your website’s audience.

Browsers with limited CSS3 support:

• Firefox
• Chrome
• Safari
• Opera

Internet Explorer 8, 7, and 6 do not support CSS3.

At this point you might be wondering why even bother with CSS3 if it is not supported in Internet Explorer 8 or 7.The answer is simple.

Why Start Using CSS3 Now

If you control more elements with CSS rather than images, you save speed and bandwidth on the site, especially larger ones, where there are a lot of different types of content that require unique styling or when it is vital to be able to change the look and feel of certain elements quickly for an event, tradeshow, or any other reason.