Create CSS Conditional Stylesheets for Internet Explorer in WordPress
How to Create CSS conditional style sheets for Internet Explorer in WordPress using a child theme or parent theme.
Either manually in the header.php file or the preferred WordPress way registered and enqueued as a style via the functions.php way.
The Manual Header Way
1) Open the header.php to your parent or child theme
2) Edit the file and go where the CSS styles are before the closing </head> tag – here you are going to insert an Internet Explorer conditional style based on the IE version. Load the conditional styles after the other CSS styles.
Notes on the code
The source of the style sheet is given by the href attribute:
href="/css/all-ie.css"
The <?php echo get_stylesheet_directory_uri(); ?> followed by the css path is preferred as the better way to declare the theme location rather than use the absolute URL like:
http://mydomain.com/wp-content/mytheme/css/all-ie.css
The get_stylesheet_directory_uri(); function is used to point to the child theme root location – if you are altering a parent master theme then swap in the get_template_directory_uri(); function instead to point to the parent theme location.
Target all IE versions using Child Theme
This examples targets all IE using Parent Theme – rest of examples below use Child Theme
Target all IE versions using Parent Theme
This examples targets all IE using Parent Theme – rest of examples below use Child Theme
Target Specific IE version
This example uses IE8 as an example. Just swap in the IE version number to suit.
Target IE Version & Lower
This example uses targets version 8 and lower, lte=lower than and equal
Target IE Lower
This example uses targets version 7 and lower, lt=lower than but not equal (oh the subtlety)
Target IE Version & Higher
This example uses targets version 9 and higher, gte=greater than and equal
Target IE Higher
This example uses targets version 9 and higher, gt=greater than but not equal
You will also likely find that a parent theme already has IE conditional style sheets already set up – check the header.php for the script tag and where the CSS file path is – if this is the case simply locate the CSS file and add in your IE style rules. IE versions above 10 do not support conditional stylesheets.
The other way to do this is by using the register and enqueue method but with the conditional tags there is a bit more code – check this.