Conditional stylesheets for IE

[Andrew Davey]

Here's a quick treat I had to sneak in before 1.0 ;) ...

v0.9.5 supports conditional stylesheets - for including IE specific stylesheets in a page.

In CassetteConfiguration:

bundles.Add<StylesheetBundle>("styles/ie-hacks", b => b.Condition = "lt IE 9");

When rendered in the page, you'll get:

<!--[if lt IE 9]>

<link href="the-cassette-url" type="text/css" rel="stylesheet"/>

<[endif]-->

[Chris Marisic]

Upvote

[Nick]

Is it still the way to go to include a conditional stylesheet? Or is there a better way now?

[Nick]

and how can I have in the same bundle a file named site.css (always included) and a conditional file named site.ie.css used only for IE?

[Andrew Davey]

The StylesheetBundle Condition property is still the thing to use.

However, it does need to be a distinct bundle from your other styles.

[Daniel Lo Nigro]

This is great for loading jQuery 1.9 for legacy IE and jQuery 2.0 for modern browsers:

// Load either jQuery 1.9 or 2.0 depending on whether the browser is IE

bundles.Add<ScriptBundle>("_js/jquery-1.9", new[] { "~/_js/jquery-1.9.1.js" }, bundle => bundle.Condition = "lt IE 9");

bundles.Add<ScriptBundle>("_js/jquery-2.0", new[] { "~/_js/jquery-2.0.0.js" }, bundle => bundle.Condition = "(gte IE 9)|!(IE)");

Then just reference both bundles.