Skip to main content
Mediacurrent logo
Hero Background Image

Blog Post

Pro Tip: How to Write Conditional CSS for IE10 and 11

by Mario Hernandez
February 3, 2016

While working on recent Drupal projects, I learned that Internet 10 and 11 (IE10-11) no longer support IE conditional comments. Conditional comments allow us to target specific versions or version ranges of IE to correct bugs or inconsitentices that normally are not present on other browsers. Typically for IE9 and below, we have been able to write conditional css by using something like this:

<!DOCTYPE html>
<!--[if IE 8 ]> <html class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]> <html class="no-js ie9"> <![endif]--> 

The code above allows us to add a css class to the html tag which only becomes available if the browser we are using is one of the ones above (IE 8 or 9). This is extremely helpful because with this class we can now write css styles that only apply to those versions of IE.

Writing conditional code based on the IE version is never desired but it comes as a necessity to address bugs or correct style inconsistencies between IE and the rest of the browsers.

How to Conditionally Target IE10 and 11

There is no question that IE10 and 11 are an improvement from previous versions of IE, but unfortunately there are times when they too need special attention. In order to conditionally target IE10 and 11 we can now use a special media query:

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    // IE10+ CSS here

With the above media query in place you are now ready to conditionally target IE10 and 11. For IE 9 and below, we can continue to use the usual conditional comments.

Mario Hernandez

Meet team member, Mario Hernandez

Mario is the Head of Learning at Mediacurrent with over 10 years of public speaking and training experience. He is a regular speaker and trainer at tech conferences including Drupal Camps in Los Angeles, San Diego, San Francisco, Washington DC, and others.  Mario is a co-host of the Mediacurrent podcast where guest speakers discuss open source solutions.

In addition to being the Head of Learning, Mario is a Senior Front-End Developer working on some of the world’s most popular brands. Mario has vast experience in all things Front End as well as Drupal.  He developed the very successful Component-Based Development training workshop which has been conducted at DrupalCons throughout America and Europe. Mario's strengths are training clients and their development teams through custom-tailored curriculums.

Learn more about Mario >

Related Insights