THE (NEAR) FUTURE - CSS: Professional Techniques for Modern Layout - page 231

You may have noticed that I let out two fairly important new elements: audio and video .
h at's because it's hard to know exactly how to treat them. Block? Inline? All depends on how
you plan to use them. Anyway, you can place them in the declaration that makes the most
sense to you.

But what about really old browsers, like IE6? (Note I said “old,” not “unused.” In an interesting
subversion of popular culture, browser popularity has very little to do with age.) For those,
you need to use a bit of JavaScript in order to get the browser to recognize them and therefore
be able to style them. h ere's a nice little script available at http://remysharp.com/
downloads/html5.js that auto-forces old versions of IE to play nicely with HTML 5
elements. If you're going to use and style them, you should dei nitely grab that script and put
it to use.

Once you've gotten your browser ducks in a row and quacking “h e h reepenny Opera,” you
can get down to styling. Remember: h ere's really nothing new about styling with these new
elements (see Figure 7-1). For example:

figure { float : left ; border : 1px solid gray ; padding : 0.25em ; margin : 0 0 1.5em
1em ;}
figcaption { text-align : center ; font : italic 0.9em Georgia, "Times New Roman",
Times,
serif ;}

< figure>
< img src="splash.jpg" alt="A toddler's face is obscured by a rippled and
dimpled wall of water thrown up by her hands slapping into the surface of
the swimming pool in whose waters she sits.">
< figcaption>SPLASH SPLASH SPLASH!!!< / figcaption>
</ figure>

233

Figure 7-1: A styled HTML 5 fi gure and fi gure caption.