In the event that the link to the online CSS file is no longer working, utilize the local

Question

In the event that the link to the online CSS file is no longer working, utilize the local

The issue:

Currently, I am utilizing the w3.css to style my website. However, there is a recurring problem with the stability of the w3schools.com site.

Whenever the site goes down for maintenance, it affects the appearance of my website in a negative way.

To mitigate this issue, I have stored a local copy of the w3.css on my computer and server hosting my website.

Online Link:

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

Local Link:

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

The question at hand:

How can I detect when the link pointing to w3schools is inactive? This would prompt me to switch to the local w3.css file. Any suggestions on how to achieve this?

1)Check for broken links

2)Load the local css before the main website loads

In conclusion

Have major corporations found effective solutions for this issue? If multiple critical webservices go offline, it could spell catastrophe for the entire company...

Being new to web development, any advice or insights are greatly appreciated. Thank you.

Edit:(Consideration)

Is it possible to load both the

local(...site hosted on a server)

and w3schools files simultaneously, even though this may impact site loading times?

javascript html css

Answer 1

Answer №1

You can achieve this functionality using PHP. Although I haven't personally tested it, it is likely to work.

Simply place the following code snippet inside the <head> tag of your HTML document:

<?php

if (isDomainAvailable('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">';
}

// Function to check if a domain is available
function isDomainAvailable($domain)
{
    // Check if a valid URL is provided
    if (!filter_var($domain, FILTER_VALIDATE_URL))
    {
        return false;
    }

    // Initialize cURL for making HTTP requests
    $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 response from the server
    $response = curl_exec($curlInit);

    curl_close($curlInit);

    // If response exists, domain is available
    if ($response) return true;

    return false;
}

?>

For more information on this topic, you can refer to: https://css-tricks.com/snippets/php/check-if-website-is-available/

Answer 2

You can achieve this functionality using PHP. Although I haven't personally tested it, it is likely to work.

Simply place the following code snippet inside the <head> tag of your HTML document:

<?php

if (isDomainAvailable('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">';
}

// Function to check if a domain is available
function isDomainAvailable($domain)
{
    // Check if a valid URL is provided
    if (!filter_var($domain, FILTER_VALIDATE_URL))
    {
        return false;
    }

    // Initialize cURL for making HTTP requests
    $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 response from the server
    $response = curl_exec($curlInit);

    curl_close($curlInit);

    // If response exists, domain is available
    if ($response) return true;

    return false;
}

?>

For more information on this topic, you can refer to: https://css-tricks.com/snippets/php/check-if-website-is-available/

Answer 3

Answer №2

If you want to verify whether w3.css is functioning properly, you can execute a test similar to this one. Instead of "src", insert the URL for the w3.css image or any other logo.

function confirmImage (src, success, failure) {
    var imageCheck = new Image();
    imageCheck.onload = success; 
    imageCheck.onerror = failure;
    imageCheck.src = src;
}

confirmImage( "https://www.example.com/path/to/w3css/logo.png", function(){ alert("Success"); }, function(){ alert("Failure"); } );

Answer 4

If you want to verify whether w3.css is functioning properly, you can execute a test similar to this one. Instead of "src", insert the URL for the w3.css image or any other logo.

function confirmImage (src, success, failure) {
    var imageCheck = new Image();
    imageCheck.onload = success; 
    imageCheck.onerror = failure;
    imageCheck.src = src;
}

confirmImage( "https://www.example.com/path/to/w3css/logo.png", function(){ alert("Success"); }, function(){ alert("Failure"); } );

Answer 5

Answer №3

Have you considered using JavaScript in this way?

<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) loops through the styleSheets of the document. For more information, visit https://developer.mozilla.org/en-US/docs/Web/API/Document/styleSheets.

We then specifically verify if

http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.css

is accessible. Using the ternary operator

var rules = sheet.ruless ? sheet.rules : sheet.cssRules;

, where rules becomes sheet.rules if true or sheet.cssRules if false.

Lastly, we confirm if there are contents in rules. If not, we resort to our local stylesheet solution and include it in the <head></head> section of the document.

It's important to note that issues may arise when utilizing a slow-loading CDN. An alternative could be implementing the onerror event.

Answer 6

Have you considered using JavaScript in this way?

<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) loops through the styleSheets of the document. For more information, visit https://developer.mozilla.org/en-US/docs/Web/API/Document/styleSheets.

We then specifically verify if

http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.css

is accessible. Using the ternary operator

var rules = sheet.ruless ? sheet.rules : sheet.cssRules;

, where rules becomes sheet.rules if true or sheet.cssRules if false.

Lastly, we confirm if there are contents in rules. If not, we resort to our local stylesheet solution and include it in the <head></head> section of the document.

It's important to note that issues may arise when utilizing a slow-loading CDN. An alternative could be implementing the onerror event.

In the event that the link to the online CSS file is no longer working, utilize the local

Answer №1

Answer №2

Answer №3

Similar questions

Simple steps for importing JS files in a web application

The layout of an Angular Material page gets disrupted when a sticky "header" with md-select options is used in combination with the md-backdrop

Tips for Altering Information within a Text Box

A guide on incorporating dynamic information into JSON files with PHP

Changing the data type of an integer to a string within an Object

Issue with flickering scroll-snap in React component with useState

The hover effect is functional on the majority of browsers, with the exception of Safari and Chrome on a Mac computer

What is the reason behind WP AJAX consistently returning a value of 0?

What are some ways to create a larger-than-life mui button size?

How to use PHP for setting up a MySQL database?

What is the method for retrieving the current value of a BehaviorSubject just once?

Safari's CSS Hacking Problem

Using Flask and jQuery to dynamically load a new template once a thread has completed running

Activate mouseover function automatically for each feature on the leaflet

Execute JavaScript with URL parameters prior to finishing Page load

Another option for document.execCommand('selectAll',false,null)

In JavaScript, the handleSubmit function is effective, whereas in TypeScript React, it presents some

Changing Meteor Template to a Node.js/AngularJS Conversion

div not recognizing the minimum height specified in percentage

Resetting clears the date default value