[thelist] Inline vs. files for conditional IE CSS?

[Geoffrey Knutzen]

>From: Bill Moseley <moseley at hank.org>
>Subject: [thelist] Inline vs. files for conditional IE CSS?


>I'm on a small quest to reduce the number of css files loaded on a
>site by removing @import from css files and instead concatenating the
>css files by media type and then using YUI compressor to serve them as
>single files as much as possible.  (They are gzipped, and have huge
>expires times, too.  Plan to move to a CDN at some point as well).

>There's also a number of IE conditionals:

    <!--[if IE]>
        <style type="text/css">
            @import "ie.css";
        </style>
    <![endif]-->

>In most cases there's an [if IE] and also [if IE 6] and [if IE 7]
>and those are typically very small files (with a single rule or two).

>This is probably hard to answer, but I'm tempted to inline those
>smaller css files instead of loading them with a separate request.

>But, that will make the pages slightly larger -- for all requests
>instead of just the first page load (which fetches and caches the css
>file).

>Perhaps this is premature optimization, but I'm curious if there's any
>magic size where it makes sense to have the small chunk of css in a
>file vs. placing the css inline in the markup.

>BTW -- any reason to use @import above instead of <link>?

Here is how I am doing this.
Instead of an ie.css, ie7.css and ie6.css, I only have an ie_7.css and
ie_7_6.css.
I think of these files as "overrides". Ie_7.css will overwrite whatever is
the normal css, and ie_7_6.css will overwrite the normal css and ie_7.css.
On ie7, I conditionally include only ie_7.css. On ie6, I conditionally
include both ie_7.css and ie_7_6.css. In the past, I would include both
files separately, but recently, I have been combining them into one
download.

This approach has been very successful for me. 

I have not yet started to support ie8, but my guess is that ie8's css needs
will be quite a bit different than those of ie7/6. That is one of the
reasons I didn't want to have a conditional comment that loaded up something
for ALL versions of IE, as this would probably not be what I wanted for IE8

These files are used site-wide for me, so they are a bit too big to include
inline on every page.

I can't think of any reason to use @import. Someone else may have a reason.

-Geoff