Получить профессию в Skypro
Как настроить локальный fallback для CDN стилей в CSS
Быстрый ответ
Для переключения на локальный CSS-файл при сбое CDN используйте атрибут onerror в теге <link>. Этот атрибут активирует функцию загрузки локального файла стилей в случае ошибки.
<link rel="stylesheet" href="//cdn.example.com/style.css" onerror="this.href='local-style.css'; this.onerror=null;">Если CDN перестанет функционировать, onerror незамедлительно заменяет href на ссылку на ваш локальный файл, обеспечивая непрерывность внешнего вида. Важно также установить this.onerror=null для предотвращения повторных попыток загрузки файла, в случае если даже локальная версия не сможет загрузиться.
Подробнее о onerror — вашем защитнике
В дополнение к изменению href, вы можете динамически добавить ещё один CSS файл c помощью JavaScript. Это дает возможность более глубокого контроля и позволяет организовать резервные механизмы для управления ошибками.
// Функция-спасатель.
function loadFallbackStyleSheet() {
var head = document.getElementsByTagName('head')[0];
var link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'local-style.css'; // Локальный помощник, всегда готовый помочь.
head.appendChild(link); // Добавляем поддержку.
}
var link = document.createElement('link');
link.rel = 'stylesheet';
link.href = '//cdn.example.com/style.css'; // Главный файл стилей в строю.
link.onerror = function() {
loadFallbackStyleSheet(); // Упс, главный файл упал! Вызываем подмогу!
this.onerror = null; // Больше мы не ждём помощи :(
};
document.getElementsByTagName('head')[0].appendChild(link);Данный скрипт подгружает локальные файлы стилей в секцию <head>, если CDN перестаёт отвечать на запросы.
Как определить успешность загрузки
Возможен и другой способ — создать проверочное правило в CSS и затем проверить его через JavaScript.
#cssTestElement {
display: none;
}
...
#cssTestElement {
display: block; /* Если CDN сработал, всё отлично, если нет — переходим к резерву */
}Пример кода на JavaScript:
window.onload = function() {
var testElement = document.createElement('div');
testElement.id = 'cssTestElement';
document.body.appendChild(testElement);
if (window.getComputedStyle(testElement).display === 'none') {
loadFallbackStyleSheet(); // Правило не работает, значит, подключаем альтернативу!
}
};Этот подход позволяет проверить исполнение конкретного правила CDN-стилей при загрузке страницы и исключить ошибку, связанную с предзагрузкой.
Визуализация
Представьте такую систему безопасности для альпинистов, которая всегда гарантирует надежную защиту:
Альпинист (🧗♂️): Привязан к канату CDN (🔗)Система безопасности: Если канат CDN (🔗) порвётся...Резервный вариант (🔒): Локальный канат (💼) обеспечивает страховку альпиниста🧗♂️: Благодаря 🔗 (основному варианту) или 💼 (запасному плану) альпинист всегда в безопасностиАналогично запасному канату для альпиниста, в случае отказа CDN локальный CSS-файл гарантирует, что дизайн вашего сайта будет сохранен в целостности.
Варианты отката
Быстрая загрузка DOM при отказе CDN
Если CDN не реагирует, как свидетельствуют проверки .cssRules или .rules, динамически подключите локальные ресурсы:
if (!link.sheet || !link.sheet.cssRules.length) {
// Неприятность! CDN проиграл. На помощь приходят локальные ресурсы!
loadFallbackStyleSheet();
}
Гарантия стабильного пользовательского опыта
Учет различий между браузерами: Тестируйте откат в разных браузерах. Некоторые из них могут иметь отличия в поведении при обработке ошибок.
Будьте готовы к нестабильным условиям сети: Иногда откат может сработать даже при быстром восстановлении сети. Разработайте стратегию, включающую таймауты и дополнительные проверки.
Использование jQuery для упрощения
Используя jQuery, код для динамической загрузки становится проще:
$('head').append('<link rel="stylesheet" href="local-style.css" type="text/css" />');Однако, это будет работать только если jQuery доступен локально, или вы уверены в его наличии.
Полезные материалы
- <link>: Элемент Link для внешних ресурсов – HTML: HyperText Markup Language | MDN — Подробное руководство MDN по использованию тега
<link>. - Запасные пути для JavaScript CDN — Наглядное объяснение от Дэвида Уолша принципов внедрения отказоустойчивого CDN на JavaScript.
- Создание Service Worker: практическое руководство Smashing Magazine — Примеры способов обработки проблем загрузки ресурсов, необходимых для работы service worker.
- HTML tag link — Детальное руководство W3Schools по HTML-тегу
<link>.