HTML and CSS Reference
In-Depth Information
Figure 7-17. Older versions of Internet Explorer fail to style HTML5 elements
There are two ways to tackle this problem. One is to create dummy HTML5 elements in the browser's
memory using the solution described in “Styling New HTML5 Elements in Older Browsers” in Chapter 2 . It
definitely works, but it relies on JavaScript being enabled in the user's browser. The alternative is to use <div>
elements and to assign them the same classnames as the new HTML5 elements, as described in the next section.
Using Multiple Classes on an Element
Instead of using the HTML5 <figure> and <figcaption> elements, you can create figure and figcaption classes,
and apply them to <div> elements. It's a completely cross-browser solution, and it doesn't rely on JavaScript. The
HTML class attribute accepts multiple values. Just separate each classname with a space like this (the code is in
<div class="figure floatleft"> <img src="images/nice seafront.jpg" alt="Nice seafront"
width="400" height="266">
<div class="figcaption"> Nice seafront from la Colline du Château </div>
The order of classnames in the class attribute is not important. Any conflicts are resolved using the
normal rules of the cascade and specificity.
When an element uses two or more classes, you chain them together to create a CSS selector. For example,
the following selector styles an element that has the figure and floatleft classes applied to it:
As with the class attribute in the HTML markup, the order of the classnames in the selector is unimportant.
The following selector means exactly the same:
Search WWH ::

Custom Search