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.