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. (more…)

As we continue to transition whole-hog into HTML5 with new Web development, there are a few things you might need to know before deciding how to handle certain situations. I have discovered two somewhat major gotchas over the last few months that really made me reconsider my usage of the new technology.

While articles, asides, headers, footers, etc. are a fantastic way to introduce semantics into your page designs, there are a few elements and attributes that might not do quite what you’d expect. (more…)

Because Opera is not an extremely popular browser, most developers probably aren’t aware of one of its greatest features: Opera Show mode. Opera Show mode is the official name of the full screen mode for Opera (technically, it’s only called Opera Show when a projection media style sheet – discussed below – is present); and it brings with it a great possibility.

More than two years ago, Opera added support for the projection media mode in CSS. Whenever the browser is expanded to full screen mode, it activates the projection media, allowing you to apply a completely different stylesheet to the full screen page than you have in other settings. (more…)

As we’ve discussed on this blog in the past, HTML5 introduces a lot of new elements that are intended specifically to imply semantic information. One of the elements being introduced is the <article> element.

For the most part, the <article> element is supposed to denote a block of information that can stand on its own (essentially, the main content of the page or post). When developing a blog template. The spec currently describes the <article> element with the following verbiage: (more…)

There’s been a lot of talk about HTML5 and all of the new elements it introduces. Forms will be built and used completely differently, the structure of documents will be much more semantic, and new features will be available to website and application developers.

But, what are these semantic elements? Are they really anything new? Will they change the structure of your document at all? The simple answer is “no”. The new elements, for the most part, just make your documents easier to parse and understand (for machines and for people using assistive technology). Very few of the new elements are really all that new; they’re just the same old elements with new names for new purposes. (more…)

As more and more browsers begin to support HTML5 and its elements, one of the nice things we can all begin using is the <figcaption> tag. When coupled together with the new <figure> tag, the <figcaption> tag semantically connects a caption with an illustration (not necessarily an image illustration; it can be a text illustration). (more…)

Beginning on October 6, 2010, O’Reilly will offer a free 10-week HTML5 mobile course. The live sessions will be held each Tuesday at 3PM Pacific Time. It appears you can download the sessions at a later point but there will be a fee for the download.

Here’s an overview of what the instructor notes you will learn during the course:

• Discover what’s new in HTML5, CSS3, and JavaScript for mobile development
• Build your own Twitter App with these technologies
• Create apps that detect the orientation of mobile devices
• Use geolocation and maps in a location-based app
• Enable mobile users to use your app offline
• Use HTML5 web forms to create an address book app
• Create drawings and animation with JavaScript and HTML5′s canvas element
• Use HTML5′s audio and video elements to build a movie trailer app

You should have some basic knowledge of CSS and HTML for the course. They also recommend that you are on a Mac but you can participate if you use a PC or Linux.

I’m making this post as much for my own reference as for anyone else’s. As you may or may not be aware, Apple devices (the iPod Touch, the iPhone and the iPad) use their own icons for bookmarked websites and apps, rather than utilizing the standard favicon. (more…)

I am taking John Allsopp’s HTML5 Live course offered by SitePoint (a great deal, by the way), right now, and he shared a neat little tip that I wanted to pass on. You can use many of the new HTML5 elements (header, article, section, etc.) right now, even in older browsers like Internet Explorer 7.

All you need to do is add an extra “boolean attribute” to the element, and you can then style them with CSS in almost all of the browsers currently being used. (more…)

I’m sure there have been times when you’ve wanted to link to a particular part of a YouTube video but, if you’re anything like me, you had no idea how to go about doing so. Well, you have two options:

1. You can link to the video on YouTube and specify the minute and second at which you want the video to start playing.
2. You can embed the video and specify the second at which you would like the video to start playing. (more…)