Include browser-specific stylesheet for Internet Explorer in the WordPress theme

With this tutorial I describe how CSS files can only be integrated into the WordPress theme for Internet Explorer. This procedure is suitable for loading browser-specific hacks for IE only when they are actually needed.

Internet Explorer is still used quite frequently, but often lags behind when it comes to web standards. New CSS techniques such as Flexbox do not work at all in older IE versions or only work with many bugs, so that additional CSS is often necessary for Internet Explorer to correct the errors.

It is common practice to pack IE-specific CSS in extra files which are only loaded in Internet Explorer. This means that the CSS files like the style.css in the WordPress theme remain valid and free of any IE hacks.

The whole thing is made possible with the use of conditional comments.

Conditional Comments in Internet Explorer

Conditional Comments are conditions in HTML comments that can only be interpreted by Internet Explorer. This only happens with version 9 or lower , from version 10 conditional comments are no longer supported.

 <!--[if IE ]> <link href="ie.css" rel="stylesheet" type="text/css"> <![endif]-->

Using this technology, CSS files can only be loaded in IE. Other browsers like Chrome or Firefox take the above example as a comment block and do not execute the HTML code in between.

In the WordPress theme, however, CSS files should never be integrated directly and hard-coded in the header.php , but rather loaded with WordPress' own functions. This ensures compatibility with plugins and child themes.

Include IE specific CSS file in the WordPress theme

The stylesheet for Internet Explorer is therefore integrated quite normally with wp_enqueue_style () . As a dependency, the original CSS file should be specified in the third parameter, for which the IE hacks are added. Usually this is the style.css of the WordPress theme.

After integrating the CSS file, the general function wp_style_add_data () can be used to declare additional metadata such as values ​​and conditions for the stylesheet. Among other things, whether it is an RTL or an alternative stylesheet.

In order to restrict the loading of the stylesheet to Internet Explorer, we pass the string conditional as the second parameter. The third parameter then specifies the browser version in which the CSS file is loaded.

 /** * Enqueue scripts and styles. */ function theme_slug_scripts() { // Enqueue Theme stylesheet. wp_enqueue_style( 'theme-slug-style', get_stylesheet_uri() ); // Enqueue Internet Explorer specific stylesheet. wp_enqueue_style( 'theme-slug-ie', get_template_directory_uri() . '/css/ie.css', array( 'theme-slug-style' ), '1.0' ); wp_style_add_data( 'theme-slug-ie', 'conditional', 'IE' ); } add_action( 'wp_enqueue_scripts', 'theme_slug_scripts' );

With the general specification IE , the CSS file is loaded in all versions of Internet Explorer, but not in other browsers such as Chrome or Firefox.

The integration of the stylesheet can also be restricted to a certain version of IE.

Example: Load stylesheet only in Internet Explorer 9:

 wp_enqueue_style( 'theme-slug-ie9', get_template_directory_uri() . '/css/ie9.css', array( 'theme-slug-style' ), '1.0' ); wp_style_add_data( 'theme-slug-ie9', 'conditional', 'IE 9' );

Internet Explorer also supports operators in the Conditional Comments with which several versions of IE can be selected:

  • lt - less than
  • lte - less than or equal to
  • gt - greater than
  • gte - greater than or equal to

Examples

Include file in Internet Explorer 5 to 8 (smaller than IE 9):

 wp_enqueue_style( 'theme-slug-ie', get_template_directory_uri() . '/css/ie.css', array( 'theme-slug-style' ), '1.0' ); wp_style_add_data( 'theme-slug-ie', 'conditional', 'lt IE 9' );

Include stylesheet from Internet Explorer 8 (larger than IE 7):

 wp_enqueue_style( 'theme-slug-ie', get_template_directory_uri() . '/css/ie.css', array( 'theme-slug-style' ), '1.0' ); wp_style_add_data( 'theme-slug-ie', 'conditional', 'gt IE 7' );

As a theme developer you are very flexible thanks to the operators and can only integrate CSS hacks for the versions of IE where they are really needed.