Over time, Internet Explorer (IE) is getting better at rendering web pages how we want them, but while IE7 and earlier versions still have a (fast-fading) grip, we sometimes still need to provide exclusive styles to make them render our sites in an acceptable way. That is where conditional style sheets are used.
Open up the
functions.php file in your child theme and add the following code. The code should be entered at the end of the file, just before the closing
?> if there is one.
|1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35||
The first function enqueues a reference to a style sheet file called
style-ie7.css in our child theme folder. Using the
wp_enqueue_style() is the correct way of adding style sheet references, as amongst other reasons, it provides a handle that we end up using in the second function. We hook the function in with a priority of
200. This make sure it appears after any other style sheets that you or a plugin have added in.
The second function surrounds what will be the
<link> markup with a conditional comment to target only browsers that are less than or equal to (the
lte bit) IE7. Other conditional comments are available, but this is by far the most common approach, with IE6- and IE7-specific styles thrown into the same file, to avoid an extra HTTP request. Browsers which aren’t IE just see the output as one big comment and promptly ignore it.
Credit to Michael Fields for highlighting the
script_loader_tag filter methodology to me.