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).

16 Responses

  1. Ali says:

    Hi Alexander,
    How can i add this to HTML site. What is process of add this scripts to HTML site. Do i add all this to header.

    Thanks,
    Ali

  2. arralan says:

    is can to normally my nav menu and border img in IE? if i see my theme in chrome and firefox is very good. But, when i see in IE padding in nav-menu being zero and i have border in all of my omage..

  3. bicen says:

    Hi Alexander,
    My english is poor ,I try to speak simple words.There is a ‘IE Fixes’ area in the style.css ,it looks like a preparations that you want to add good compatibility for the ie8。Right?

  4. Adam says:

    Gr8 article, but i feel the importance of IE 6,7 8 is decreasing day by day, also very low ratio of percentage would like to opt for compatibility for these browsers.

    Regards,
    Adam – Manager
    http://responsivecss.net/

  5. Ataul Ghani says:

    Very nice and great tips. It will help me to fix my issue. Thanks Alex to share this kind of article.

  6. Ahmed says:

    hi Alexander can you come to private chat ?

  7. Rishi says:

    Loading script in header and footer. Does that mean, if I am loading the scripts asynchronously then I have maintain the order html5shiv, selectivizr and then respond?

  8. Baron says:

    Only a few I understand the HTML :'(

  9. Crono says:

    Thank for share Alex

Leave a Reply to Ataul Ghani Cancel reply

Your email address will not be published. Required fields are marked *