Detecting for CSS3 Support Using Modernizr

modernizer_featured

One of the things you have to deal with when using any emerging technology such as CSS3 is the lack of support in older browsers. There are many strategies, workarounds and hacks you can use to either force support or provide fallback content for non-supporting devices or browsers. In this tutorial I am going to talk about detecting for CSS3 support. Often one of the best strategies for dealing with CSS3 support is to provide one set of styles enhanced with CSS3 for modern browsers and another set for older or non-supporting devices. Well there certainly is more than one way to do this, and in this tutorial I am going to focus on a JavaScript library called Modernizr designed exactly for that purpose.

The way it works is pretty simple, you just simply add class attribute to the <html> tag, link to the JavaScript file and it’s ready to go. When you write your styles you can write one CSS3 rich selector using the class tag and another CSS3 free, an alternate selector without the class tag.

So, the first thing you want to do is download the Modernizr library. Now to get Modernizr to work you need to attach a class attribute to the <html> tag as follows:

<html xmlns="http://www.w3.org/1999/xhtml" class="no-js">

The next thing you need to do is write a <script> tag linking to your Modernizr JavaScript library. That is all that is required in order to get Modernizr to work. Modernizr will now work on our page, all we have to do is modify our styles to provide CSS3 content for our supporting browsers and an alternate style for those that don’t.

Now the way that Modernizr works is that it’s going to add a class tag for all the CSS3 features that it finds that the browser supports. So, your <html> element will look something like this upon pageload:

<html class="rgba hsla borderimage borderradius boxshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface">

[box type=”info”]Note: The code snippet above is purely for illustration and you don’t need to include it in your page for Modernizr to work.[/box]

Make sure you refer to Modernizr documentations for full list of class names.

Now I will show you a simple example on how to check for hsla support and provide an alternative style if hsla is not supported.

/*Browser will display this style if hsla is supported*/
.hsla #box1{
width: 500px;
height: 200px;
background: hsla(30, 40%, 40%, 0.5);
}

/*Browser will display this style if hsla is not supported*/
#box1{
width: 500px;
height: 200px;
background: #c6b29d;
}

So now with this great and easy to use JavaScript library we had been able to detect for CSS3 support and provide fallback content in case of lack of support.

If you have any questions or would like me to discuss a certain topic please send me a message or simply just leave a comment below!

Detecting for CSS3 Support Using Modernizr
3 votes, 5.00 avg. rating (95% score)
  • Posted in: CSS3
Husamaldin Tayeh

Posted by

Husamaldin is a computer programmer, blogger, entrepreneur and an overall thinker. He is the founder and editor of Coders Mount. He loves everything about computers and programming. Find out more about him here or follow him on Twitter Google+ | LinkedIn.