CODEWITHSUNDEEP
htmlcssinternet-explorer
Atma
Atma

Reputation: 29767

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

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?

Upvotes: 0

Views: 129

Answers (2)

eat-sleep-code
eat-sleep-code

Reputation: 4855

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.

Upvotes: 2

Miro
Miro

Reputation: 8650

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
}

Upvotes: 1

Related Questions