CSS3 – what to do about the less compliant browsers

CSS3 is hitting the internet by storm – many sites are popping up making heavy use of text-shadow and border-radius (and this site is by no means an exception). But we can’t afford to forget those browsers that don’t understand this new fangled-code – after all, there are still many users out there that haven’t yet upgraded to Firefox 3.5, Safari 4 or Google Chrome.

First of all, let’s have a look at a couple of CSS3 techniques that are in use on this site.

Box Shadow

The CSS3 box-shadow (or -moz-box-shadow for Mozilla-based browsers and -webkit-box-shadow for Webkit-based browsers) property produces, as the name would suggest, a hazy drop shadow around the element in question. The full syntax is as follows:

box-shadow: 2px 2px 5px #c9c9c0

The first attribute is the horizontal offset of the shadow, the second is the vertical offset of the shadow, the third is the softness (0 will cause a hard-edged shadow) of the shadow, and the final attribute is the colour of the shadow.

The code above is that used on this website, and you see the shadow it produces around the codebox above. But don’t forget, that when dealing with the current browser market, you will have to include the above rule three times – one valid CSS3, one for Mozilla and one for Webkit, like below:

-moz-box-shadow: 2px 2px 5px #c9c9c0;
-webkit-box-shadow: 2px 2px 5px #c9c9c0;
box-shadow: 2px 2px 5px #c9c9c0;

Border Radius

Another popular attribute that’s also used on this site is the border-radius property (or -moz-border-radius and -webkit-border-radius). This does exactly what it says on the tin – adds a rounded corners to an element. The following is the code used on this site.

border-radius: 0.5em;
-moz-border-radius: 0.5em;
-webkit-border-radius: 0.5em;

The one (and only) attribute for the property is the radius of the border – here, specified in ems so that it will increase if the text is increased. You can see the effect of the above code on the codebox above.

RGBa

This technique is not employed on this site, but I have used it on others. This is not a property by itself, but is instead used as the value of any other property that takes a colour attribute. It has the ability to give the element a colour, but also an opacity (‘RGB’ for the colour, ‘a’ for alpha transparency). The syntax is as follows:

color: rgba( 255, 255, 255, 0.5 )

The first three properties in the rgba brackets are the Red, Green and Blue values of the colour, respectively, from 0 (for none of that colour) to 255 (for all of that colour). The final one represents the transparency – 0.5, for example, is 50% transparent.

But the other browsers?

Now these are all very well, but what about the other browsers? Well, first you must remember this: websites do not have to look the same in all browsers. Therefore, it’s acceptable to have some styles when the site is viewed in Safari 4 that simply do not show when the site is viewed in Internet Explorer – as long as the functionality is still there.

So what can you do? Just make sure that if you use these properties, your site does not rely heavily on them – if you use the border-radius, ensure that the site looks acceptable with square corners. If you use the box-shadow, make sure that if the shadow doesn’t show, everything still looks ok. It might not look as good, mind, but it must still look ok.

The RGBa is the only one listed here where a further property must be defined for other browsers – ensure that you define a standard colour (in hex code, for example) on a line before the line that defines the RGa colour. The less compliant browsers will pick up on this and ignore the ones they don’t understand.

So don’t let the fact that CSS3 is not full supported wide-spread put you off from using it’s advanced features. Give them a go!

Click here to cancel reply.

Ben Cardy