Option to contain *only* styles hidden in Media Queries in style-legacy.css

[machal]

I mean this scenario:

<link rel="stylesheet" href="css/style.css">
<!--[if lte IE 8]><link rel="stylesheet" href="css/style-legacy.css"> <![endif]-->

Why?

• In most projects I prefer this way because it doesn't require the closing of default CSS file in the comments.
• I have project where I want to give user the choice of whether to support IE8 or not. Supporting IE8 can be done by adding one <link…> in HTML file then.

It could be done as option in grunt-legacssy.

[robinpokorny]

Please note, that this is an unsafe operation. The author should keep in mind what will happen to their stylesheet.

Example:

/*
 * Button - a base component
 */
.btn {
    width: 50%;
}

@media only screen and (min-width: 50em) {
    .btn {
         width: auto;
    }
}

/*
 * Login form - a compound component
 */
.login__btn {
    width: 100%;
}

In the mark-up:

<a class="btn login__btn">Log in</a>

Then, of course, on desktop (e.g. in Chrome) the login button would be 100% wide.

IE8 would however see this style:

.btn {
    width: 50%;
}

/* Here was the media query, ignored by IE8 */

.login__btn {
    width: 100%;
}

/* The legacssy file, with the "media" style */
.btn {
    width: auto;
}

So in IE8 the login button's width would be auto!