Using IE conditional comments inside a stylesheet

css conditional-comments

96,853

Solution 1

Conditional comments do not work within stylesheets. Instead, you can use conditional comments in your HTML to apply different CSS classes or IDs to elements that you can then target with CSS.

For instance:

<!--[if IE]>
  <div id="wrapper" class="ie">
<![endif]-->
<!--[if !IE]>
  <div id="wrapper">
<![endif]-->

Also, there are tools such as Modernizr that do feature detection in a very similar way (by adding classes to the <html> element). You can use it to progressively enhance your design/script for newer browsers while still supporting older browsers.

Solution 2

It can be easier than what Derek Hunziker said:

Simply include this code as it is:

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>

Then you can target it easily, for example if you want to target IE 8 and lower you write:

.lt-ie9 body{css rule here;}

and you are done!

Cheers

Solution 3

Conditional comments work in Internet Explorer 9 and below, but are ignored by Internet Explorer 10 and up. You can use Internet Explorer specific CSS rules in your stylesheet. Hacks? Yeah, but not really dirty hacks imho.

To target Internet Explorer 8, 9, 10 and 11, you can use:

@media screen\0 {…}

To target Internet Explorer 6 and 7, you can use:

@media screen\9 {…}

Source: https://keithclark.co.uk/articles/moving-ie-specific-css-into-media-blocks/media-tests/

It worked for me. I have not had time to test it in different browsers. If you can confirm it works (or not), please add some comments (with the browser you tested it in.)

Example:

/* Default CSS rule for all browsers */

span.icon {
	width: 16px;
	display: inline-block;
	margin-right: -16px;
}

/* Style rules in the media rules below will only be applied in Internet Explorer */
/* Other browsers will ignore them. */  

@media screen\0, @media screen\9 {	
  span.icon {
    margin-right: 8px;
	}	
}

--- Nothing to see here. Only CSS rules ---

A complete example:

span.icon {
	width: 16px;
	display: inline-block;
	margin-right: -16px;
}

/* Style rules in the media rules below will only be applied in Internet Explorer, other browsers will ignore them. */  

@media screen\0, @media screen\9 {	

	/* Style rules here will only be applied in Internet Explorer, other browsers will ignore them. */ 
	
	span.icon {
   		margin-right: 8px;
	}	
}


/* -----------------------------------------------------------------------------*/

a.icon {
	-webkit-padding-start: 1.5em;
	text-decoration: none;
}

a.icon:hover {
	text-decoration: underline;
}

span.icon_file {
	background : url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAABnRSTlMAAAAAAABupgeRAAABHUlEQVR42o2RMW7DIBiF3498iHRJD5JKHurL+CRVBp+i2T16tTynF2gO0KSb5ZrBBl4HHDBuK/WXACH4eO9/CAAAbdvijzLGNE1TVZXfZuHg6XCAQESAZXbOKaXO57eiKG6ft9PrKQIkCQqFoIiQFBGlFIB5nvM8t9aOX2Nd18oDzjnPgCDpn/BH4zh2XZdlWVmWiUK4IgCBoFMUz9eP6zRN75cLgEQhcmTQIbl72O0f9865qLAAsURAAgKBJKEtgLXWvyjLuFsThCSstb8rBCaAQhDYWgIZ7myM+TUBjDHrHlZcbMYYk34cN0YSLcgS+wL0fe9TXDMbY33fR2AYBvyQ8L0Gk8MwREBrTfKe4TpTzwhArXWi8HI84h/1DfwI5mhxJamFAAAAAElFTkSuQmCC ") left top no-repeat;
}

span.icon_dir {
	background : url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAd5JREFUeNqMU79rFUEQ/vbuodFEEkzAImBpkUabFP4ldpaJhZXYm/RiZWsv/hkWFglBUyTIgyAIIfgIRjHv3r39MePM7N3LcbxAFvZ2b2bn22/mm3XMjF+HL3YW7q28YSIw8mBKoBihhhgCsoORot9d3/ywg3YowMXwNde/PzGnk2vn6PitrT+/PGeNaecg4+qNY3D43vy16A5wDDd4Aqg/ngmrjl/GoN0U5V1QquHQG3q+TPDVhVwyBffcmQGJmSVfyZk7R3SngI4JKfwDJ2+05zIg8gbiereTZRHhJ5KCMOwDFLjhoBTn2g0ghagfKeIYJDPFyibJVBtTREwq60SpYvh5++PpwatHsxSm9QRLSQpEVSd7/TYJUb49TX7gztpjjEffnoVw66+Ytovs14Yp7HaKmUXeX9rKUoMoLNW3srqI5fWn8JejrVkK0QcrkFLOgS39yoKUQe292WJ1guUHG8K2o8K00oO1BTvXoW4yasclUTgZYJY9aFNfAThX5CZRmczAV52oAPoupHhWRIUUAOoyUIlYVaAa/VbLbyiZUiyFbjQFNwiZQSGl4IDy9sO5Wrty0QLKhdZPxmgGcDo8ejn+c/6eiK9poz15Kw7Dr/vN/z6W7q++091/AQYA5mZ8GYJ9K0AAAAAASUVORK5CYII= ") left top no-repeat;
}

span.icon_up {
	background : url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAmlJREFUeNpsU0toU0EUPfPysx/tTxuDH9SCWhUDooIbd7oRUUTMouqi2iIoCO6lceHWhegy4EJFinWjrlQUpVm0IIoFpVDEIthm0dpikpf3ZuZ6Z94nrXhhMjM3c8895977BBHB2PznK8WPtDgyWH5q77cPH8PpdXuhpQT4ifR9u5sfJb1bmw6VivahATDrxcRZ2njfoaMv+2j7mLDn93MPiNRMvGbL18L9IpF8h9/TN+EYkMffSiOXJ5+hkD+PdqcLpICWHOHc2CC+LEyA/K+cKQMnlQHJX8wqYG3MAJy88Wa4OLDvEqAEOpJd0LxHIMdHBziowSwVlF8D6QaicK01krw/JynwcKoEwZczewroTvZirlKJs5CqQ5CG8pb57FnJUA0LYCXMX5fibd+p8LWDDemcPZbzQyjvH+Ki1TlIciElA7ghwLKV4kRZstt2sANWRjYTAGzuP2hXZFpJ/GsxgGJ0ox1aoFWsDXyyxqCs26+ydmagFN/rRjymJ1898bzGzmQE0HCZpmk5A0RFIv8Pn0WYPsiu6t/Rsj6PauVTwffTSzGAGZhUG2F06hEc9ibS7OPMNp6ErYFlKavo7MkhmTqCxZ/jwzGA9Hx82H2BZSw1NTN9Gx8ycHkajU/7M+jInsDC7DiaEmo1bNl1AMr9ASFgqVu9MCTIzoGUimXVAnnaN0PdBBDCCYbEtMk6wkpQwIG0sn0PQIUF4GsTwLSIFKNqF6DVrQq+IWVrQDxAYQC/1SsYOI4pOxKZrfifiUSbDUisif7XlpGIPufXd/uvdvZm760M0no1FZcnrzUdjw7au3vu/BVgAFLXeuTxhTXVAAAAAElFTkSuQmCC ") left top no-repeat;
	
}

.nowrap {
  white-space: nowrap ;
}

div.fileList {
	padding: 20px;
}

html, body {
    width: 100%;
    height: 100%;    
    margin: 0;
    padding: 0;
}

table.FileList {
    border-collapse: collapse;
    margin: 20px;
  }

  table.FileList th {
    text-align: left;
    font-weight: bold;
  }
  
  table.FileList td {
    border: 0px solid #000;
  }
  
table.FileList tr.heading{
    border-bottom: 1px solid black;
}

<table class="FileList">
        <tr class="heading"><th>Archive</th></tr>
            <tr><td>&nbsp;</td></tr>
            <tr><td><span class="icon icon_dir nowrap">&nbsp;</span><span class="nowrap"><a class="icon" href="http://localhost/browse?year=2018">2018</a></span></td></tr>
            <tr><td><span class="icon icon_dir nowrap">&nbsp;</span><span class="nowrap"><a class="icon" href="http://localhost/browse?year=2017">2017</a></span></td></tr>
            <tr><td><span class="icon icon_dir nowrap">&nbsp;</span><span class="nowrap"><a class="icon" href="http://localhost/browse?year=2016">2016</a></span></td></tr>
            <tr><td><span class="icon icon_dir nowrap">&nbsp;</span><span class="nowrap"><a class="icon" href="http://localhost/browse?year=2015">2015</a></span></td></tr>
            <tr><td><span class="icon icon_dir nowrap">&nbsp;</span><span class="nowrap"><a class="icon" href="http://localhost/browse?year=2015">2014</a></span></td></tr>            
    </table>

Solution 4

You can't use IE conditional comments but you can use hacks. This page of CSS hacks explains IE hacks you can use (and more).

Solution 5

IE stylesheet hacks

.Class {
   color:  green;     /* standard */
   color:  green\9;   /* IE 8 and below */
   *color: green;     /* IE 7 and below */
   color:  green !ie; /* IE 7 and below */
   _color: green;     /* IE 6 */
}

View more solutions

96,853

Author by

Dexter Schneider

Updated on May 24, 2020

Comments

Dexter Schneider about 4 years
I know that you can use an IE conditional comment inside HTML:
```

```
But what if I want to target only IE in a stylesheet, setting up a css rule for a specific element inside the html. For example, you can use this Chrome/Safari hack inside the css file as css code...
```
@media screen and (-webkit-min-device-pixel-ratio:0) {
    .myClass{
        background: #fff;
        background:rgba(255,0,255,0.7);
    }
}
```
But using the IE hack inside the CSS stylesheet like this:
```
 
```
does not work. What do I use inside a stylesheet to target IE only?