Use local css file if link to online css file is dead

Question

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 to times.

Then my website looks creepy and i don't need that.

So i have a local copy of the w3.css on the computer and up to the server which is holding the website.

Online:

<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">

Local:

<link rel="stylesheet" href="../css/w3.css">

The question:

How i know when the link which i am pointing on w3schools is dead,so i can use the local w3.css file.How i can do that?

1)Detect if broken

2)Use the local css before the website has been loaded

Finally

What big companies are doing for that?If 3-4 WebServices go down the whole company is going down.....

I am new to web developing so..Thank you...

Edit:(I have something in mind)

Loading the local(...site in on a server,that local i mean) and the w3schools file , but that will increase the site loading...

@Mahi Can you provide an example?I will find it very useful.Like how i will change <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"> to work ?What i will add to stylesheet?Thanks.. — GOXR3PLUS
– GOXR3PLUS, Commented Nov 5, 2016 at 16:16
I think using it from W3Schools.com will be better cause i have a chance that the file is downloaded from another user somewhere near...The server i use is for example Canada, and W3Schools has many servers here and there. — GOXR3PLUS
– GOXR3PLUS, Commented Nov 5, 2016 at 17:41

T K · Accepted Answer · 2016-11-05 16:30:10Z

2

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/

edited Nov 5, 2016 at 16:30

answered Nov 5, 2016 at 16:27

T K

6281 gold badge7 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

GOXR3PLUS Over a year ago

I have to add it on every html page i have,right?Or i can add it on a php file and call it?If so let me know... :)

tmslnz Over a year ago

isDomainAvailible what's this? Where is it defined?

T K Over a year ago

@GoXR3Plus Yes.

mmenschig Over a year ago

keep in mind that you have a typo in isDomainAvailible()

Mahi · Accepted Answer · 2016-11-05 16:47:04Z

1

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"); } );

answered Nov 5, 2016 at 16:47

Mahi

1,72513 silver badges22 bronze badges

4 Comments

mmenschig Over a year ago

This doesn't answer the question nor does it explain anything. It may very well be that the logo of w3 is accessible yet the stylesheet is not.

Mahi Over a year ago

@mmenschig so OP can put the if else condition and in if condition use w3 stylesheet and in else condition use custom stylesheet

mmenschig Over a year ago

so why don't you edit your post so it does what you're saying.

Mahi Over a year ago

@mmenschig Op asked two different question . i answered for 1st .

mmenschig · Accepted Answer · 2016-11-05 16:55:28Z

0

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

edited Nov 5, 2016 at 16:55

answered Nov 5, 2016 at 16:33

mmenschig

1,12814 silver badges24 bronze badges

5 Comments

GOXR3PLUS Over a year ago

Thanks for recommendation.Shouldn't it be into a method so i can call it from every html page?

GOXR3PLUS Over a year ago

Thanks! i got it,i need you provide the best solution you have in mind, i mean if it was your website which it has 5 html pages(simple enough) how do you call this method? you add these lines into every html page or you wrap it into a method save it into an .js file and call it from the <head> using the name of the method.I really need to know it. :)

GOXR3PLUS Over a year ago

I need it to be more general, accepting two variablesfunction checkStatus(online, local) {..},online and local url,and then check if online is available , if not use the local.Yours is working well but imagine that i have and another css files like this.Providing it i will accept the answer :)

mmenschig Over a year ago

Ok, this is actually easy to do. I will edit my answer shortly.

GOXR3PLUS Over a year ago

The W3Schools is online now , i tried your solution modifying everywhere w3.css with w2.css to check if it works,but it doesn't :( . Entering the first if(sheet.href=='....' but then nothing...I added to alerts one after the first if and one after the second if if (rules.length == 0).The first alert works the second not... Seems that it doesn't pass from the ternary expression var rules = sheet.rules ? sheet.rules : sheet.cssRules;

Collectives™ on Stack Overflow

Use local css file if link to online css file is dead

3 Answers 3

4 Comments

4 Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

4 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related