Modernizr is really easy to use. Here is an example of use... Let's say we have a web page with a neutral grey background. We want black links to not quite fade into the background when one hovers over them. The effect will happen slowly so that the viewer will realize that something cool is happening instead of thinking that the link just disappeared. Alright, this is a good use case for CSS3 transitions! But what if one has an older browser that doesn't support transitions? Well, then it will look like the link is just vanishing and that isn't what we want. It seems we need to conditionally use the hover color that is near the background color. In older browsers that don't support transitions we will instead make links bright white upon hovering over them. The older browsers will just use a different style sheet called oldschool.css:
a:hover {
text-decoration: none;
color: #FFFFFF;
}
The browsers that can hang with transitions (see: http://www.w3schools.com/css3/css3_transitions.asp) will use newschool.css:
a {
transition-property: color;
transition-duration: 0.25s;
transition-timing-function: linear;
transition-delay: 0.25s;
/* Firefox 4 */
-moz-transition-property:color;
-moz-transition-duration:0.25s;
-moz-transition-timing-function:linear;
-moz-transition-delay:0.25s;
/* Safari and Chrome */
-webkit-transition-property:color;
-webkit-transition-duration:0.25s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:0.25s;
/* Opera */
-o-transition-property:color;
-o-transition-duration:0.25s;
-o-transition-timing-function:linear;
-o-transition-delay:0.25s;
}
a:hover {
text-decoration: none;
color: #888888;
}
I saw Alex Sexton, who is one of the brains behind Modernizr, speak at the Austin .NET User Group on "Polyepmodnopinizr 5 And You" twenty days ago and in his slides he showed off how Modernizr sniffs for feature compliance and then conditionally gives CSS or JavaScript content conditionally based on the presence of compliance or the lack thereof in a Yep/Nope manner. An example at http://www.modernizr.com/docs/ is:
test : Modernizr.fontface && Modernizr.canvas && Modernizr.cssgradients,
nope : ['presentational-polyfill.js', 'presentational.css']
Alright, I wrote a web page that uses this approach and shows one of the two stylesheets above based on a comparable pass or fail decision:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Modernizr Test</title>
<style type="text/css">
a:link {
text-decoration: none;
color: #000000;
}
a:visited {
text-decoration: none;
color: #000000;
}
a:active {
text-decoration: none;
color: #000000;
}
body
{
background-color: #999999;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 30px;
}
</style>
<script type="text/javascript" src="modernizr.custom.85622.js"></script>
<script type="text/javascript">
Modernizr.load([
{
test : Modernizr.csstransitions,
yep : ['newschool.css'],
nope : ['oldschool.css']
}]);
</script>
</head>
<body>
<a href="#" />go to myself</a>
</body>
</html>
Please note that I have some styles outside of the two stylesheets at the top of this blog in the name of not seeing a FOUC and that I have to reference modernizr.custom.85622.js to make the magic happen. In skimming http://www.modernizr.com/docs/ I quickly figured out how to write the Yep/Nope logic. It isn't too tough. This mostly concludes my example of Modernizr, but you may be wondering where modernizr.custom.85622.js came from. It came from http://www.modernizr.com/download/ where one may check a series of checkboxes (to select desired functionality) and then ultimately press a submit button to make a Modernizr JavaScript library. I've seen this sort of thing before at http://cufon.shoqolate.com/generate/ where one may checkboxes to pick just how much stuff is included in a library-to-be. This approach makes sense. There is no reason to have a .js file at your site that is fatter than it needs to be.
Hey Tom,
ReplyDeleteThanks for the example!
You're welcome Mitch!
ReplyDelete