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

CLASSING LIKE HTML 5
Perhaps you like the new semantics of HTML 5, but you're just not ready to take your sites to
full-on HTML 5. Maybe your site's user base is mostly older browsers and you'd rather stick to
known quantities like HTML 4 or XHTML. Not to worry: You can have the best of both
worlds with the venerable class attribute.

h is approach was documented by Jon Tan in his article at http://jontangerine.com/
log/2008/03/preparing-for-html5-with-semantic-class-names . h e basic
idea is to use old-school elements like div and span , and add to them classes that exactly
mirror the element names in HTML 5. Here's a code example. Figure 7-2 shows this example
rendered in a browser.

.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 ;}

< div class="figure">
< img src="spring.jpg" alt="A small child with twin pigtail braids ,
her back to the camera , swings away from the camera on a playground
swingset while the late afternoon sun peeks over the crossbar of
the swingset.">
< div class="figcaption">Swinging into spring.< / div>
</ div>

234

Figure 7-2: A styled HTML 4-classed fi gure and fi gure caption.

If you compare the styles there to those found in the preceding section, you'll see that the only
dif erence is that the names figure and figcaption are preceded by periods—thus
marking them as class names. h e markup is a little dif erent, of course, though it's the
same basic structure.