having a 'backup' css file?

Question

Is there any way to call a stylesheet, and only if it is not available, call a stylesheet from another location?

Something like this:

<link rel="Stylesheet" type="text/css" href="http://cdn.somewhere.com/css/style.css" />
<link rel="Stylesheet" type="text/css" href="local/style.css" />

But only call the second one if the first is not available? I don't want to make 2 calls if it is unnecessary. Thank you.

EDIT: This is because I noticed at work, my CDN is blocked, so no styles show up but the site does. I am assuming a lot of places may have the same block (firewall blocking web applications). So then I would like to grab the css from the local copy.

Answer 1

It's not possible in pure HTML markup. However, you could do this server-side with a simple script, e.g. (pseudocode):

if first style does not exist:
    output <link> to second sheet
else
    output <link> to primary sheet

In reality, though, your style sheets are likely to be cached by the browser, so it's hardly putting a burden on the end-user. You could simply order the s so that the 'second' style sheet loads first, and the primary sheet loads second. This would cause the primary sheet to override anything in the secondary sheet... but if the primary sheet wasn't available, the secondary sheet would still work as intended.

Answer 2

JavaScript/AJAX is strongly not recommended due to its very unpredictable behavior (I'm not talking about cross-browser compatibility, but some users turned it off.)

If I were you, I'd check the existence of the first given CSS server side and insert the href accordingly.

Also keep in mind, that if you really have to use this kind of mechanism to make sure, then you're saying your servers are not reliable.

Answer 3

No, because LINK elements itself are static ("dumb"). So you either need JavaScript, GreaseMonkey (on Firefox but that's JavaScript, too) or you really have to ask for both.

The order must be different, though, IIRC: The same CSS rule will overwrite an earlier one. So you need to include the local file, first, and then load the external one. If the external one isn't available, your local copy will be used.

If you put the CSS file on the local harddisk, this will be pretty cheap.

That said, the browser will not always download the file. It will first check whether the copy in its cache is still current and if it is, it won't download the file again.

Answer 4

You could by default use the 'local.css' and use javascript (using ajax) to load the new one. If the request can load the new css file it'll ok, else, you just change anything.

Answer 5

Ehmm... You coudl use this:

I don't know if the alternate stylesheet is loaded when the first fails but you could try, if not sure, read this: A List Apart Tutorial for Changing Stylesheets

Answer 6

This can be achieved by JavaScript. Code should be like this:

if( loadcss(first.css) == false) loadcss(second.css);

where loadcss is function checks if css is loaded or not