CSS3: The future of web styling!

posted by Paul - 15:15 05/04/11

CSS3 is the latest version of Cascading Style Sheets, used by web designers and developers to style their websites. Having followed its development over the past few months, more and more internet browsers are offering improved support for its new features, making it much easier to turn designs into fully functioning web pages.

Here are just some of the new features available to web designers with CSS3.

Border-Radius

Border Radius gives objects rounded corners and provides several benefits.

Usually, to create an object we would give it a background image with rounded corners. If the object is required to expand, we would use two images; a tall version with the top corners on (which expands to the size of the objects content) and a smaller one with the bottom corners that slot underneath.

Consequently, using CSS3 has the following perks for developers:

• Since there is no need for images, the file size and page load time is considerably reduced.
• Since there is no need for a top and bottom image in order to expand the object, there is far less code and the mark-up is much cleaner.
• If the design changes, it is much quicker and easier to change the CSS than edit the image.
• With border-radius, you’ll get rounded corners in Firefox, Chrome and Safari, but square corners in IE 6-8.
• With box-shadow, weaker browsers simply won’t have the drop shadow.
• Gradients will just appear as solid colours.

Box-Shadow

As the name suggests, the Box Shadow attribute gives an object a drop shadow (or an outer glow). Like border radius, this replaces the need to use a background image and has the same file size saving benefits, which is becoming increasingly more important with the rise in mobile browsing.

Opacity

The ability to alter opacity of an object is something that previously could only be done by using JavaScript or using a translucent png. This can now be done with a single line of CSS which saves time.

@font-face

@font-face has actually been around since CSS2, but is only recently becoming widely supported. It allows a page to display a font even if the end user doesn’t have it on their machine by hosting the font online and linking to it.

This is a massive improvement for designers as it frees us from the usual small selection of Web Safe fonts, such as Times New Roman, Verdana and Arial. Previously, if a site was designed with a non-web safe font, it would need to be saved as an image and set to replace the text with CSS. As well as being incredibly time consuming it means the content could not be selected like a standard type (although it is present in the mark-up). There are conditions though as the designer must have a license to upload the font.

Cross Browser Support

According to research by www.findmebyip.com/litmus, Safari is currently the front runner for CSS3 support, with Google Chrome not far behind. Firefox and Opera also supply support for a wide range of the new CSS3 features.

Currently lagging far behind its rivals is Internet Explorer. Whilst the recently released IE9 has been much improved on its predecessors, none of the other more widely used versions (6, 7 and 8) of Internet Explorer can support any CSS3 features except @font-face. No browser is perfect for supporting CSS3, but IE is way off the pace.

Despite being the weakest of the common browsers, Internet Explorer in all its forms still counts for 26% of all browser usage, making it the second most popular browser behind Firefox (mainly due to it being the default browser on Windows machines). In fact, 4% of users are still using the archaic IE6; more than Opera! (Source: www.w3schools.com/browsers/browsers_stats.asp).

So, what’s the point of using CSS3 if a quarter of your available audience won’t see it?

Better browser, better experience
It’s important to remember that using CSS3 won’t break a site if viewed in a browser that doesn’t support that particular feature; users will simply see the site with a more basic appearance. For example:

As long as the site still functions correctly, small aesthetic differences won’t matter in the long run. A strong design won’t be reliant on an object having a drop shadow and for the most part, the average user will be more interested in the content of the site and how easy it is to find it, rather than whether the box it is in has rounded corners.

Summary

Using CSS3 saves time, memory usage and creates cleaner code. The main downside at present is the major lack of support by Internet Explorer (although no browser has 100% compatibility).

The question is, should developers continue to spend so much time pandering to the weaknesses of inferior browsers or accept that certain browsers will simply display sites better than others?

Obviously, a site should look good in all browsers.  However, a stripped back site should not be considered a “bad” version of a site. If designed well, CSS3 can make sites displayed in weaker browsers look good, but in stronger browsers look amazing.