Thursday, February 10, 2011

having a 'backup' css file?

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.

  • 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.

    Nick Johnson : I'm not even sure that's possible - how would the JS determine if the first stylesheet existed?
    James Burgess : I said server-side. Not JavaScript.
    Nick Johnson : My mistake. One would think that if he can do a server-side check, he can hopefully just upload it to the CDN, though. :)
    James Burgess : Well that depends on whether he has access to the remote server, and whether he means the second sheet is local as in client-side, or local as in local to his server!
  • This can be achieved by java script. code should be like this

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

    where loadcss is fuction checks if css is loaded or not

    Aaron Digulla : Um ... this is a correct answer. Why the vote down? You might not like it but that doesn't make it wrong.
    pestaa : I suppose they have downvoted this not because it has to be corrected, but it has to be completed. In this form does it help the asker in any way?
    From Sharique
  • 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.

    musicfreak : Other way around. He wants to use the local one as a fallback only, so that doesn't work.
  • 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.

  • 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.

    naspinski : Not saying that it is not reliable, but I noticed at work, it is blocked, so no styles show up. I am assuming a lot of places may have the same block (firewall blocking web applications), but no thte site itself.
    naspinski : The problem is that my server can always reach my cdn, it is the user I am worried about... but I guess this might just be something I have to deal with.
    pestaa : Then I recommend you to have a look at ways you can prepare your website to be accessible. With well used accessibility rules, your site can be used without stylesheets.
    From pestaa
  • 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

    From

0 comments:

Post a Comment