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.

<?phpif (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 notfunctionisDomainAvailible($domain)
   {
           //check, if a valid url is providedif(!filter_var($domain, FILTER_VALIDATE_URL))
           {
                   returnfalse;
           }

           //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) returntrue;

           returnfalse;
   }

?>

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 .

functioncheckImage (src, up, down) {
    var img = newImage();
    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?

<scripttype="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

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