Dastur Dastur - 3 months ago 8
CSS Question

Handling Feature Detection When Javascript Is Turned Off

Feature detection is very important for making sure your website is compatible with all browsers. I think that if we are accounting for older browsers and user agents with fewer features it is very important we also account for those with javascript turned off. Here's my issue (In all the following examples I am using modernizr):

Lets say we have a piece of css to detect when gradients are available:

.cssgradients .div-that-needs-gradient {
background: -webkit-linear-gradient(red, yellow);
background: -o-linear-gradient(red, yellow);
background: -moz-linear-gradient(red, yellow);
background: linear-gradient(red, yellow);
}

.no-cssgradients .div-that-needs-gradient {
background-image: url('http://example.com/gradient-image.png');
}


How this code works is a library like modernizr detects when gradients are available than places either the
cssgradients
or the
no-cssgradients
class on the html element. What happens if javascript is turned off? Now neither of these css rule sets activate. The user is now stuck with a ugly blank background. What would you guys say is the best way to approach this?

Thanks for any help!

Solution



.no-js .div-that-needs-gradient {
background: orange
background: -webkit-linear-gradient(red, yellow);
background: -o-linear-gradient(red, yellow);
background: -moz-linear-gradient(red, yellow);
background: linear-gradient(red, yellow);
}

.cssgradients .div-that-needs-gradient {
background: -webkit-linear-gradient(red, yellow);
background: -o-linear-gradient(red, yellow);
background: -moz-linear-gradient(red, yellow);
background: linear-gradient(red, yellow);
}

.no-cssgradients .div-that-needs-gradient {
background-image: url('http://example.com/gradient-image.png');
}

Answer

For your particular case:

.div-that-needs-gradient {
    background-image: url('http://example.com/gradient-image.png');
    background-image: linear-gradient(red, yellow);
}

Modern browsers that understand both will first apply the url, then override it with the linear-gradient . Older browsers will just apply the url and ignore the linear-gradient. Remember that, in CSS, the last declaration in a rule-set has priority over those that came before.

But, also consider this:

Instead of building a great experience as the default and then hoping it degrades to something that is still usable in less capable browsers, you build a basic experience that works in all browsers, and then layer an enhanced experience on top of that.

From here.

Or, as suggested by Paul Irish, you could target specific browsers instead of features:

<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
<!--[if IE 7 ]>    <html class="ie7"> <![endif]-->
<!--[if IE 8 ]>    <html class="ie8"> <![endif]-->
<!--[if IE 9 ]>    <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html class="no-js"> <!--<![endif]-->

And then, remove the "no-js" from <html> using javascript.