CODEWITHSUNDEEP
cssinternet-explorerconditional-statements
sandraqu
sandraqu

Reputation: 1528

Consolidate CSS IE calls

Is there a way to call IE conditionals from within CSS? I want to avoid calling a long string of IE css files from my code.

<!--[if IE 7]>
<link href="ie7.css" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if IE 8]>
<link href="ie8.css" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if gt IE 8]>
<link href="ie-gt-8.css" rel="stylesheet" type="text/css" />
<![endif]-->

and would like to have one call

    <!--[if IE]>
    <link href="ie.css" rel="stylesheet" type="text/css" />
<![endif]-->

and have the conditionals within the css file. Is that possible or is Paul Irish the way to go?

I tried applying the "advanced rules" suggested in this article

#column_right {
float:left;
width:250px;
margin-left:-250px;
[if IE 6] ie6: 100%;
[if lt IE 6] lt-ie6: 100%;
[if lte IE 6] lte-ie6: 100%;
[if ! lte IE 6] not-lte-ie6: 100%;
}
#footer {
clear: left;
width: 100%;
[if IE 5.0] padding: 10px 0px;
[if IE 5.5] margin-bottom: 40px;
}

[if IE 5] .box {
width: 200px;
padding: 100px;
margin: 100px;
}

but this doesn't work for me. I tried something basic, like 

[if IE 7] background-color: red;
[if IE 8] background-color: yellow;

Upvotes: 1

Views: 1107

Answers (3)

HandiworkNYC.com
HandiworkNYC.com

Reputation: 11104

Use the conditional code to add a class to the HTML element. Then use that class to select elements only for the version of ie.

<!doctype html>

<!--[if lt IE 7 ]> <html class="no-js ie" lang="en"> <![endif]-->
<!--[if IE 7 ]>    <html class="no-js ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]>    <html class="no-js ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--> <html class="no-js" lang="en"> <!--<![endif]-->

.ie8 body {width: 98%}
.ie7 body {width: 100%}
.ie body {width: 50%}

In ie8, the body element will have 98% width, in ie7, 100% width, and in IE6 and lower, 50%.

Upvotes: 3

Matt
Matt

Reputation: 1186

You could also try loading the CSS dynamically on the server side. Get the user agent from the request object, if they are using IE version x, append CSS files 1, 2, 3 concatenated together. Just make sure that mime type of the response is CSS or plain text...

Upvotes: -1

LoveAndCoding
LoveAndCoding

Reputation: 7947

No. That is not possible. But it is possible (sometimes) to code for all IEs and consolidate your code. Conditional comments don't exist in IE, but there are hacks however I would not recommend these, ever!

Upvotes: 0

Related Questions