CSS3 Good Times

CSS3 Good Times

CSS3 is here! Well, kind of. Although the new specification is not yet finished, there have been some impressive improvements.

The third generation of CSS standards from the W3C, CSS3 has already delivered its promise of making common layout effects easier to implement. However, its one major problem lies in its browser support.

Web developers and designers will be excited at this evolution of CSS as they can produce rounded corners, embed non web-based fonts, and create transformations and animations without losing touch of code semantics and having to rely on JavaScript.

The list of things that CSS3 can do is open-ended. In March, there were two new rules added, with the promise of more coming. CSS3 could be the ultimate package when completed.

Of course, the browser issues are still ongoing, Microsoft’s Internet Explorer is resistant to change and Opera just seem to be a bit behind, but it is their users that are missing out. Another benefit of CSS3 is that the code doesn’t need to be adapted for these browsers; if done right, users just won’t be able to see the gradients or the drop shadows, but the site itself won’t look like there is anything out of place.

Ben MacGowan, Creative Jar’s Front End Web Developer, commented; “CSS3 will change the way developers work, we can develop designs quicker and easier. I am looking forward to utilising these new features and creating a slicker user experience.” Ben has a few of his own CSS3 favourites, here are his top three:

Rounded Corners

Previously, to get rounded corners, a developer would need four separate images of the corners, bloated html and large amounts of CSS. With CSS3 there are two lines of html and one line of CSS, plus no images.

Font Embedding (Font-face)

Long overdue, CSS3 has finally freed developers from the shackles of web-safe fonts. Of course, developers will still need to make sure that the font license allows embedding. But, when they do, it is so easy to embed; just upload the font file to your server, then embed it using little amounts of code. Simple!

Drop Shadows

Applicable to both text and box elements, there is less imagery required and sites can emphasise whatever they choose. All you need to add a drop shadow to a container, for example:

.container { box-shadow: 1px 1px 5px #000 }

Although there is more CSS3 support on its way, Ben believes that “we shouldn’t wait for the extra support, use what has already been developed and start seeing the benefits of easier implementation”.

As Andy Clark, author and speaker of Designing with CSS, said; “Build from the skies down, not the ground up”. Internet Explorer and Opera will improve and adapt in the future, but don’t wait for that day, developers should start expressing themselves now!