sch0ll

HTML5, CSS3, Fonts and the lovely Internet Explorer

So, I just finished a website using all the fancy new HTML5 and CSS3 stuff available in new browsers. It looks great in Chrome, Safari and Firefox. It just works on Mac, Windows, Linux or Mobile Browsers (iPad,Iphone). Box shadows and css fonts in full action. It looks the same without having to introduce some Browser specific Hack. Great. So time to start the Internet Explorer game...

First rule: Try it with the highest version of the IE Browser that is available on your system.

This rule is only for caring about your own health (high blood pressure for example)! But the game already started with this first rule. Of course you would like to test it with the shiny new Internet Explorer 9 (would be good for your health, I think). But… you need to have a shiny new Windows to get this piece of superb engineering running on your system. Windows XP? Errrr… try again. You only have XP? Ok… we have this shiny new Internet Explorer 8 for you. Running Windows 2000? Errr… come on!

So, me running XP inside a virtual box, IE 8 is the only option. Last thing I did before watching my website project: search in Google "ie8 html5 support". First result: With full CSS 2.1, strong HTML 5 support, and interoperability fixes for the Document Object Model (DOM).

Strong HTML5 support, sounds good. So time to do it, lets start IE, type in the url and…

Second rule: Better have strong (steady) nerves instead of hoping for strong HTML5 support in IE 8.

I got something looking a little bit like what I expected to see, but more watching my website inside a screenreader or without any CSS styles. There were some styled boxes, but most of the elements were rendered without any style. Watching the source code in connection to the CSS code I got more and more the feeling, that this fancy shiny new HTML5 elements like <nav>, <article> or <footer> are not supported in IE 8. Using Google I found https://github.com/aFarkas/html5shiv. Downloaded it, integrated the js script into my project and yeah, at least, I got something looking like my project in IE 8.

So, to sum it up. Don't know what strong HTML 5 support means. I only can say, that this basic HTML5 elements are not supported. Didn't read more about why you need some special js to get this working. But hey, thats part of the game.

Third rule: Don't think about it - just get the job done.

No more words for this rule. It's just not worth the money. Instead, refer to last rule.

Fourth rule: You want to use some of this new web fonts - go, spend money for it.

So, my project website used some truetype fonts. I included them with the CSS font-face feature and it worked in all Browsers fine. Great thing, I really like this enhancement of CSS3. It changes the web in such a nice way, I'm full of <3. But lovers gonna hate. At least if they will meet the IE Browser. It just does not work there. So you will end up using Google to find out, that Microsoft decided to integrate the CSS font-face feature in some special way and to support fonts only in a special format. You will learn about the .eot font format and that there is a special program from Microsoft out there (Windows only) to convert truetype fonts to eot fonts. But, to make it short: it sucks. The tool failed to load my website and only threw an error, that my url could not be loaded (allthough I could preview the page there).

So, I ended shoping a Typekit account, creating a font set for my website, embeded the js code and everything worked fine in every browser. 

Last rule: Never loose hope!

There will be a Internet Explorer Browser supporting all the standards supported by other browsers. Perhaps whe can tell our children the story about the great Internet Explorer game and they will look with big eyes what strange times we grew up in. And of course, Internet Explorer 6 will die. It's only a question of time… Never loose hope!

Note: Tell your customer, that the website you will build won't support the IE 6!

Created on 20.03.2012 at 02:55:13 h

 

« Back to articles overview

blog comments powered by Disqus