Advertising sustains the DA. Ads are hidden for members. Join today

Conditional Stylesheets on Drupal 8

Last updated on
30 April 2025

You are browsing documentation for an older version of Drupal, which is not supported any longer, and the information may not be correct. See current documentation for Contributed modules

This module allows you to add "conditional-stylesheets" in a much simpler
manner, by adding lines to your theme's.info.yml file. The syntax for that is:

conditional-stylesheets:
 EXPRESSION:
   MEDIA:
     css/style.css

where

  • EXPRESSION can be any of the "downlevel-hidden" expressions specified in: About Conditional Comments
  • MEDIA can be any of the normal CSS media keywords

For example, to add a stylesheet that only targets IE 6 and below, use:

conditional-stylesheets:
  lt IE 7:
    all:
      css/ie6-and-below.css

To add a print stylesheet for IE9 only, use:

conditional-stylesheets:
  IE 9:
    print:
      css/ie9.css

And to add a print stylesheet for all version of IE, use:

conditional-stylesheets:
  IE:
    print:
      css/ie9.css

Placing the above lines in your theme's .info file will automatically append the following HTML code after your existing stylesheets in the <head> of your website.

<!--[if lt IE 7]>
  <link type="text/css" rel="stylesheet" media="all" href="css/ie6-and-below.css" />
<![endif]-->
<!--[if IE 9]>
  <link type="text/css" rel="stylesheet" media="all" href="css/ie9.css" />
<![endif]-->
<!--[if IE]>
  <link type="text/css" rel="stylesheet" media="print" href="css/ie9.css" />
<![endif]-->

*** IMPORTANT ***

Drupal 8 stores a cache of the data in .info.yml files. If you modify any lines in
your theme's .info.yml file, you MUST rebuild Drupal 8's cache. Use "drush cr" to clear the cache if Drush is installed.

Help improve this page

Page status: Not set

You can: