Skip to content Skip to sidebar Skip to footer
Home / Css / Html / Javascript

Use Local Css File If Link To Online Css File Is Dead

Post a Comment
The problem: I am using w3.css(if you enter now w3schools.com site is down for maintenance) for styling my website.The problem here is that w3schools.com is going down from times

Solution 1:

Its possible with PHP. I haven't tested it but it should work.

Put this inside your <head> tag.

<?php

if (isDomainAvailible('http://www.w3schools.com')){
    echo '<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">';
} else {
    echo '<link rel="stylesheet" href="../css/w3.css">';
}

//returns true, if domain is availible, false if not
   function isDomainAvailible($domain)
   {
           //check, if a valid url is provided
           if(!filter_var($domain, FILTER_VALIDATE_URL))
           {
                   return false;
           }

           //initialize curl
           $curlInit = curl_init($domain);
           curl_setopt($curlInit,CURLOPT_CONNECTTIMEOUT,10);
           curl_setopt($curlInit,CURLOPT_HEADER,true);
           curl_setopt($curlInit,CURLOPT_NOBODY,true);
           curl_setopt($curlInit,CURLOPT_RETURNTRANSFER,true);

           //get answer
           $response = curl_exec($curlInit);

           curl_close($curlInit);

           if ($response) return true;

           return false;
   }

?>

Reference: https://css-tricks.com/snippets/php/check-if-website-is-available/


Solution 2:

for check if w3.css is working you can use something like this. instead of src put w3.css image of logo or something .

function checkImage (src, up, down) {
    var img = new Image();
    img.onload = up; 
    img.onerror = down;
    img. src = src;
}

checkImage( "https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png", function(){ alert("up"); }, function(){ alert("down"); } );

Solution 3:

Why not use JS like this?

<script type="text/javascript">
$.each(document.styleSheets, function(i,sheet){
  if(sheet.href=='http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.css') {
    var rules = sheet.rules ? sheet.rules : sheet.cssRules;
    if (rules.length == 0) {
      $('<link rel="stylesheet" type="text/css" href="path/to/local/jquery.mobile-1.0b3.min.css" />').appendTo('head');
    }
 }
})
</script>

$.each(document.styleSheets) iterates through the styleSheets of the document. Check out https://developer.mozilla.org/en-US/docs/Web/API/Document/styleSheets for more info.

Then we specifically check if http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.css is accessible. We use the ternary operator var rules = sheet.ruless ? sheet.rules : sheet.cssRules; The ternary operator works similar to an if statement, rules becomes sheet.rules if sheet.rules evaluates to true. If it is false it will become sheet.cssRules.

Lastly we check if there's anything in rules. If there isn't, we fallback to our local stylesheet solution and add it to the <head></head> of the document.

Although you may run into issues when using a very slow to load CDN. Alternatively you could use the onerror event


You may like these posts

Post a Comment for "Use Local Css File If Link To Online Css File Is Dead"