Prepping for IE9
Sylvain Galineau: As the specification nears Recommendation and browser vendors are working on their final implementations and testcases for submission to the W3C, we recommend that new content always include a border-radius declaration without vendor prefix.
It turns out that I hadn’t consistently done that on this blog. That has now been fixed. This brings the list of features that this weblog uses that IE9 does not (yet) support: box-shadow, border-style: outset, css gradients. That’s a remarkably short list.
Not only that, but Sjoerd’s workaround is no longer necessary for HTML5 elements.
There are a few glitches in SVG, most noticeably in resizing. My images tend to use a 1-1 ratio involving non-negative coordinates, so I’m mostly immune. You can see some issues on my archives page where my images are not resized appropriately. And the knot does not show up at all in the lower right hand corner of this page.
Checking the headers sent by IE9 Platform Preview:
HTTP_USER_AGENT Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0; Trident/4.0; SLCC1; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; OfficeLiveConnector.1.4; OfficeLivePatch.1.3) HTTP_ACCEPT */*
That’s essentially no different than IE8 sends by default:
HTTP_USER_AGENT Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0; Trident/4.0; SLCC1; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; OfficeLiveConnector.1.4; OfficeLivePatch.1.3) HTTP_ACCEPT image/gif, image/jpeg, image/pjpeg, application/x-ms-application, application/vnd.ms-xpsdocument, application/xaml+xml, application/x-ms-xbap, application/vnd.ms-excel, application/vnd.ms-powerpoint, application/msword, application/x-shockwave-flash, */*
And absolutely identical to what IE8 sends when you select Open in New Tab.
This previously led me to add the following to my .htaccess file:
# MSIE accomodation: open in new tab/window
RewriteCond %{HTTP_ACCEPT} ^\*/\*$
RewriteCond %{HTTP_USER_AGENT} MSIE
RewriteCond %{HTTP_USER_AGENT} !chromeframe
RewriteRule ^([^.]*|.*\.html\d?)$ - [T=text/html;charset=utf-8]
On one hand it means that there is no way for me to serve application/xhtml+xml to IE9 without affecting users of prior releases of IE. On the other hand, it means that I’m currently serving SVG as text/html to IE... and it is (mostly) displaying it just fine. Very cool.
It does mean that Google AdSense would display, but for now I’ve disabled such for IE9 users by checking for document.createElementNS at runtime. This required a template change so it will take a week or so to propagate through my site.
Using border-radius does mean that I can drop my use of background SVG images in Opera, so I have done so. This results in a noticeable speedup in scrolling operations. Opera continues to not support border-radius on entry fields on buttons.