Backwards Compatible CSS3 with Modernizr

In a recent post, I talked about Learning Tree’s new HTML5 class and why you should be using HTML5 right now. I illustrated the post with an example of how you can get older browsers to display HTML5 elements in a reasonable manner, even if they don’t officially support them. The result was a workable page, but not a particularly attractive one. The problem wasn’t HTML5 though – it was CSS3. So this week, I decided that my cocktails site was now sufficiently stable that I could go back and address those CCS3 issues.

The problem is that there are lots of CSS3 features that don’t work in older browsers. Worse, an older browser will often give up on a CSS rule as soon as it hits something it doesn’t understand – even if the rest of the rule is valid.

Here, for example, is what the “Find A Cocktail” panel should look like using CSS3 box-shadow, gradients and rounded corners:

intended look and feel

And here is what it looks like when it hits an older browser if you don’t take any steps to provide backwards-compatibility:

older browser without css3

Not only do we lose the shadow and the rounded corners – the background has completely disappeared.

So – how do we solve this without compromising the look and feel in modern browsers?

The answer lies in a nifty little JavaScript file called modernizr. Modernizr is a library that helps you with all kinds of new functionality – from HTML elements such as article and aside, through to polyfills that provide substitutes for canvas or web storage. One thing it provides is feature detection. You set the body tag to have the class no-js, and modernizr replaces this with a list of class names that detail the browser’s support for individual features.

Here, for example, is a partial list of the classes added to the body tag in my version of internet explorer 8:

“no-backgroundsize no-borderimage no-borderradius no-boxshadow no-textshadow no-opacity no-cssanimations no-csscolumns no-cssgradients no-cssreflections no-csstransforms no-csstransforms3d no-csstransitions”

This list includes the problem items. Here is the css that should generate the background I want:

article, .container {
   margin-bottom :10px;
   padding: 2px 5px 2px 8px;
    background-image: -webkit-gradient(linear, left top, left bottom, from( #fdfdfd), to( #fff ));
    background-image: -webkit-linear-gradient(#fdfdfd , #fff );
    background-image: -moz-linear-gradient(#fdfdfd , #fff );
    background-image: -ms-linear-gradient(#fdfdfd, #fff );
    background-image: -o-linear-gradient(#fdfdfd , #fff );
    background-image: linear-gradient(#fdfdfd , #fff );
    -moz-border-radius:1em ;
    -webkit-border-radius:  1em;
border-radius:1em ;
    -moz-box-shadow: 0px 1px 4px         rgba(0,0,0,.3) ;
    -webkit-box-shadow: 0px 1px 4px         rgba(0,0,0,.3) ;
    box-shadow: 0px 1px 4px             rgba(0,0,0,.3) ;

As you can see – we have lots of features that modernzr identiifies as no-nos. So now, all we have to do is create an alternative look and feel, but place it in the context of one of the missing features via its class name, so it only applies to browsers that don’t support it. Like this:

.no-borderradius article, .container  {
border-right: 1px solid #666666;
border-bottom: 1px solid #666666;
border-left: 1px solid #cccccc;
border-top: 1pxsolid #cccccc;

Now I have a much better fallback for browsers that don’t support the cool new features that I really want:

improved look in older browsers

Happy Holidays everyone,

Kevin Rattan

For other related information, check out these courses from Learning Tree:

HTML5: Next Generation Web Development

jQuery: A Comprehensive Hands-On Introduction

Type to search

Do you mean "" ?

Sorry, no results were found for your query.

Please check your spelling and try your search again.