Earlier this evening, I was reminded of just how primitive the HTML5 support was in Firefox 3.5/3.6. While we have seen three major version releases since 3.5, it was actually still the latest version of Firefox less than 6 months ago (and was that way for almost 2 years). Therefore, Firefox 3.5.x still holds a decent amount of market share (probably as much as, if not more than IE6 did a year or two ago). Looking at a handful of websites for which I have analytics data, versions of Firefox prior to 4 still accounted for anywhere between 2% and 15% of the total visits to those sites last month. With all of that information, it’s probably still important to make sure your sites work in versions of Firefox as far back as 3.5.
There are two somewhat major gotchas in the way Firefox 3.x handled HTML5. The first is easily fixed with a few lines of CSS. The second can only really be fixed if you rewrite some of your HTML.
Block vs. Inline
When Firefox first introduced support for new HTML5 elements, all of those new elements were treated as inline. Therefore, if you want Firefox 3.5.x to treat your new HTML5 elements the same way newer versions of Firefox, Chrome, Safari, Opera and even IE (IE7 & 8 require an HTML5 script like HTML5 Shim/Shiv to add support), you need to include a little bit of reset CSS.
Thankfully, the HTML5 Doctor has provided us with a nice HTML5 branch of Eric Meyer’s reset stylesheet that includes a line that explicitly declares which HTML5 elements should be treated as block-level (hat-tip to Keri Henare for pointing me to that reset stylesheet).
If you, like me, use a separate reset stylesheet (I tend to include the Yahoo! User Interface reset CSS in all of my projects), you can still just copy the necessary code from the HTML5 Doctor sheet and paste it in at the top of your custom stylesheet.
I’ve included that specific block of code below, but I would still recommend visiting the HTML5 Doctor article to keep up with any changes or additional information you might need.
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
display:block;
}
Anchors Aweigh
The second major issue is quite a bit more frustrating. One of the great new features introduced in HTML5 is the ability to wrap block-level elements and even multiple elements in a single anchor tag. For instance, you can now do something like:
<a href="http://google.com/"> <p>This is a paragraph</p> <p><img src="http://example.com/img.jpg"/></p> <p>More text below the image</p> </a>
Unfortunately, when Firefox 3.x sees code written like that, it tries to “fix” it. The DOM (document object model) then gets all messed up, and your elements end up all over the screen (or they don’t show up at all), instead of being arranged the way you would expect.
Sadly, at this time, the only solution I see is to stick with only using anchor tags inside of your block-level elements; not wrapping them around multiple block elements.
Thoughts?
Of course, I didn’t even begin to touch on all of the CSS3 (which, despite what the buzz around the Web might lead you to believe, is not HTML5) features and functions that are missing from Firefox; but for the most part, that falls into the category of graceful degradation.
Do you have better solutions? Are you at all worried about making your site work in Firefox 3.5 or 3.6? Are there other serious issues I might have missed? Let me know.
As a sidenote, if you (like me) don’t have access to a copy of Firefox 3.x on your computer anymore, you can still grab one from OldVersion. The instructions I posted back in April 2007 explaining how to install multiple copies of Firefox still work just fine, if you need to install 3.x alongside the newest version(s).