Este artículo nos enseñará a recurrir a la hoja de estilo local si falla CDN. Los programadores utilizan las bibliotecas de la interfaz de usuario incorporando CDN a la plantilla HTML para diseñar la aplicación, pero a veces no se carga debido a algún error. En este escenario, podemos crear el archivo CSS predeterminado y cargar estilos desde ese archivo.
Problema: los usuarios pueden revisar el siguiente código y verificar que cuando la hoja de estilo CDN no se cargue, cómo se ve la interfaz de usuario.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Fallback StyleSheet</title> <!--bootstrap fake CDN--> <link rel="stylesheet" href= "https://cdn.jselivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" /> <!--users can try this bootstrap original CDN and check style difference--> <!--<link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.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>
Producción:
En el resultado anterior, los usuarios pueden ver que si no recurrimos a la hoja de estilo predeterminada cuando ocurre un error con CDN, todo el estilo habrá desaparecido y la interfaz de usuario de la aplicación se verá rara.
Podemos tener diferentes enfoques para recurrir a la hoja de estilo local para superar el problema anterior:
Enfoque 1: en este enfoque, cambiaremos la URL de la hoja de estilo a la ruta de la hoja de estilo predeterminada si se produce algún error.
Ejemplo: el usuario debe agregar el siguiente código en los archivos respectivos.
- Index.html: en este archivo, usamos el atributo onerror de <link> para volver a la hoja de estilo predeterminada cuando se produce un error.
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';" /> <!-- original CDN --> <!-- <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity= "sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> --> </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: en este archivo, hemos agregado el estilo CSS predeterminado. Es la hoja de estilo local.
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;
}
Producción:
Los usuarios pueden ver en el resultado anterior cómo se aplican los estilos del archivo CSS local cuando falla la carga de CDN.
Enfoque 2: En este enfoque, usaremos JavaScript. Crearemos el JavaScript que se llamará cuando ocurra algún tipo de error en la hoja de estilo CDN. Nuestra función creará una nueva etiqueta < link> y establecerá la ruta de la hoja de estilo predeterminada como un valor del atributo href . Después de eso, agregaremos la etiqueta de enlace recién creada en la sección < head> .
Ejemplo: agregue el siguiente código a los archivos respectivos.
- Index.html: en este archivo, hemos agregado la función javascript a la que llamamos usando el atributo onerror .
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: en este archivo, hemos agregado el estilo CSS predeterminado. Es la hoja de estilo local.
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;
}
Producción:
Los usuarios pueden ver en el resultado anterior cómo se aplican los estilos del archivo CSS local cuando falla la carga de CDN.
Publicación traducida automáticamente
Artículo escrito por shubhamvora05 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA