Как настроить локальный fallback для CDN стилей в CSS

Пройдите тест, узнайте какой профессии подходите

Я предпочитаю

Работать самостоятельно и не зависеть от других

Работать в команде и рассчитывать на помощь коллег

Организовывать и контролировать процесс работы

Быстрый ответ

Для переключения на локальный CSS-файл при сбое CDN используйте атрибут onerror в теге <link>. Этот атрибут активирует функцию загрузки локального файла стилей в случае ошибки.

HTML

Скопировать код

<link rel="stylesheet" href="//cdn.example.com/style.css" onerror="this.href='local-style.css'; this.onerror=null;">

Если CDN перестанет функционировать, onerror незамедлительно заменяет href на ссылку на ваш локальный файл, обеспечивая непрерывность внешнего вида. Важно также установить this.onerror=null для предотвращения повторных попыток загрузки файла, в случае если даже локальная версия не сможет загрузиться.

Кинга Идем в IT: пошаговый план для смены профессии

Подробнее о 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.

CSS

Скопировать код

#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-стилей при загрузке страницы и исключить ошибку, связанную с предзагрузкой.

Визуализация

Представьте такую систему безопасности для альпинистов, которая всегда гарантирует надежную защиту:

Markdown

Скопировать код

Альпинист (🧗‍♂️): Привязан к канату CDN (🔗)

Markdown

Скопировать код

Система безопасности: Если канат CDN (🔗) порвётся...

Markdown

Скопировать код

Резервный вариант (🔒): Локальный канат (💼) обеспечивает страховку альпиниста

Markdown

Скопировать код

🧗‍♂️: Благодаря 🔗 (основному варианту) или 💼 (запасному плану) альпинист всегда в безопасности

Аналогично запасному канату для альпиниста, в случае отказа 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>.

Свежие материалы

Лучшие каналы для веб-разработки

6 сентября 2024

Как настроить HTTPS на вашем сайте

6 сентября 2024

Что такое домен и хостинг и зачем они нужны?

6 сентября 2024