Something came to my attention a few weeks back in IE. The respond.min.js script that was included in my blogs theme didn’t appear to be working. At first, my response was “Not my theme, not my issue”. Of course, this was the lazy way out. It was my blog, so it should become my issue.
To begin with, I thought it was a dodgy script, so I reloaded. No luck. Now, this isn’t the first time I’ve encountered this sort of issue. I’ve had it before where it will work one day, then not the next – very strange! Anyway, instead of faffing around trying to fix it, I decided the easiest (and perhaps laziest) option was to replace it with an alternative. Except, when that didn’t work, it clear there was a further issue.
After investigating, the demo for the theme worked fine, so it was something I had done to cause this.
*queue many hours of searching*
So, after trying a couple of things, re-loading scripts I’d removed, removing all custom styles, removed all caching etc. nothing was working. So I reverted to the parent theme, this was when I had finally clocked on to what the issue was. The child theme. Or more importantly, the @import rule. You see, when creating a child theme in WordPress, it uses the CSS @import rule, to import the parent styles, so you don’t lose them and you can still add your own.
However, the JS scripts used to “give” IE media queries support, don’t work with the @import rule.
So, a solution? Well, I wasn’t really sure how to go about this – leave the parent styles, them import the child styles? But that wouldn’t override… I could add my additional styles to the existing stylesheet, but then it’s lost on update. I could have loaded the parent styles in the child theme, but I still need to import it for the child theme to work, so I’d have multiple CSS rules, or have to delete the style each time it updated. Not exactly friendly eh?
So, what I decided to do? Move all the media queries into the child theme, yes, a couple of duplicates, but primarily on desktop so shouldn’t hinder load time too much. A lot of hassle? Yes, but, like it or not IE is a very used browser.
By all means, if you know of any easier ways to fix @import media queries in older versions of Internet Explorer, then do let me know!
I’ll write more about the functions used to include another JS file in WordPress and the alternative methods that can be used to do so in a later blog post.