I built a page of HTML5 and tried a few CSS styling rules on it to see what browsers do with rendering a page of HTML5. The tests I want to talk about today involve an
aside element. In this test, I used the
aside in the
footer of an
article element to display information about the author of the article. (Note the use of an ARIA role in the
Here’s the HTML I used.
<aside class="aboutauthor" role="complementary">
<h3>About the Author</h3>
<p class="vcard"><a class="url fn" href="http://vdebolt.com">Virginia DeBolt</a> is the author of blah and blah. She blogs at blah and is a big blah.</p>
I used some CSS to make it stand out. Here’s the CSS I used.
border: 1px solid blue;
The results in four different browsers are shown in the image. I don’t have IE, so I can’t show you what happens there.
As you can see, Safari and Chrome recognized and styled the
aside element. Neither the border or nor the background color was rendered in Firefox or Opera. The centering was not rendered in Firefox or Opera either, something you can’t tell from my composite image.
If this same content were added to the HTML as a
div, every browser would display it as styled.
My testing leads me to believe that browsers are not yet ready to render the
aside element properly.
ADDENDUM: Be sure to read the comments – Lars shared how to make it work in Firefox and Opera.