It can be challenging to develop websites that look good across all of the different web browsers. Different browsers have their own quirks and nuances, which you’ll only really become aware of with experience.
Recently I’ve started using Flexbox on a couple of projects, and really like that it makes complex layout and positioning issues all but disappear. But as you can see, support for Flexbox on Internet Explorer 8 and 9 is non-existant. When working for agencies, I’m often building WordPress themes and websites for large companies many of whom are stuck on dated IT equipment that won’t support the latest bells and whistles.
In order to make use of this script within WordPress, we can use
wp_enqueue_script(), and it will be loaded on every page. However, that means the script will be loaded for everyone and not just users of Internet Explorer. What we really need is to make sure that the script only loads for users of Internet Explorer version 9 or lower. WordPress has a built in function for that, too.
To achieve the conditional loading of our script, we would use the following snippet:
And if you check your page in your browser inspector, you’ll see that the script has been wrapped in conditional tags, and will now only be loaded by visitors using Internet Explorer 9 or below.
You can modify the conditional statement to target other versions, and with other conditions – the
lte part of our
wp_script_add_data() can be changed to:
lteLess than or equal to.
gteGreater than or equal to.
wp_script_add_data() function also has a counterpart for loading conditional stylesheets, the same principle applies, but you would instead use