How can I write CSS that only applies to specific browsers? - html

Question

I have a line of CSS that acts differently in IE than it does for every other browsers. I want this line to look like this in all browsers:
.header-ie .wrapper-ie:after {
position:absolute;
bottom:-33px;
width:100%;
height:34px;
content:"";
left:0;
background:url(../shadow-bg.png) no-repeat center;
background-size:100% auto;
pointer-events:none
}
I want it to look like this in IE (9 or lower):
.header-ie .wrapper-ie:after{
position:absolute;
bottom:-250px;
width:100%;
height:34px;
content:"";
left:0;
background-size:100% auto;
pointer-events:none
}
How can I accomplish this in my style sheet?

Answer 1

In your HTML page, you can implement a conditional CSS file. Call this after you have called you other stylesheet(s).
<link rel="stylesheet" href="/style/site.css" />
<!--[if lte IE 9]>
<link rel="stylesheet" href="/style/ie-legacy.css" />
<![endif]-->
You may need to decorate the classes attributes in the ie-legacy.css with an !important.
NOTE: IE9 (and lower) will no longer receive security or feature updates from Microsoft after January 12, 2016.

Answer 2

If you only want to change 1 or 2 things, you can use per-propery hack:
From: http://codemug.com/html/css-hacks-for-ie6ie7ie8ie9-and-ie10/
#hack{
color:red; /* All browsers */
color:red !important;/* All browsers but IE6 */
_color:red; /* Only works in IE6 */
*color:red; /* IE6, IE7 */
+color:red;/* Only works in IE7*/
*+color:red; /* Only works in IE7 */
color:red\9; /* IE6, IE7, IE8, IE9 */
color:red\0; /* IE8, IE9 */
color:red\9\0;/*Only works in IE9*/
}
So you'll end up with
.header-ie .wrapper-ie:after {
position:absolute;
bottom:-33px;
bottom:-250px\9;
width:100%;
height:34px;
content:"";
left:0;
background:url(../shadow-bg.png) no-repeat center;
background:none\9;
background-size:100% auto;
pointer-events:none
}