IE Styles and Scripts

Adaptivetheme 7.x-3.x can load conditional stylesheets and scripts from the themes info file. This is a brand new feature and in this help page I will detail how you do this. Its easy!

If you are unsure about what an info file is - every theme has a special file called the "info" file, which refers to the file type. For example if your theme is called footbartheme, your theme must have an info file called foobartheme.info. Inside this file is critical information Drupal needs to run your theme. If you are using Adaptivetheme one assumes you have copied the sub-theme and renamed the existing info file.

To load the files we use one of two new info file declarations, ie_stylesheets or ie_scripts. Both of these are unique to Adaptivetheme and will not work on other themes, sorry about that.

Lets start with ie_stylesheets.

IE Styles

Lets assume you need to add a stylesheet for IE 8 and below. Since you have checked what conditional comment you need over at quirksmode you are ready to start. FWIW I tend to use "less than" (lt) a lot, so if I am targeting IE8 and below I will use lt IE 9, meaning "less than IE 9".

First create a stylesheet, lets called it ie8-and-below-styles.css, and we put it in the mythemename/css directory.

We also need to decide what media this is appropriate for, we are going to assume "screen". The media attribute will default to "all" if you leave this empty, in which case no media attribute will show, "all" will just be assumed and is not needed in the actual output. I strongly recommend you put something better and target your stylesheets, "screen" is a good all round choice.

Now we open up the info file and make the declaration so Adaptivetheme can load the stylesheet:

ie_stylesheets[screen][lt IE 9][] = css/ie8-and-below-styles.css

Clear the cache and you are done, the file will load. As you can see the syntax is quite simple:

ie_stylesheets[media][condition][] = path/to/file (path must be relative to your theme root)

IE Conditional Classes

Adaptivetheme also includes special conditional classes on the HTML element which allow you to easily target styles at specific version of IE.

These are the classes you can use:

  • .iem7 (IE7 Mobile)
  • .lt-ie7 (less than IE7)
  • .lt-ie8 (less than IE8)
  • .lt-ie9 (less than IE9)

Use these if you only have a small number of overrides and do not want to load a dedicated conditional stylesheet.

IE Scripts

Scripts are slightly easier because there is no media attribute to worry about, so lets just assume we want to load a polyfill for IE 8 and below:

ie_scripts[lt IE 9][] = js/my-script.js

Again, note the very simply syntax:

ie_scripts[condition][] = path/to/file (path must be relative to your theme root)

So thats about it, all very easy and strait forward, use ie_stylesheets and ie_scripts in your info file and say goodbye to difficult PHP coding with drupal_add_css() and other hacks for loading conditional scripts.

And remember, always clear the cache after making changes to your themes info file!

Last updated 16th July, 2012 - 3:10pm