CODEWITHSUNDEEP
css
clime
clime

Reputation: 8885

css conditional statements: include stylesheet for IE8+ and rest

I have this stylesheet:

<link rel="stylesheet" href="/static/web/bootstrap/css/bootstrap-responsive.min.css" />

And I want to include it for IE8+ and any other browser but not to include for IE7-. Is it possible?

EDIT: I have tried:

<!--[if (gte IE 8)|(!IE)]>
<link rel="stylesheet" href="/static/web/bootstrap/css/bootstrap-responsive.min.css" />
<![endif]-->

But that does not include the file under Firefox or Chrome (or any other browser than IE8+ I suppose)

EDIT2: In fact, I should include the file for IE9+ (not IE8+) because I have just found out not even IE8 supports media queries. Anyway this does not matter in terms of "how to do this stuff".

Upvotes: 0

Views: 655

Answers (2)

Sachin
Sachin

Reputation: 40970

There are some special syntax in Conditional Comments

gt: greater than
lte: less than or equal to

So you can use them to filter.

<!--[if gt IE 7]>
<link rel="stylesheet" href="/static/web/bootstrap/css/bootstrap-responsive.min.css" />
<![endif]-->

Conditional Comments also supports multiple condition using AND(&) or OR(|) operator

<!--[if (gt IE 7)|(!IE)]>
    <link rel="stylesheet" href="/static/web/bootstrap/css/bootstrap-responsive.min.css" />
    <![endif]-->

Upvotes: 2

coulbourne
coulbourne

Reputation: 529

Include your Old IE CSS file in a conditional statement, then include your normal CSS file

<!--[if lt IE 9]>
<link rel="stylesheet" href="/static/web/bootstrap/css/OLD-IE.css" />
<![endif]-->
<link rel="stylesheet" href="/static/web/bootstrap/css/bootstrap-responsive.min.css" />

Upvotes: 0

Related Questions