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
figcaption_safe.html):
<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>
</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.
Note
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:
.figure.floatleft
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:
.floatleft.figure
