Question

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?

Answer 1

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