3

I want to use dd belatedpng so the PNG's on my website appear properly on IE. The script I've always used on non-wordpress websites was

<!--[if lt IE 7 ]>
    <script src="js/dd_belatedpng.js"></script>
    <script> DD_belatedPNG.fix('img, .ir'); </script>
<![endif]-->

Now that I need to use it on a Wordpress website, I'm trying to find a way of adding script using enqueue script, although I don't like it at all. At the end of the day, the theme is only going to be used on a single website, I'd prefer to hardcode the scripts path.

Anyway, is there a way of adding IE conditionals to enqueue script and or register script?

5

WordPress has a $is_IE global variable:

global $is_IE;
if($is_IE) enqueue_script(...);

Personally I prefer the IE conditional comments. Other browsers ignore them anyway, so there's no reason to use PHP for browser detection.

You might also want to consider using 8 bit alpha PNG images instead of 24 bit PNGs, which don't need any javascript fix in IE, and in most cases they will look the same as a 24 bit PNG.

3

Enqueue doesn't support output of more complex blocks, only script files.

Best approach for this would be small function that echoes this block (conditionally if you don't need it on every single page), hooked to wp_head.

0

Adding to Rarst's answer, this can be done similar to the following, in your functions file.

add_action( 'wp_head', 'add_belatedpng_js' );

if ( ! function_exists( 'add_belatedpng_js' ) ) {
  function add_belatedpng_js() {

   if (! is_admin()) {      
    echo '
    <!--[if lt IE 7]>
      <script src="js/dd_belatedpng.js"></script>
      <script> DD_belatedPNG.fix('img, .ir'); </script>
    <![endif]-->';
 }
}
  • 1
    Some accompanying words (plain text, not code) would be nice, too. – tfrommen Jan 16 '14 at 15:13
0

This question is 4 years old so I'm guessing you don't even use this anymore. However, for others out there that come across this question, this can be done like this:

add_action('wp_enqueue_scripts', function() {
        wp_enqueue_script( 'dd_belatedpng',
            get_template_directory_uri() . '/js/dd_belatedpng.js', 
            array(), 
            '1.0.0', 
            false 
        );
        wp_script_add_data('dd_belatedpng', 'conditional', 'lt IE 7');
});

add_action('wp_head', function(){
   if (wp_script_is( 'dd_belatedpng', 'enqueued' )) {
       echo '<!--[if lt IE 7]><script> DD_belatedPNG.fix('img, .ir'); </script><![endif]-->' . "\n";
   }
});

The above will only print in IE Browsers so it could save some page bandwidth while also enqueueing the main script at the same time. The is_IE part might also be an unnecessary add though.

I believe this is the best way of implementing this.

  • 1
    You have to send the HTTP header Vary: User-Agent now, or you will send the wrong output to users behind a cache. The Vary header will break those caches, which means that your site is slower now for all browsers. – fuxia Jan 6 '16 at 7:36
  • Yikes thanks for the heads up toscho. Is it the IE global part that breaks this? If so would and I removed it would this be the the best way to do this in your opinion? – Bryan Willis Jan 6 '16 at 7:43
  • 1
    Yes, always send the same output to all browsers. Server side UA sniffing doesn't work. – fuxia Jan 6 '16 at 7:45
  • Ok great I updated the answer. I actually asked a similar question to this yesterday and just realized it was answered telling me the same thing about the caching. – Bryan Willis Jan 6 '16 at 7:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.