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

Will willthemoor at gmail.com
Wed Jul 30 00:44:35 CDT 2008

I just stick it all in a single css file, using * hacks.  Mostly for
maintenance reasons at this point.  When I aim to edit #my-list, I want to
go to a single spot in a single css file.  Plus, I subscribe to the "all
hacks in one dirty little spot" way of thinking.

This has been vacillating over the years for me.  One style sheet to ten
style sheets and now back down to one (well, plus print).

On Tue, Jul 29, 2008 at 12:31 PM, Geoffrey Knutzen <geoffreyk at seanet.com>wrote:

> >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
> --
> * * Please support the community that supports you.  * *
> http://evolt.org/help_support_evolt/
> For unsubscribe and other options, including the Tip Harvester
> and archives of thelist go to: http://lists.evolt.org
> Workers of the Web, evolt !

More information about the thelist mailing list