HTML and CSS Reference
In-Depth Information
PROVIDING
ALTERNATIVES
WITH
MODERNIZR
Using the Modernizr feature detection library, let's look at an intelligent way to pro-
vide alternative styling for browsers that don't support cutting-edge CSS3 features.
The tour of CSS Animations, Transitions, and Transforms you've just read
about was deliberately kept simple, because there is lots of information to take in.
But hopefully you've started to form some killer ideas about the cool effects you
can achieve using these features. For more involved examples, I recommend doing
a Google search. My favorite examples are still CSS3-man ( www.optimum7.com/
css3-man) and Pure CSS3 AT-AT (anthonycalzadilla.com/css3-ATAT/index.html),
both by Anthony Calzadilla.
The trouble is that many of the demos you'll see don't give too much consider-
ation to working in nonsupporting browsers. Perhaps it doesn't matter in the case
of throwaway demos, and many examples will degrade gracefully. For instance, look
at the preceding animation-basics.html example, which works perfectly well when
the animations are not supported; you just don't get to see the fun animations.
But what about interfaces in which you rely on animations for viewable content?
A good way to deal with such eventualities is to use feature detection; that is, you
can use JavaScript to detect whether the browser accessing the content supports the
CSS features you are using, and then serve different styles depending on the result.
The easiest way to do this for noncode ninjas is to use a feature detection
library; the best available is Modernizr ( www.modernizr.com), created by Faruk
Ates, Paul Irish, Alex Sexton, and others. This uses JavaScript to feature detect
pretty much every CSS3 and HTML5 feature, and then lets you selectively apply
scripting and styles to suit. As of version 2, you can even build and download your
own custom version that just includes the tests you want, reducing bandwidth (see
www.modernizr.com/download). While you are experimenting at this point, you
should just stick to using the full, uncompressed version of Modernizr (click the
DEVELOPMENT download button on www.modernizr.com).
Let's run through adding some CSS support detection magic to an example! To
keep it simple and easy to follow, you'll revisit the business card 3D flip example.
Open the two-faced-cheek-modernizr.html file in the chapter5 code download
folder for the finished example, or open the two-faced-cheek.html file for a start-
ing point.
 
 
 
Search WWH ::




Custom Search