Enqueue Respond script Conditionally for IE8 & under. Grunt?

1

I’m not sure how long I’ll be supporting IE8 and below, but for the time being in order to force such browsers to be responsive I’ll need to use the respond.js script.

Currently I am adding the following to lib/scripts.js:

add_action( 'wp_head', create_function( '',
   'echo \'<!--[if lt IE 9]><script src="'.get_template_directory_uri() . '/assets/js/respond.js"></script><![endif]-->\';'
) );

Is this the best way to do this? I assume we can’t use Grunt here since it is a conditionally commented script.

2

This should work fine, but it has little benefit to just adding the script in /templates/head.php since you are building a theme (and not a plugin) and have access to the file directly. Adding it in the head directly will render faster than running the action/PHP.

3

OK, I see your point. I am just so used to adding Javascript to the lib/scripts.php file. I’ll follow your advice and make a note to add it to /templates/head.php in future.

4

If you would like to enqueue the script for various reasons, WP offers a way. I used something similar to what is described here:
http://kuttler.eu/post/wordpress-style-version-conditional-comments/

Here is sample code I used to conditionally enqueue Font-Awesome IE styles:

global $wp_styles;
wp_enqueue_style( 'fontawesome-ie', get_stylesheet_directory_uri() . 
    '/assets/css/vendor/font-awesome-ie7.css', array( ... ) );
$wp_styles->add_data( 'fontawesome-ie', 'conditional', 'lt IE 9' );

Let me know if this works for you :smile:

2 Likes
5

Here’s another way to do it with Modernizr:

http://benfrain.com/beginner-and-designers-guide-to-using-modernizr-to-solve-cross-browser-challenges/#crayon-5220d9e99a878

I’m not sure which one would be better in your case. The WP native way allows you to dequeue later if needed, while the Modernizr method will target all browsers that do not support media queries of which I am sure there are more than just older versions of IE.

Good to have both methods in the toolbelt though :smile:

1 Like
6

I think it’s really up to you. To say that putting it directly in head.php is faster is probably true, but how much faster? 0.01ms? It’s a very specific case, so any speed gain isn’t going to be distinguishable except by benchmarks, and even then…

I know the hassle of supporting IE7 and IE8, I always try to get them at least looking close to, even if they don’t get CSS3’s rounded corners, box shadows, gradients, etc. And media queries are one of the headaches, so I have used respond.js on a number of occasions. i would say you can put it directly in the head.php file, but even if you enqueue it in Wordpress, I believe it will only run on browsers that don’t support responsive CSS, so almost any you decide to include it should be fine.

7

Thanks everyone. I think I will be hard coding respond.js in head.php for now. I could use the other techniques which look interesting, but it is probably best keeping things simple. I just need to remember to add this to my Roots dev list!

8

Just a note about the Modernizr method: the version of Modernizr that came with Roots didn’t have media querying, so you would probably have to re-download it.

1 Like