[thelist] Inline vs. files for conditional IE CSS?
Geoffrey Knutzen
geoffreyk at seanet.com
Tue Jul 29 14:31:43 CDT 2008
>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
More information about the thelist
mailing list