html, css, jQuery, PHP, mySQL
Now that CSS3 and HTML5 are well and truly here, fixing websites for Internet Explorer has become a more arduous task than most designers are prepared to undertake.
Why do I say this? Well, taking a look at the web today it seems that the majority of web designers have simply given up on adding shiny new CSS3 features to web pages. Perhaps I’m wrong: but I suspect that they just got sick of endless image replacements and <span> tags simply to allow Grandma to see those lovely rounded corners, gradients and drop shadows.
At the other extreme, there are plenty of cutting-edge websites out there showing all of the most up-to-the-minute effects. But how?
this corner plugin is pulling off its magic by adding more elements to the page. Specifically, it adds div “strips” to the item to be cornered and sets a solid background color on these strips in order to hide the actual corners of the real item.
Sounds cool, but I found in practice that these solutions tend to have drawbacks. They don’t always turn out the way you expect. Also, for a website with a textured background, solid-coloured corners would be as bad as square corners!
You can get very satisfactory effects doing everything the long way, yourself, of course. Individual pngs or gifs with transparent areas to show that beautiful patterned background; meticulously-crafted segments of borders; replacing entire areas with carefully-replicated graphics; even doubling the number of elements on the page and using microsoft’s blur filter on the one behind for a box-shadow effect.
But it takes a long time.
A helluva long time. If your client is ICI or Sears, it might be worth going the extra nine yards. After all, they are paying big bucks and expect their site to look identical in every browser – it’s part of the corporate image. But what about the smaller clients, who aren’t paying by the hour, and aren’t paying enough to effectively double the work needed to get their site looking smart and almost-the-same for every user?
Well you can follow the herd and forget about box shadows, drop-shadows, radial gradients and the like. And fair enough – it’s certainly bullet-proof, and seems to be favoured with a lot of large and reputable websites. But, let’s face it, these features are fun. They are the reasons we have all been waiting for browsers to implement CSS3 in the first place.
So I started looking around to see if there were any more solutions available than those I had already tried, and stumbled upon Chrome Frame.
Chrome Frame is an open source browser plugin from Google Chrome. It allows Internet Explorer users to see web pages rendered in their full HTML5 and CSS3 glory – not just rounded corners, but the whole kaboodle. The Chrome Frame download page proudly boasts:
- Start using open web technologies – like the HTML5
canvastag – right away, even technologies that aren’t yet supported in Internet Explorer 6, 7, or 8.
It certainly does seem fast. But let’s take a closer look.
Chrome Frame installs as a Browser Helper Object: this is the same technology that allows toolbars and other plugins to be added to Internet Explorer. It only takes a few seconds or a minute or two to install – much like installing Flash for the first time. Microsoft can’t block Internet Explorer users from installing Chrome Frame without causing problems for plugins such as Flash, so there’s not much they can do about it. It’s easily installed with a one-click download from Google Code.
Once Chrome Frame is installed, web pages are rendered using the Webkit rendering engine instead of Microsoft’s Trident. The user-agent string is changed to chromeframe/, so there’s no need to worry about Chrome Frame users seeing all that conditionally-commented code that you needed specially for the Internet Explorer users. Essentially they are now using a Webkit browser – to all intents and purposes. Once Chrome Frame is installed, you can check this at whatsmyuseragent.com.
To enable users with Chrome Frame installed to view your website in all its HTML5 glory, simply include the following <meta> tag in the <head> of your html:
The X-UA-Compatible tag tells the browser what rendering engine to use:
X-UA-Compatible is used to indicate to an IE browser which version of the rendering engine should be used to display the page. This metatag does not affect other browsers such as Firefox and Opera, which in general attempt to avoid bloating the size of the browser code by displaying web pages only one way according to established standards (Supporting multiple rendering engines presents some major challenges, especially when content rendered by one engine accesses embedded content rendered by a different engine).
If you really want to be sure that those pesky hard-core Internet Explorer users without the plugin will be using the most modern available rendering engine, just add
… it doesn’t matter which comes first inside the <meta> tag: as long as chrome is in there, it will work. Users with ChromeFrame see the Webkit version, users without see the Trident version.
Not all of your visitors will have already installed Chrome Frame. Very wisely, Google have included cut-and-paste code which detects whether or not Chrome Frame is already there, and if not, opens an overlay with an iframe showing Google’s download page. The instructions are on the developer’s page. The code must be placed in a page with <body> tags – so it’s best right at the top or bottom of your page, inside the <body>. After download, the user is redirected to a page of your choice – which generally should be the one they were trying to view!
The <meta> tag can also be inserted site-wide into all web pages by modifying httpd.conf in Apache, with mod_headers and mod_setenvif enabled:
All details are available on the developer’s guide page, together with other techniques for forced rendering, testing and troubleshooting.
Amazingly, websites using this look exactly the way that they do in Safari or Chrome. Speed is noticeably faster. I have yet to experiment with more of the features of html5 and CSS3, but I can’t wait. I think this is going to be my new hack du jour.
Never has Internet Explorer looked so good, to so many, with so little effort. Many a developer will be able to finally get some sleep and forget about microsoft filters and image replacement techniques. No more pixel-positioning spans for rounded corners…
There had to be a but, didn’t there?
There’s a bug. Or at least, there’s one bug that I know of so far and it’s a pretty important one. Google tell you to report it as a bug if it happens to you, so I guess that’s what I’ll have to do next.
Chrome Frame did not install properly until Internet Explorer was reloaded.
This sucks for first-time visitors, who may consequently become last-time visitors. If they load up a page and, perhaps for the first time in years see a site rendered without the myriad hacks that have been making the internet a palatable place for them to be, they are going to freak out.
What to do? Well it’s your choice. Or your clients’ choice. I’m not even sure how many clients even care about this today: people are becoming more savvy about browsers, and lets face it, Internet Explorer users can’t be too much of a fussy lot, can they? Imagine browsing the web today in IE6. What must it be like? Not every site can be optimised for IE6 any more, and many probably never were or were very badly. I will just keep telling myself that it’s about time IE users wised up, and not get too sentimental about it. After all, one day the bug will be fixed … and every site that uses the Chrome Frame sniffer / prompt box will be one more site towards being able to forget about Internet Explorer altogether.
Oh – except for IE9. I used conditional comments to target IE8 and below for my Chrome Frame prompt. The only bit of conditional css I now have for Internet Explorer fixes and issue with nth child. (We can live without radial gradients and inset box shadows just for now.) As far as I know IE9 will still need this, but I could be wrong. I can’t afford Windows 7 just yet. I will have to wait and see.
UPDATE: many thanks to my friend Manuel of mlongo.net, who reminded me that css3pie is a great way to make Internet Explorer behave. I think that was what I was looking for, but I found ChromeFrame and gave it a try. I keep hearing about css3pie … which method do you prefer?
This entry was posted on Monday, April 11th, 2011 at 9:00 pm and is filed under useability, web design. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.