HTML and CSS Reference
In-Depth Information
ADDING MODERNIZR TO YOUR PAGE
FIGURE 5.23 Modernizr adds
classes to your <html> element
to indicate which features your
browser supports.
To a p p l y Mo d e r n i z r t To yo u r p a g e , yo u fi rs t n e e d t To p e r fo r m t w To s t e p s :
Add a <script> element inside the <head> of your page to include the Mod-
ernizr script, for example:
1.
<script src=”modernizr-2.5.3.js”></script>
2.
Add a class of no-js to your <html> tag:
<html lang=”en-gb” class=”no-js”>
Now when you run your page and then look at the code as it is rendered (for
example, in a debugging tool like Opera Dragonfly), you'll see that Modernizr has
replaced your no-js class with a huge string of classes that look something like
those shown in Figure 5.23 .
This string allows you to specify different styles on a page based on whether
different features are supported, using descendant selectors. If JavaScript isn't
supported or turned off, you'll just be left with the default no-js class, and you
can provide some kind of safe minimal styles that will probably work everywhere
in the absence of more granular support information:
.no-js p {
: ;
}
When JavaScript is supported and Modernizr is able to give you that granular
support information, you can start applying fallback styles based on very specific
support criteria. Let's look at what the card 3D flip example required for wider-
ranging browser support.
 
Search WWH ::




Custom Search