Setting styles for IE8> using IE Helper Conditionals

[jonhurrell]

So I've created an IE8 stylesheet which is linked via a conditional comment, am I correct in setting the flags, then importing in my main stylesheet again?

$is-ie: true;
$ie-version: 8;
@import 'style';

However, this is going to request an additional download of the duplicate rule-set of the main stylesheet, with the IE specific output. This obviously isn't great for performance. Is this the intended method?

[dsingleton]

Hi Jon,

am I correct in setting the flags, then importing in my main stylesheet again?

That's correct, but it shouldn't result in additional download.

We use the approach outlined here to conditionally include one stylesheet for IE6, IE7, IE8 or IE9+/not-IE.

see https://github.com/alphagov/govuk_template/blob/master/source/views/layouts/govuk_template.html.erb#L9-L12:

    <!--[if gt IE 8]><!--><link href="<%= asset_path "govuk-template.css" %>" media="screen" rel="stylesheet" type="text/css" /><!--<![endif]-->
    <!--[if IE 6]><link href="<%= asset_path "govuk-template-ie6.css" %>" media="screen" rel="stylesheet" type="text/css" /><![endif]-->
    <!--[if IE 7]><link href="<%= asset_path "govuk-template-ie7.css" %>" media="screen" rel="stylesheet" type="text/css" /><![endif]-->
    <!--[if IE 8]><link href="<%= asset_path "govuk-template-ie8.css" %>" media="screen" rel="stylesheet" type="text/css" /><![endif]-->

This will result in 4 different CSS files being generated, but only one should be downloaded by a user. If you're following the same pattern in your application CSS files you'll need to repeat the conditional logic.

Does that help?

[jonhurrell]

Thanks @dsingleton. I was missing this little hack ;)
<!--[if gt IE 8]><!--><!--<![endif]-->

[dsingleton]

@jonhurrell No worries - it's not very clear in our docs, and we should improve it. What would you have found useful, in terms of docs, or examples, or something else?

[jonhurrell]

Some comments here, would have helped. I know of a fair amount of projects that have approached IE/main stylesheets linking similar to my original intent e.g.:

<link rel="stylesheet" href="{{asset_path}}css/style.min.css">
<!--[if IE 8]><link href="{{asset_path}}css/style-ie8.min" media="screen" rel="stylesheet" type="text/css" /><![endif]-->