CODEWITHSUNDEEP
javascript.netcssminify
Sachin Kainth
Sachin Kainth

Reputation: 46740

How to minify and combine commented out css files

I have these conditional css files

<!--[if IE 7]><link rel="stylesheet" type="text/css" media="all" href="/Content/css/ie7.css" /><![endif]-->    
<!--[if IE 6]><link rel="stylesheet" type="text/css" media="all" href="/Content/css/ie6.css" /><![endif]-->

How do I minify these as these should only be included for IE7 and IE6 respectively?

Upvotes: 1

Views: 381

Answers (2)

Matt Wrock
Matt Wrock

Reputation: 6640

I wrote and use an OSS project called RequestReduce that automatically examines your outgoing response and looks for css and javascript to bundle and minify. This tool is used on several Microsoft owned properties and is gaining strong adoption in the community. It addresses this very issue just as thirtydot advises by leaving conditionally commented css and javascript alone. It really isn't worth the trouble to bundle these since the populations using those versions is small and shrinking every day. Those who are not using IE6 or 7 will not pull down these styles at all and are therefore unaffected. Its also particularly challenging to bundle them because you would have to emit a different bundle at runtime based on the visitor's user agent. While RequestReduce would be capable of doing that, there are more value added features I could be spending my time on.

Upvotes: 1

thirtydot
thirtydot

Reputation: 228162

In other words I should minify and combine these also?

That's the opposite of what I'm saying.

There's no point spending time optimizing for dying web browsers.

What you already have works, and is good enough:

<!--[if IE 7]><link rel="stylesheet" type="text/css" media="all" href="/Content/css/ie7.css" /><![endif]-->
<!--[if IE 6]><link rel="stylesheet" type="text/css" media="all" href="/Content/css/ie6.css" /><![endif]-->

If you like, you can minify ie7.css and ie6.css to reduce the file size slightly, but these files should be relatively small already, being that they only contain a few fixes for IE6/7.

If you really want to get rid of these files, then you could include the fixes at the bottom of your main CSS file by using CSS hacks (valid hacks, in this case, so there's no risk of your minifier screwing them up).

For example, if you had this:

ie6.css:

.something {
    width: 100px;
}

ie7.css:

.something .else {
    float: left;
}

You could remove those files completely if you added this at the bottom of your main CSS file:

/* IE6 fixes */
* html .something {
    width: 100px;
}

/* IE7 fixes */
*+html .something .else {
    float: left;
}

More info here: http://en.wikipedia.org/wiki/CSS_filter#Star_HTML_hack

Upvotes: 2

Related Questions