I recently built a new website for MAC Eyewear, a local supplier of designer spectacle frames. I decided that the time had come to embrace some of the newer facilities available in CSS3. In the past I haven’t used them much because too many people can’t see them in their browsers.
Now I figure that a good proportion of people are using Firefox 3.6 or later, Chrome, Opera, Safari or Internet Explorer 9 (actually not too many of them yet but it is growing). As long as what I did still looked ok in the older browsers I thought I would try out enhancements to make the site look a bit prettier.
So I styled the supplier images with rounded corners and drop shadows;
img.supplier {
float: left;
margin: 1em;
vertical-align: top;
border: 4px solid #888;
border-radius: 5px;
-moz-border-radius: 5px;
box-shadow: 4px 4px 4px #888;
-moz-box-shadow: 4px 4px 4px #888;
/* filter: progid:DXImageTransform.Microsoft.DropShadow(offx=4, offy=4, color=#888888); */
}Browser Support
The rounded corners are supplied by the border-radius directives and the drop shadows by the box-shadow directives.
I have also used the -moz versions of these directives to keep Firefox 3.6 happy (quite a few people haven’t yet moved to FF4), Firefox 4, Opera, Chrome and IE9 are happy with the standard directives. Safari uses the border-radius but doesn’t yet support box-shadow, it probably supports the -webkit version but I think it will catch up with Chrome pretty soon so I didn’t bother adding another line of code which would soon be redundant.
Now older browsers like IE6, IE7 & IE8 don’t support the CSS3 rounded corners or drop shadows but IE has supported drop shadows by a proprietary directive for a long time, so I added a filter directive to give the drop shadows. All sorted!
But IE9 supports CSS3 AND filters
Oops! When I tested this in IE9 I discovered a problem, IE9 being a modern browser provides pretty good support for the CSS3 directives, but it is still Internet Explorer and also supports the filter directive.
The results weren’t very pretty, nice rounded corners and drop shadow with an ugly square drop shadow behind it. This is why the last directive in the CSS above is commented out.
I needed a separate stylesheet to give the extra instructions to the older versions of Internet Explorer but not to IE9. So where I called the main stylesheet in my HTML page I added an extra bit of code.
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 9]>
<link href="stylesIE.css" rel="stylesheet" type="text/css" />
<![endif]-->A small extra stylesheet which just applies the filter directive will be included but only for Internet Explorer versions less than 9, any other browser won’t include the extra stylesheet;
/*
* This stylesheet contains only those styles which we need to make IE versions less than 9 work properly
* IE9 is close enough to a modern browser that it can use the main stylesheet
*/
img.supplier {
filter: progid:DXImageTransform.Microsoft.DropShadow(offx=4, offy=4, color=#888888);
}
I think the results are pretty good. People with older browsers see a nice site with the added drop shadows if they are using Internet Explorer. People with modern browsers see an even nicer site with proper CSS3 rounded corners and drop shadows. None of it is ugly but people with modern browsers get the benefit.