We Need To Talk About Internet Explorer

IE don't you just love it? No probably not but unfortunately we still live in a web world dominated by Internet Explorer - Microsoft were just way too successful in getting their browser everywhere.

Here in the UK, Internet Explorer in all its different guises, still has the largest market share as calculated by statcounter. In August 2012 there were double the users of IE8 compared to Safari on the iPad.

That means you cannot ignore it. You must have a strategy for dealing with it.

HTML5

Pre IE9 versions of IE do not support HTML5. If you want to start you use HTML5 elements such a <nav>, <header> you can but beware.

Old IE versions will treat unknown elements (all HTML5 elements) as inline elements and it won't be able to style them. That means using the likes of <footer> and <nav> becomes problematic.

Help is at hand though.

However, a ‘fudge’ or ‘shim’ or ‘shiv’ has been made available by jQuery and Javascript wizard John Resig. Adding the following Javascript code to your pages will allow them to be styled.

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Here's a page pre-Shim and a page post-Shim (best viewed in IE8 - you don't hear that very often).

IE Conditional Comments

The above uses a feature of IE known as conditional comments. The lines that look like standard HTML comments are ignored by all browsers except IE that interpretes the conditional logic.

To detect Pre IE9 versions of IE we can use:

<!--[if lt IE 9]>
// detects running IE version less than (lt) 9
<![endif]-->

You can do other queries such as:

<!--[if IE 7]>
// detects running IE 7
<![endif]-->

or

<!--[if gte IE 8]>
// detects running IE version greater than or equal to 8
<![endif]-->

A full list of conditional comment syntax is available from Microsoft.

This gives you the opportunity to serve up different stylesheets to help deal with older versions of IE for example:

<!--[if IE 6]><link rel="stylesheet" type="text/css" href="/styles/style-ie6.css" /><![endif]-->
<!--[if IE 7]><link rel="stylesheet" type="text/css" href="/styles/style-ie7.css" /><![endif]-->
<!--[if IE 8]><link rel="stylesheet" type="text/css" href="/styles/style-ie8.css" /><![endif]-->
<!--[if IE]><link rel="stylesheet" type="text/css" href="/styles/style-ie.css" /><![endif]-->

Modernizr

As well as detecting which browser the user is running you can also detect which specific features are supported. This can be done through the rather nifty 'modernizr' javascript plugin.

Modernizr includes the 'shiv' for HTML5 and also adds 'feature-sniffing' to identify whether the browser supports various HTML5 and CSS3 features.

CSS3

I am going to consider the six CSS3 features covered here and see how we can try and use them in older versions of Internet Explorer.

The web community is a wonderful thing and as well as Modernizr we have been provided with PIEs. Progressive Internet Explorer is a polyfil* that will give us the suport for border-radius, box-shadow and gradients.

Working with PIE is well documented. Download the files and upload them to your server. I find it best to place them in your styles folder. The crucial one is pie.htc.

Border Radius with PIE

To create a border radius with CSS3 you would use:

#container{
     border-radius: 15px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    -o-border-radius: 15px;
    border-radius: 15px;
}

Old IE cannot cope with this. So to fix it with PIE change it to:

#container{
     border-radius: 15px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    -o-border-radius: 15px;
    behavior: url(styles/PIE.htc);
}

Two tips with PIE.

  1. The url to the htc file is relative to the document that calls the stylesheet NOT relative to the stylesheet.
  2. If the htc does not seem to work for you and your server supports php then use PIE.php instead.

Box Shadow with PIE

We have done the ground work above. Box shadow can be added in the same way by just adding the necessary CSS3 properties (don't forget your vendor options).

#container{
     box-shadow:0 0 7px 0 #999999;
    -moz-box-shadow:0 0 7px 0 #999999;
    -webkit-box-shadow:0 0 7px 0 #999999;
    -o-box-shadow:0 0 7px 0 #999999;
     border-radius: 15px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    -o-border-radius: 15px;
    behavior: url(pie-css/PIE.htc);
}

Here is a page polyfilled with PIE.

Box Shadow with Microsoft Filters

Who ate all the pies?

If you are pie-less then there is another solution to Box Shadow support.

Microsoft has its own propriety solution for a range of visual effects that can be applied through their CSS filter property.

The filter CSS property will be ignored by other browsers so is quite safe to use.

It should also be used with the Microsoft vendor prefix of -ms-filter for IE8 whilst earlier versions just use filter.

/* for IE8 */
-ms-filter:progid:DXImageTransform.Microsoft.Shadow(strength=4,direction=135,color='#999999');
/* for pre IE8 */
filter:progid:DXImageTransform.Microsoft.Shadow(strength=4,direction=135,color='#999999');

The syntax is a strange compared to the general elegance of CSS but it does work of a fashion.

The shadow takes values for the strength and colour. The direction value is in degrees 0° been straight up so a value of 135 is off set to the right.

Check the Microsoft documentation for other options.

Text Shadow with Microsoft Filters

Text Shadow is not tackled by PIE but we can use the same Microsoft shadow filter to achieve the same effect.

.myShadow{
-ms-filter:progid:DXImageTransform.Microsoft.Shadow(strength=2,direction=135,color='#ffffff');
filter:progid:DXImageTransform.Microsoft.Shadow(strength=2,direction=135,color='#ffffff');
*/ moderny way */
text-shadow: 2px 2px #ffffff;
}

The above would create a white shadow offset to the bottom right. However, this technique can look pretty ropey with small font sizes.

As such you may decide it is best not to attempt to style text in this way. Fair enough. There is even an intellectual justification, two in fact, you can use to cover yourself.

Excuses:

  1. Progressive Enhancement - If it looks good and is supported in the browser I'll use it. If not it is only decoration and not core.
  2. Graceful Degradation - As long as it can be read, I'll drop some decorative features from older browsers. Kind of the reverse of the Progressive Enhancement.

Gradients with Microsoft Filters

We can use Microsoft filters to add linear gradients.

.myGrad{
-ms-filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#ffff00',endColorStr='#ffffff');
filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#ffff00',endColorStr='#ffffff');
}

The above would create a vertical linear gradient yellow to white.

Opacity with Microsoft Filters

Opacity is again handled by a Microsoft filter. The filter is in this case Alpha and takes an opacity value as a percentage (remember the opacity property in CSS3 takes a value between 0 and 1).

.myOp{
-ms-filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
/* modern way */
opacity:0.5;
}

RGBA with Microsoft Filters

Finally we can again use the Gradient filter to create a fallback for RGBA backgrounds that can be used in CSS3.

There are a number of steps here. First use background-color to provide a solid background colour. We need to do this as pre-IE9 the likes of background:rgba(255,255,0,125) would just not be understood and as a result just ignored.

Secondly add in another background-color property setting it to a value of transparent

And finally use the Gradient filter to apply the alpha setting. You are hopefully used to seeing colours expressed hexidecimally ie #RRGGBB. Here we need to use the #AARRGGBB format, where AA is the alpha hexadecimal value. As a result a value of 00 would be transparent and a value of FF opaque.

To create a yellow fading background we would therefore need the following:

#container{
background-color: #ffff00;
background-color: transparent;
-ms-filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#7f0ffff00',endColorStr='#7fffff00');
filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#7fffff00',endColorStr='#7fffff00');
/* modern way */
background: rgba(255,255,0,0.5);
}

Fire up your old Granny's Vista laptop and take a look at this page. Should be styled (of sorts).

Don't worry IE10 will be out soon.

* Polyfils fix the holes missing in the application