How to fallback to the local stylesheet when CDN fails ?
Last Updated :
20 Jun, 2022
This article will teach us to fall back to the local stylesheet if CDN fails. Programmers use the UI libraries by embedding CDN to the HTML template to style the application, but sometimes it fails to load due to some error. In this scenario, we can create the default CSS file and load styles from that file.
Problem: Users can go through the below code and check that when the stylesheet CDN fails to load how UI looks like.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Fallback StyleSheet</title>
<link rel="stylesheet" href=
</head>
<body>
<div class="content">
<h2>GeeksforGeeks</h2>
<button class="btn btn-primary"
type="submit">Geeks</button>
<button class="btn btn-primary"
type="submit">for</button>
<button class="btn btn-primary"
type="submit">Geeks</button>
</div>
</body>
</html>
|
Output:
In the above output, users can see that if we don’t fall back to the default stylesheet when an error occurs with CDN, all style has been gone and the UI of the application looks weird.
We can have different approaches to fall back on the local stylesheet to overcome the above problem:
Approach 1: In this approach, we will change the URL of the stylesheet to the default stylesheet path if any error occurs.
Example: User needs to add below code in respective files.
- Index.html: In this file, we are using the onerror attribute of the <link> to fall back to the default stylesheet when an error occurs.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Fallback StyleSheet</title>
<link rel="stylesheet" href=
"hrap@3.3.7/dist/css/bootstrap.min.css"
onerror="this.onerror=null;this.href='style.css';" />
</head>
<body>
<div class="content">
<h2>GeeksforGeeks</h2>
<button class="btn btn-primary"
type="submit">Geeks</button>
<button class="btn btn-primary"
type="submit">for</button>
<button class="btn btn-primary"
type="submit">Geeks</button>
</div>
</body>
</html>
|
- Style.css: In this file, we have added the default CSS style. It is the local stylesheet.
CSS
body {
font-family: Arial;
}
.content {
color: green;
text-align: center;
border: 10px dotted red;
height: 200px;
width: 400px;
}
h2 {
font-size: 30px;
}
button {
display: inline-block;
width: 120px;
height: 40px;
background-color: orange;
color: yellow;
font-size: 20px;
border-radius: 12px;
border: none;
}
|
Output:
Users can see in the above output how the styles of the local CSS file are applied when CDN fails to load.
Approach 2: In this approach, we will use JavaScript. We will create the JavaScript which will be called when any kind of error occurs in the stylesheet CDN. Our function will create a new <link> tag and set the path of the default stylesheet as a value of href attribute. After that, we will append the newly created link tag into the <head> section.
Example: Add the below code to the respective files.
- Index.html: In this file, we have added the javascript function which we call using the onerror attribute.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Fallback StyleSheet</title>
<link rel="stylesheet" href=
"hrap@3.3.7/dist/css/bootstrap.min.css"
onerror="setonFallBack()" />
</head>
<body>
<div class="content">
<h2>GeeksforGeeks</h2>
<button class="btn btn-primary"
type="submit">Geeks</button>
<button class="btn btn-primary"
type="submit">for</button>
<button class="btn btn-primary"
type="submit">Geeks</button>
</div>
<script type="text/javascript">
// function set default css file when CDN fails
function setonFallBack() {
// create new link tag
const link = document.createElement('link');
link.href = 'style.css';
link.rel = 'stylesheet';
// add link tag to head section
document.getElementsByTagName('head')[0]
.appendChild(link);
}
</script>
</body>
</html>
|
- Style.css: In this file, we have added the default CSS style. It is the local stylesheet.
CSS
body {
font-family: Arial;
}
.content {
color: green;
text-align: center;
border: 10px dotted red;
height: 200px;
width: 400px;
}
h2 {
font-size: 30px;
}
button {
display: inline-block;
width: 120px;
height: 40px;
background-color: orange;
color: yellow;
font-size: 20px;
border-radius: 12px;
border: none;
}
|
Output:
Users can see in the above output how the styles of the local CSS file are applied when CDN fails to load.
Share your thoughts in the comments
Please Login to comment...