3

CSS3 – The Future of Web Design

Posted by in CSS3, Design, Web Design on April 25, 2011

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.

New Features

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.

Media Queries

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:

Box Transformations

Using CSS3 it is now possible to manipulate the box in 2D or 3D meaning it can be skewed or scaled accordingly. Using transformations it is possible to create simple 3D objects like cubes and manipulate them without the need for flash or javascript.

3D Cube Example

Visual Effects

Simple visual effects such as drop shadows, gradients, image based borders and semi transparent backgrounds could previously only be accomplished using images or javascript. Now with CSS3 all these effects are possible with just a few lines of code.

CSS3 Generator Example

Fonts

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.

Animations are more complex and can use a multitude of properties without resorting to flash or javascript.

Sliding Vinyl Example

CSS3 Polaroids Example

Multi-column layouts

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

Browser Support

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!

As the W3C continues to develop CSS3 it will become mainstream, more websites will start using it and it will give designers and developers a chance to start creating more interactive websites without the need for flash or javascript.