Make IE 8,7 and 6 more compliant with CSS3, mediaqueries and HTML5

Do we still care about IE8, 7 and 6? I feel it’s becoming more okay to ignore them now, but IE8 support is still a bit of a should-I-or-should-I-not case.

There are 3 really helpful scripts to load in your theme if you want to support one or more of them. They add better compatibility for “modern” things such as responsive design, CSS pseudo-classes and attribute selectors as well as HTML5 tags.

We load these if we see that the web browser used is older than IE9:

• html5shiv.js (source) – HTML5 support
• selectivizr.js (source) – CSS pseudo-class support (eg :last-child)
• respond.js (source) – mediaquery support

How do we apply it to our WordPress theme? We need to load respond.js as one of the very last scripts in the footer for it to work properly – html5shiv and selectivizr in header. So, to have a clean header.php/footer.php we add the scripts via functions.php like this:

/*  IE js header
/* ------------------------------------ */
function alx_ie_js_header () {
	echo '<!--[if lt IE 9]>'. "\n";
	echo '<script src="' . esc_url( get_template_directory_uri() . '/js/ie/html5shiv.js' ) . '"></script>'. "\n";
	echo '<script src="' . esc_url( get_template_directory_uri() . '/js/ie/selectivizr.js' ) . '"></script>'. "\n";
	echo '<![endif]-->'. "\n";
}
add_action( 'wp_head', 'alx_ie_js_header' );

/*  IE js footer
/* ------------------------------------ */
function alx_ie_js_footer () {
	echo '<!--[if lt IE 9]>'. "\n";
	echo '<script src="' . esc_url( get_template_directory_uri() . '/js/ie/respond.js' ) . '"></script>'. "\n";
	echo '<![endif]-->'. "\n";
}
add_action( 'wp_footer', 'alx_ie_js_footer', 20 );

And there we go. Somewhat better browser support and less headache if you want to attempt to support IE8 (or worse).