5 Tools to Make IE Play Nice With CSS3 and HTML5 in WordPress

While older versions Internet Explorer continues to hold not-insignificant market share, front-end and full stack developers must ensure website look, feel and work correctly on older versions of IE (IE8, IE9 and IE10, mainly. To make like easier for us geeks, the kind folks at WPMU Dev have made this lovely guide. The original post can be found here.

Catering to IE’s stubborn disregard of standards can be a loathsome task when developing a website. This is especially problematic if you’re eager to use some of the exciting new features of CSS3. Using CSS3 cuts down on the number of images you would previously have to use in order to include effects such as box and text shadows and rounded corners.

IE also severely cuts down on your ability to take advantage of HTML5’s powerful support for web-based applications, including better support for graphics, videos, styling effects, and devices such as tablets, televisions, and mobile phones. If you’re waiting for IE to catch up first, then your website will remain in the dark ages indefinitely.

Don’t let IE’s lack of support for CSS3 and HTML5 limit your WordPress website. Here are a few helpful tools that force IE to behave better:

Make use of the IE-CSS3 Script

IE-CSS3 is a script developed by Nick Fetchak that will allow you to take advantage of everything your modern browser is capable of doing, while providing a little bit of remedial discipline to IE5 to IE8 to make it play nice.

When using the script, you add CSS styles as you normally would, but include one new line for IE, as show in this example from the script’s site:

1
2
3
4
5
6
7
8
9
10
11

.box {
  -moz-border-radius: 15px; /* Firefox */
  -webkit-border-radius: 15px; /* Safari and Chrome */
  border-radius: 15px; /* Opera 10.5+, future browsers, and now also Internet Explorer 6+ using IE-CSS3 */

  -moz-box-shadow: 10px 10px 20px #000; /* Firefox */
  -webkit-box-shadow: 10px 10px 20px #000; /* Safari and Chrome */
  box-shadow: 10px 10px 20px #000; /* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */

  behavior: url(ie-css3.htc); /* This lets IE know to call the script on all elements which get the 'box' class */
}

The handy thing about using this script is that it allows you to make use of it on a case-by-case basis as you deem necessary.

Selectivizr Plugin for WordPress

There are several options available to you in the form of a plugin that can force IE to behave like other browsers. The new Selectivizr plugin is a JavaScript utility that emulates CSS3 pseudo-classes and attribute selectors in Internet Explorer 6-8. Simply upload and activate the plugin and the script will be running on your site.

HTML5shiv

Did you know that IE will simply ignore HTML5 elements that it doesn’t recognize? Even IE8 behaves this way. The HTML5shiv plugin offers a solution. It adds the HTML5shiv Javascript library with IE Print Protector to your site. This works by taking advantage of the Internet Explorer rendering engine’s ability to handle these elements only after they have been inserted into the DOM via document.createElement. The result allows you to continue to make use of HTML5 elements without having to worry about IE.

WordPress Modernizr Plugin

The WordPress Modernizr plugin adds the Modernizr Javascript library to your site, which enables you take advantage of emerging web technologies (CSS3, HTML 5) while still maintaining a fine level of control over older browsers.

Modernizr is a small, simple JavaScript library. It works by adding classes to the element which allow you to target specific browser functionality in your stylesheet.

HTML5 TwentyTen Five Theme

The TwentyTen Five theme for WordPress looks just like the regular TwentyTen theme, except behind the scenes it makes use of HTML5 elements. It’s a free theme that you can use as a framework/parent theme for your own HTML5 theme creations. The best part is that you won’t need to worry about IE, because the theme makes use of Modernizr.js to make sure that all new elements render correctly in IE prior to version 9. It’s cross-browser compatible, all the way back to IE6!

Whether you want to use a script, a plugin, or a theme, there are many options for forcing IE to play nice with modern web technologies. These are just a few solutions and I know there are many more out there that will work with WordPress.

Although Microsoft is promising some CSS3 in IE9, you cannot depend on it to fully support all features. Grab some of these tools for WordPress and stop catering to the lowest denominator. There’s no reason to let Internet Explorer hold you back anymore.