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).
Thank for share Alex
Only a few I understand the HTML :'(
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?
hi Alexander can you come to private chat ?
Very nice and great tips. It will help me to fix my issue. Thanks Alex to share this kind of article.
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/
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?
For Hueman? Correct!
yes,Hueman!
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..
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
Hi Ali, you would just remove the php parts – the echo ‘ and ‘. “\n”; around each line. Then put the IE header js just before the head tag ends. The footer IE js is put right before the closing of the body tag.
Hi Alexander,
Thanks for reply.
Hi Alexander,
If i want to add in ghost theme then what i have to do.