Coolest Guides on the Planet

coolest guides on the planet

Coolest Guides On The Planet

Create CSS Conditional Stylesheets for Internet Explorer in WordPress

2 Comments

ie-support wordpressHow 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.