CSS has been an integral part of the presentation and layout of websites for many years. Designers and developers use it to control how the page renders, and can even control how certain elements are positioned and styled in certain browsers.
What is CSS3?
CSS3 is an extension to CSS2.1 adding new specifications to the style sheet language. However rather than using 1 large spec sheet like CSS2 they have been divided into separate documents called modules.
The main reason behind this decision from W3C is so that rather than waiting for the whole specification to be completed certain modules can be finished first and rolled out to browsers for designers and developers to use in their existing websites. This provides a clear advantage as it also means we can learn the new techniques as the specification is being written.
You can see a list of the current modules and progress here www.w3.org/Style/CSS/current-work. A lot of work is still being done and some modules are still in the early phases of development.
Most of the features found in CSS2.1 have been included in CSS3 however there are several new additions which will prove to be crucial when designing websites in the future.
We touched on media queries in the responsive web design article written last month. These allow different styles to be served up depending upon the device or display. Parameters such as width and screen resolution can be used to control where elements are positioned.
Some great examples of media queries can be found at Web Designer Wall:
3D Cube Example
CSS3 Generator Example
CSS3 introduces the new @font-face property which allows custom fonts to be used.
The Fella (http://thefella.com/) includes this for all his main titles using Goudy Bookletter opentype font:
Transitions & Animations
Transitions are simple animations that enable you to change property of an element over a period of time. For example changing the colour of a box from white to black.
Sliding Vinyl Example
CSS3 Polaroids Example
Currently with CSS2 it is necessary to use several divs and CSS positioning to achieve the effect of multiple columns on a page. With CSS3 it possible to specify the number of columns, gaps between the columns and rules between each column.
Multi Column Generator Example
All these new features sound great and it means we can just start using them straight away in our designs right? Unfortunately it’s not that simple. Most of the modern browsers do have some support for the majority of the new modules planned in CSS3 however as always older browsers such IE7 and IE8 don’t support CSS3.
As demonstrated by the pie chart below over the last 6 months IE8 still holds the largest share in the browser market.
While this may seem like a major issue due to the lack of support of IE8 it’s important to note that as long as your website degrades gracefully and the main functionality is not broken on older browsers there should be no reason why designers and developers shouldn’t start using CSS3 in their work.
Supported Properties by browser
Findmebyip.com has a fantastic grid list of supported properties against browsers which will be crucial when determining what you can and can’t implement per browser:
In Conclusion: Should you be using CSS3 in your designs?
Provided you take into account legacy browsers and you don’t ruin the user experience by over doing it with the new CSS3 modules. Absolutely!