Getting to Grips with HTML5 – Part 1

David Turner — Sun, 23 May 2010 09:19:55 +0000

This article is one of a series that I plan on covering, regarding HTML5. Over the series I plan to take a look at various aspects of HTML5, be it browser support, how you can start working with it now or how to get HTML5 Video working across browsers, with support for those who don’t yet support these tags.

Browser Support – Here & Now

Today, as the title suggests, I’ll be dealing with the support offered by the most common browsers, and what we can do for those browsers that don’t support HTML5 currently. The browsers that I’ll be covering are:

Firefox
Safari
Chrome
Opera
Internet Explorer 6
Internet Explorer 7
Internet Explorer 8

Whilst IE6 isn’t a modern browser and many designers/developers have an intense dislike for it, including myself, it is an unfortunate reality that it is still a common browser and thus it is a browser that we need to keep in mind when developing using HTML5.

Firefox, Chrome, Safari & Opera

I have bundled these four browsers together as, from my own experience, the current versions of these browsers support the important parts of HTML5 pretty consistently. These include the new semantic tags used for laying out elements: header, nav, section, article, aside, figure and footer. They do, however, typically need to be pointed in the right direction when it comes to styling them. Fortunately this is a simple task, completed by adding the following CSS into your stylesheet.

header,
section,
footer,
aside,
nav,
article,
figure {
	display:block;
}

This code will ensure that all elements that should be displayed as block by default are displayed as block when pages load. This will almost certainly be a default in future versions of browsers.

Older Browsers

Older browsers, as well as browsers that are rarely updated, really are the problem children when any new standard is released, as they cannot be developed to support features that have yet to be created. It’s quite understandable but I thought I’d go into a little detail about what the result of this is.

As pointed out already, the current versions of these browsers all support, to some extent, HTML5. The problem with older browsers is that they don’t see, or register, HTML5 elements. This can cause problems when using elements such as header, section or pretty much any of the elements I have mentioned so far, as they make up an important part of sites developed using HTML5.

This causes a really tragic breakage, for lack of a better work, of the design of a site. Without the styling of such features a design can, and quite possibly would, fall apart. Fortunately these browsers are very good in terms of updating their software, ensuring that such incidents are very much the exception than the norm.

Internet Explorers 6, 7 & 8

Internet Explorer has a mixed reputation, as the browser has become increasingly good, or less bad, over the past several years and, with Internet Explorer 9, will become even better, with full HTML5 support. That, however, is the future. I’m discussing the here and now in terms of support for HTML5.

I’ll keep it brief for you, there isn’t any. Currently Internet Explorer does not support HTML5 in any way, shape or form. Fortunately, there’s a way to force Internet Explorer to acknowledge the existence of HTML5 elements, which has both upsides and downsides.

Upsides

HTML5 element support
Allows for CSS Styling

Downsides

Project becomes JavaScript Dependant

That’s right, the solution for Internet Explorer’s lack of HTML5 support is dependant upon JavaScript. How does JavaScript help? JavaScript has a rather nice command, document.createElement(), which when used in the section of the site forces the browser to acknowledge that the element created can be styled. An example of how this can be done would be:

document.createElement('article');
document.createElement('footer');
document.createElement('header');
document.createElement('hgroup');
document.createElement('nav');

The code above would force Internet Explorer to acknowledge the existence of the 5 elements mentioned. Personally I would recommend that you look into making use of Remy Sharp’s fantastic HTML5 Enabling Script, which is also available on Google Code, which spares you from having to manually create each element.

An alternative that you could make use of Modernizr, which is useful for much more than making HTML5 work for Internet Explorer, having the capability to detect what features a browser supports using JavaScript.

Anyway, that’s it for today’s post. My next HTML5 post will look at how you can start using HTML5 now, covering what has changed and will cover a guide on making the switch from XHTML/HTML4 to HTML5.

Has developing for IE6 become a sign of quality?

paprikaya — Sat, 05 Sep 2009 09:27:47 +0000

Yesterday it occured to me, that we – by we I mean anybody who develops anything for browsers on the internet – are too nice when it comes to IE6. I know that some of you out there will laugh at that statement, but just breathe in deeply and give this a thought: Can you honestly say that you have never bent over backwards, adding hacks and seperate stylesheets in order to make something look or function the same in IE6 as it does in the modern browsers?

Anyway, to get to my point I have to mention peoples behaviour these days. More or less all of us own and use a mobile phone, and we use those phones to browse the internet more and more.

Now take another deep breath and think about the following: Is there anyone out there who expects to be able to browse the net, see beautiful sites, and have all the functionality these sites can offer, from a Mobile phone that is 8 years old? We all know that we need a modern mobile phone like an iPhone or a phone that uses Android, or a similar OS to be able to get all the wonder. Anyone who uses an older device will know, and never expect to be able to have the same functionality when browsing the net as users of the aforementioned products.

Then why are we expecting all that wonder from inside IE6? And why are developers still, to this day, going out of their way to make sure their products work and look fine in IE6?

As for the developers I think I may have at least a partial answer: if we see a modern internet site with lots of beautiful functionality and lots of little widgets that all work in IE6, we think that a huge amount of work has gone into making that site. If our sites work in IE6 we can claim the following (which in itself feels rewarding): “works in IE6 and above”. If that is the case, then developing for IE6 has become a sign of quality. We see the “works in IE6″ as a quality stamp. We check the other developers sites and go: “It may be beautiful, but it doesen’t work in IE6!” and see that as a sign of lazyness or worse.

Honestly! How can developing for an old, and in many ways obsolete browser be seen as a sign of quality? I don’t think the majority of IE6 users expect the sites they visit using IE6 to have the same functionality as they would have if wieved with a modern browser, just like the users of old Mobile Phones don’t expect to be getting the same functionality as the iPhone users have.

So is it us, the developers, that keeps the much hated and scorned browser alive? The above reasoning points to that statement as being a, if not whole, then at least partial truth.