HTML5, CSS3, and me


I recently stumbled on, and thought “yet another IP lookup / geolocation site”.   Then I noticed the “Modernizr Support” section, detailing my browser’s support for new standards. 

I was impressed both by the graph and my browser’s support.  Here’s how it looked with Google Chrome:


It reminded me that last week I was experimenting with HTML5, CSS3, and Chrome Frame, and had whipped together an ugly(!) demo.  I figured I’d line up the current browsers here and run them through both exercises.  To be clear, my demo is NOT fair because it uses several Webkit-specific extensions, but I thought it worth seeing.


The Downward Spiral

Chrome 3.0 (and Safari 4.0)
image  image
Yes, it’s tilted on purpose. Interesting bit: the black background is the abyss behind the rounded <HTML>.  Who knows what lurks there?  (Bizarre video artifacts when I resize the browser, actually).


Firefox 3.5
image image
@font-face worked on my header, but no gradients, and I don’t know why border-radius failed.  (It’s worked on other sites).


Opera 10
image image
Why is the standards-nazis’ browser so sucky here? 

Internet Explorer 8
image image
The bottom of the suck, and what we’ve all come to know and loathe.  (To be fair though, IE has supported much of this since v4, but in a non-standard way.  Pragmatically, I’d grant it Box-shadow, Opacity, Gradients, 2D Transforms, and Transitions thanks to its CSS Visual Filters and Transitions.)


A Testing Crisis

Currently I test my sites with SIX web browsers: Safari/Chrome, Firefox, Chrome, IE6, IE7, and IE8.  This is a testing crisis for me, and IE6 has no give (with a stubborn 33% market share), so I’ve been forcing IE8 into downgraded IE7 mode for a slight reprieve.  Yes, I downgrade an already-behind browser! 

Sure, I could try to encourage users to upgrade their browsers, but apparently most people have no idea what that means! 

(If you’re an internet professional, you should watch this)


Aagh, there’s no way out!  With apologies to Mr. Folds:

IE is a brick and I’m drowning slowly.


It’s really more like three bricks drowning the web.  If we could drop one or two versions, IE8 could be survivable, but how?


Hope We Can Hope For?

This is where Chrome Frame wants to come to the rescue.  With it, I can use Chrome as an IE plugin, just like Flash, Java, AIR, or Silverlight.  Sure it’s cheating, but in a good way – it still uses the original native web code (so it is NOT the Un-web like those other plugins).

IE8 with Chrome Frame:
image image

Perfect!  And the same results in IE6 and IE7!

If a plugin story is acceptable (widespread use of the Chrome Frame plugin would help), this means only 3 browser engines to test.  I haven’t used it in production yet, but I’ll be carefully considering it for new projects.