Блог

Недавно я потратил некоторое время на размышления о том, как наилучшим образом обработать сбой ресурса для страницы.

Конечно, с файлами JavaScript не так много «умных» вещей, которые вы можете сделать. Если вы загружаетесь с CDN, мы можем сделать что-то вроде этого (взято из шаблонного проекта HTML5):

 <!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="local/jquery-1.6.1.min.js">x3C/script>')</script>
  

Однако я не видел много документированных данных о сбое CSS.

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

Но что, если вы не хотите возвращаться к стилю Lynx? На это может быть веская причина; например, ваше приложение сложное и очень сильно зависит от вашего макета. В этом случае отображение страницы без таблицы стилей, вероятно, хуже для пользовательского интерфейса, чем не показывать ее вообще.

Поэтому я подумал, сработает ли такое решение, и использует ли кто-нибудь из вас его (или что-то подобное)?

1. Добавьте вспомогательный класс в конец вашего файла CSS #test { line-height: 1; }
2. Добавьте этот JavaScript в конец вашей страницы

 var el = document.createElement('div');
el.setAttribute('id', 'test');
document.body.appendChild(el);

var o = (el.currentStyle) ? el.currentStyle['line-height'] :

    (window.getComputedStyle) ? document.defaultView.getComputedStyle(el, null).getPropertyValue('line-height') : null;
if (o !== '1px') {
    document.body.innerHTML = '<p>Resources failed to load, a prettier message should go here</p>';
}
  

Смотрите этот JS Fiddle для всего этого вместе.

Вопросы

1. Мысли по поводу вышесказанного?
2. Используете ли вы что-то подобное?
3. Как вы думаете, это хороший шаблон (обратите внимание, что я защищаю это только для веб-приложений, которые зависят от своих стилей).

Ваше правило может не выполняться из-за того, что пользовательские таблицы стилей или другие настройки браузера переопределяют правило, на котором вы тестируете. line-height кажется особенно уязвимым к этому, плюс также любое правило, которое принимает значение длины, рискует вернуть a computedStyle в другом блоке, отличном от того, который вы ожидали, что приведет к сбою сравнения строк. (Не говоря уже о 1 / 1px путанице в вашем примере.)

В общем, я думаю, что это должно быть лучше. Если вы считаете, что стили не загрузились, обязательно добавьте предупреждение на страницу, но не заменяйте всю страницу ошибкой, делая ее совершенно бесполезной для тех, кто мог бы хотя бы попытаться ее использовать. Эта хрупкость плохо сказывается на доступности.