CSS Alternative Style Sheets

March 9, 2008 2:37 PM

Do the contents of alternative style sheets load when they are not the active style sheet?

I understand that background images in style sheets all load when embedded in a common style sheet--this is why you have additional style sheets if you use (for example) different background images for various pages of a website, to prevent a page from having to load images it has no need to display.

My question: Are the background images in all style sheets requested on page load, or only those in the current active style sheet? For example, if my main style sheet has

#dork { background: url("bg.jpg"); }

and I have a couple of alternative style sheets for users to choose from, all of which contain some variation on

#dork { background: url("bg2.jpg"); }

are all of those different background images for "dork" loaded no matter what, or only the "dork" background image in the currently selected sheet? To use an extreme example, you could have 100 alternative style sheets each calling a different 50K image. Not a big deal if they're only loaded when requested, but internet-exploding if they all are called at once.

posted by maxwelton to computers & internet (9 comments total)

Why not just clear your cache, load an example page and then either check your cache for the alternate images or packet sniff the whole transaction to see if your browser downloads them. I'm guessing that this behavior may be different across browsers and/or platforms.
posted by datacenter refugee at 2:53 PM on March 9

>I'm guessing that this behavior may be different across browsers and/or platforms.

That would be my guess too, but probably, they only load when needed, to save on bandwidth.

I tested this kind of thing once -- not with alternate style sheets, but with otherwise-unused images in a shared stylesheet.

Say you have a two-page website and the two pages share a stylesheet.

That stylesheet lists a different background image for page two. Does that background image load when you come to page one?

Every browser except IE5 for Mac ignored the second image (you can see how long ago this was).

Interestingly, I got to ask IE5 Mac architect Tantek Celik about it once and he pointed out that while loading non-required images appeared to speed up browsing, it was also something of a security issue. By referring to images elsewhere on the internet and examining whether your browser needs to load them or not, you can determine some things about browsing history. So browsers shouldn't do it.
posted by AmbroseChapel at 3:09 PM on March 9

By referring to images elsewhere on the internet and examining whether your browser needs to load them or not, you can determine some things about browsing history.

I don't get this.

Let's say I'm nefarious, and running a server on website X. A user requests a page from my server. I give it back, and include a link indicating that it should load a stylesheet.

The user then requests that stylesheet. In it, I have references to images on websites Y and Z.

Unless I'm misunderstanding what you're saying this guy was saying, the supposed problem is that I can now tell whether or not that user has already downloaded those images?

How?

The requests for those images would go to servers Y and Z, not to me.
posted by Flunkie at 3:32 PM on March 9

Flunkie: It doesn't necessarily have to be images. For more information.
posted by o0o0o at 5:34 PM on March 9

Use a web sniffer or proxy like Charles or Web Developer add-on for Firefox.
posted by rhizome at 8:41 PM on March 9

How are you doing the alternate stylesheets? If it is via javascript writing a new style tag, it'll only load on demand, if it's php writing a different stylesheet, it'll be on demand, and I'm not sure if there is a pure css dynamic way of doing that, but that could go either way. Test in firefox with the firebug plugin, and watch the "console" tab which shows all the files being requested.
posted by cschneid at 9:16 PM on March 9

If you're using alternate stylesheets by using separate &ltlink> tags, then yes, all of them will load, even if you specify one as "alternate".
posted by Civil_Disobedient at 5:15 AM on March 10

Argh, <link> tags.
posted by Civil_Disobedient at 5:15 AM on March 10

Oops, sorry everyone, got caught up in something else and forgot this. Bah. I appreciate the replies and I'll run some tests myself to see how it works.

In firefox, anecdotally, when I put a few large images in alternate css sheets, they don't seem to be cached until you've been to each version of the sheet at least once, which suggests they don't load until you switch the sheet. Dunno.
posted by maxwelton at 4:50 PM on March 17