Ten years in the past, solely probably the most cutting-edge internet designers used CSS for layouts and styling. Browser assist for CSS layouts was slim and buggy, so these folks advocated for internet requirements adherence, whereas creating hacks that made CSS layouts work in all browsers. One hack that turned broadly used was browser sniffing: Detecting which browser and model the person had by trying on the navigator.userAgent property in JavaScript. Browser sniffing allowed for fast and straightforward code forking, permitting builders to focus on totally different browsers with totally different directions.
Article Continues Under
As we speak, CSS-based layouts are commonplace and each browser has fairly stable assist for them. However now we now have CSS3 and HTML5, and the scenario is repeating itself—totally different browsers display various ranges of assist for these new applied sciences. We’ve smartened up, nonetheless, and now not make use of CSS hacks nor use browser sniffing—an unreliable, poor apply. We’ve additionally satisfied an increasing number of shoppers that web sites don’t have to look precisely the identical in each browser. So how will we take care of this new however acquainted downside? Easy: We use function detection, which implies that we don’t ask the browser “who’re you?” and make unreliable assumptions from there on. As a substitute we ask the browser, “are you able to do this and that?” It’s a easy strategy to take a look at browser capabilities, however doing all these exams manually on a regular basis will get tiresome. To unravel that downside (and others), you need to use Modernizr.
Modernizr: the feature-detection library for HTML5 and CSS3#section2
Modernizr is an open-source JavaScript library that makes it straightforward for internet designers to assist totally different ranges of experiences, based mostly on the capabilities of the customer’s browser. This permits designers to take full benefit of every part in HTML5 and CSS3 that’s applied in some browsers, with out sacrificing management over the person expertise in different browsers.
Once you embed the Modernizr script in your web page, it detects whether or not the present browser helps CSS3 options like @font-face, border-radius, border-image, box-shadow, rgba() and so forth, in addition to HTML5 options like audio, video, localStorage, and the brand new <enter> factor varieties and attributes. With this information, you’ll be able to reap the benefits of these native implementations in browsers that assist these options, and determine whether or not to create a JavaScript-based fallback or just gracefully degrade the web page in browsers that don’t assist them. Moreover, Modernizr makes the brand new HTML5 components out there for styling in Web Explorer, so as to begin utilizing their improved semantics straight away.
Modernizr was created based mostly on the precept of progressive enhancement, so it helps—encourages, even—constructing your web site layer by layer, beginning with a JavaScript-free basis and including layers of enhancement one after the other. That is straightforward with Modernizr, because you’ll know what the browser is able to. Let’s take a look at a sensible instance of how one can use Modernizr to construct cutting-edge web sites.
Getting Began with Modernizr#section3
Begin by downloading the newest secure launch at www.modernizr.com, the place you may as well see the total checklist of options it detects. After you have the newest model, 1.5 on the time of this writing, embody it in your web page’s <head> part:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My Stunning Pattern Web page</title>
<script src="https://alistapart.com/article/taking-advantage-of-html5-and-css3-with-modernizr/modernizr-1.5.min.js"></script>
</head>
…Subsequent, add the category “no-js” to the <html> factor:
<html class=“no-js”>
When Modernizr runs, it can substitute that class with the category “js” which lets you know, in your CSS, whether or not or not JavaScript is enabled. However Modernizr doesn’t cease there: It is going to add courses for each function it detects, prefixing them with “no-” if the browser doesn’t assist it. So, your <html> factor will look one thing like this upon pageload (offering JavaScript is enabled):
<html class=“js canvas canvastext no-geolocation rgba hsla multiplebgs borderimage borderradius boxshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions video audio localstorage sessionstorage webworkers applicationcache fontface”>
Modernizr additionally creates a JavaScript object, merely referred to as Modernizr, which has a listing of properties that include boolean values for every function. Modernizr.canvas might be true if the browser helps the brand new canvas factor, and false if the browser doesn’t assist it. The JavaScript object additionally comprises extra detailed details about sure options, for instance: Modernizr.video.h264 will let you know if the browser helps that individual codec. Modernizr.inputtypes.search will let you know if the brand new search enter kind is supported, and so forth.
Our uncooked pattern web page is trying a little bit bare-bones, but it surely’s extremely semantic and accessible. Let’s give it some primary styling; some formatting, coloration, and format to make it a little bit extra visually pleasing. To this point, this course of is nothing new: we’re including easy CSS to a semantically structured HTML web page, and the outcome—whereas primary—could be very simple.
Subsequent, let’s improve the web page and make it extra fascinating. I wish to use a flowery (open license) font for the h1 header, break up the checklist of options into two columns, and transfer the part about Modernizr with a photograph to the precise of every part. I’m additionally going to alter the border across the web page and make it nicer. Now, CSS is fairly nice as a result of you’ll be able to simply add new properties to a rule, and if the browser doesn’t acknowledge (learn: assist) them, it merely ignores them. Mix that with the cascading nature of CSS, and you need to use issues like border-radius with out having to depend on Modernizr. Nevertheless, utilizing Modernizr does provide one thing you’ll be able to’t obtain with out it: The flexibility to alter properties that the browser does assist, solely on the situation that it helps another property. I’ll illustrate this by including two new CSS guidelines to our web page:
.borderradius #content material {
border: 1px stable #141414;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
}
.boxshadow #content material {
border: none;
-webkit-box-shadow: rgba(0,0,0, .5) 3px 3px 6px;
-moz-box-shadow: rgba(0,0,0, .5) 3px 3px 6px;
box-shadow: rgba(0,0,0, .5) 3px 3px 6px;
}The primary rule provides a pleasant 12 pixel rounded nook to our #content material factor. Nevertheless, the unique rule we had for #content material specified a border of “2px outset #666”, which appeared good when the field had sq. corners however with rounded corners, it’s not so good. Due to Modernizr, I can instruct the browser to render solely a stable, one-pixel border if the browser helps border-radius.
The second rule takes this a little bit bit additional by including a drop shadow to the #content material factor, and removes the border altogether if the browser helps the box-shadow property. Why? As a result of most browsers don’t render the border-with-border-radius mixture, and box-shadow very properly. (A flaw in browsers, it ought to be famous, however one thing we now have to stay with for now.) I’d relatively use the drop shadow round our factor than not use a drop shadow and solely use a border. This manner, I can have the most effective of all worlds, or relatively, the most effective of all CSS: browsers that assist the box-shadow property will present us a pleasant drop shadow, browsers that solely assist border-radius will present us good rounded corners with a thinner border, and browsers that assist neither get our authentic two-pixel outset border.
In our subsequent instance we add a particular font for our header. Right here’s our authentic h1 declaration, which we’re not altering however I’m highlighting right here for the instance:
h1 {
coloration: #e33a89;
font: 27px/27px Baskerville, Palatino, "Palatino Linotype",
"E-book Antiqua", Georgia, serif;
margin: 0;
text-shadow: #aaa 5px 5px 5px;
}This declaration labored tremendous for our primary web page, and the font dimension of 27 pixels is okay for all of those fonts, however it’s far too small for our customized font, named Stunning. Let’s add the CSS guidelines to make use of it:
@font-face {
src: url(Stunning-ES.ttf);
font-family: "Stunning";
}
.fontface h1 {
font: 42px/50px Stunning;
text-shadow: none;
}First, we add the @font-face declaration whereby we specify the trail, filename, and font-family title for our customized font. Then we add the font alternative in a CSS rule to our h1 factor, however as you’ll be able to see, I’m giving it a a lot larger font dimension. That’s as a result of the Stunning font renders a lot smaller than all the opposite fonts I specified for the h1 factor, and so we now have to instruct the browser to render our header at a a lot bigger dimension, however solely when it renders our customized font.
Moreover, our lovely script font has some points with textual content shadow rendering, so I’m eradicating the shadow when the browser decides to render the customized font. Additionally, the checklist of options nonetheless must be break up up. To take action, I wish to use the superior CSS columns function, which permits browsers to intelligently separate a listing into columns with out messing up its order—and our checklist, although not visibly numbered, is ordered alphabetically. In fact, not each browser helps CSS columns but, so for these browsers we’ll simply use floats to make the checklist two columns; it’ll now not be alphabetically sorted (visually), but it surely’s higher than nothing:
.csscolumns ol.options {
-moz-column-count: 2;
-webkit-columns: 2;
-o-columns: 2;
columns: 2;
}
.no-csscolumns ol.options {
float: left;
margin: 0 0 20px;
}
.no-csscolumns ol.options li {
float: left;
width: 180px;
}Once more, I’m utilizing Modernizr to use quite common properties solely below sure circumstances—one thing I couldn’t do by way of property overloading or the cascade. If the browser helps CSS columns, our work right here is finished: the checklist appears nice and continues to be alphabetically ordered. If the browser doesn’t assist CSS columns, as decided by the “no-csscolumns” class added to the <html> factor in that state of affairs, we float our checklist objects and apply some margins and widths to get an analogous outcome. It’s not as good, but it surely’s an enchancment over one lengthy, single-column checklist.
As you could have seen, I’m specifying my columns in a different way from the border-radius and box-shadow properties within the examples above. That’s as a result of, for one, Opera solely helps CSS columns by way of the seller prefix presently, and two, Mozilla doesn’t acknowledge the “columns” shorthand property but, therefore the usage of -moz-column-count for that browser.
With these and a few different, comparable modifications, our new web page appears decidedly higher.
Let’s end this tutorial by including much more progressive enhancement to our web page. WebKit-based browsers assist some fairly darn cool issues—CSS transitions, animations, and three-dimensional transforms—and I wish to present a few of that off in our last step. Once more, a few of these properties might merely be added to our present CSS guidelines and get safely ignored by browsers that don’t assist them, however different properties would intrude with the format in all browsers if I added them identical to that, so I’m utilizing Modernizr to regulate very exactly when these enhancements are utilized and when they aren’t.
First we set the stage:
@-webkit-keyframes spin {
0% { -webkit-transform: rotateY(0); }
100% { -webkit-transform: rotateY(360deg); }
}
.csstransforms3d.cssanimations part {
-webkit-perspective: 1000;
}The @keyframes rule is a part of the brand new CSS animations specification, which, at present, solely WebKit helps. It permits you to declare a full animation path, with whichever properties you need, and alter them at whichever steps you’d like. Be aware that you just don’t specify a length on this declaration, solely the important thing frames themselves—you specify issues just like the length, loop rely, and easing curves whenever you apply the animation in a CSS rule. This lets you re-use a specific animation at totally different speeds on totally different components, and thus offers you the best flexibility. For extra data on utilizing animations, see the W3C Working Draft specification.
Subsequent, we apply our animation—which makes a component rotate round in 3D area—to our secondary header:
.csstransforms3d.cssanimations part h2 {
background-image: url(modernizr-logo.png);
overflow: hidden;
-webkit-animation: spin 2s linear infinite;
}As a result of we’re now rotating in 3D area, I’d just like the background picture of the Modernizr brand to look good and anti-aliased, so I’m changing it with a PNG model. I’m additionally including an overflow:hidden property to cover the unique textual content within the header, which we had been offsetting to -9999px. Rotating the factor in 3D made it present up throughout the rotation, which was amusing however didn’t look very good. Lastly, we apply the animation rule, set it to take two seconds, spin it in a linear style, and preserve it going indefinitely.
Our last web page appears nice, and even has some enjoyable animation occurring in WebKit browsers. I hope you now have a great understanding of how rather more management you recover from your web sites with Modernizr, and the way a lot simpler it makes doing really progressive enhancements. That’s not all that Modernizr is nice for, although; it’s additionally invaluable for creating JavaScript-driven fallbacks and utilizing cool new options from HTML5—however that’s a subject we’ll have to debate one other time.