Some tests on the aside element

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 aside element.)

Here’s the HTML I used.

<article>
Article content
<footer>
<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>
</aside>
</footer>
</article>

I used some CSS to make it stand out. Here’s the CSS I used.

.aboutauthor {
width: 30em;
border: 1px solid blue;
background: #CCC;
padding: 2px;
margin-right: auto;
margin-left: auto;
}

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.

results of tests on the aside element in four browsers

RESULTS OF TESTS ON THE ASIDE ELEMENT IN FOUR BROWSERS

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.

SEE ALSO: More on the aside element – Going for Block

3 thoughts on “Some tests on the aside element

    • YES! That does make them all display as styled. Thank you!

      Here’s the new rule:

      .aboutauthor {
      width: 30em;
      margin-left: auto;
      border: 1px solid blue;
      background: #CCC;
      padding: 2px;
      margin-right: auto;
      display: block;
      }

      Is the same trick useful with section, header, footer, and nav elements?

  1. Yes it does. Unrecognized elements default to inline. The Webkit team has put in some default styles in their browser CSS, that’s the only visible difference, really.

    Firefox 4 does provide accessibility mappings to the elements. Something Chrome, Safari and opera does not. (Dunno if IE will do AT-mappings.)

Leave a Reply