Merge

CSS3 is the latest and greatest style language on the horizon of the web, and it has designers buzzing about its future potential. Simply put, CSS3 will make the web a more beautifully simple place in the not-to-distant future. But, while those who make the interwebz are excited about and experimenting with the possibilities, what does this mean for the users (namely clients) and why should you care?

CSS3 in a nutshell

CSS (Cascading Style Sheets) is a style language that defines the design of a HTML document, and is one of the most powerful tools of web design. CSS2, the currently supported version, is too large and complex to be updated as a whole, so it is being broken down into modules that can be updated individually, with the addition of new features as well.

Some CSS3 modules are already being implemented into modern browsers, such as Safari, Firefox, Opera, and Chrome (and Internet Explorer 9 on the way), with Safari taking the lead. The downside is that these browsers do not currently support the same things, although they are making headway and improving support in each update.

How does it impact the web?

The main excitement is the ability to use new CSS selectors and properties that will allow the use of new design elements and improve the implementation of those currently being used.

For example, with CSS2, adding a border and drop shadow to an element would mean you’d have to create a graphic to achieve this design. To add a simple animation you would need to use flash or javascript. The modules being added to CSS3 will allow designers to implement these designs in a much simpler fashion within the CSS itself, without the use of plugins.

CSS3 includes the properties and selectors for:

• text and box shadows
• rounded corners
• gradients
• animations and transitions
• wide variety of fonts
• multiple background images
• ... and more!

How it’s being used now

It's hard to say when CSS3 will be fully implemented. As mentioned earlier, there is not yet full browser compatibility of CSS3. However, this doesn’t mean it cannot be used now! CSS3 is currently being used for progressive enhancement: providing added design enhancements for those with modern browsers. For example, those buttons on your homepage navigation can have additional flare by adding a scaling transformation and a gradient.

This does not effect the usability or design of your site, but provides an tasteful and easily implemented enhancement for those who’s browsers support it, without the added time(or cost) of using javascript or flash.

So what does this mean for you, the client?

You can also upgrade your browser or start using a modern browser if you aren’t all ready, and discover the fresh face of the web as it emerges.

Examples of CSS3 in use:

• Rolling DVDs- Those using Safari or Chrome will see animated DVDs roll out of their case, those using FireFox see the disc pop out, and those using a browser that doesn’t support CSS3 will see a beautiful static image
• Rounded Corners and Shadows- The rounded corners and shadows add a subtle enhancement for those in CSS3 support browsers. For those who are not, the difference is hardly noticeable.
• Rotating Polaroids- Rotation for modern browsers and neat image grouping for those not supporting CSS3
• Weather- Snowing website for Safari and Chrome
• Our Solar System- A purely experimental CSS3 solar system showing use of border radius, transformation, and animation. Animation only works in Safari and Chrome. This does not downgrade well to those in non-CSS3 supported browsers, but shows the potential of CSS3 in the future.

Bottom line: The easier implementation of these design elements with CSS3 and sans plugins means less development time and quicker maintenance updates. Be open to CSS3 and realize that your website doesn’t have to look exactly the same in all browsers, and you can get more bang for your buck.

Share