Из Википедии, бесплатной энциклопедии
Перейти к навигации Перейти к поиску
FOUC при загрузке главной страницы Википедии.

Вспышка без стилей содержимого ( FOUC , а также вспышка без стилей текста ) [1] [2] является случаем , когда веб - страница появляется на короткое время со стилями по умолчанию браузера до загрузки внешнего CSS стилей , в связи с браузерным движком рендеринга страницу до того, как будет получена вся информация. Страница исправляется, как только правила стиля загружаются и применяются; однако сдвиг может отвлекать. Связанные проблемы включают мигание невидимого текста (FOIT) и мигание искусственного текста (FOFT). [1] [2]

Техническая информация [ править ]

Проблема была задокументирована в статье «Вспышка нестилизованного содержимого». [3] Сначала FOUC казался проблемой браузера, уникальной для Internet Explorer, но позже стал очевиден в других браузерах, [4] [5] и с тех пор был описан как « эпидемия Safari ». [6]

FOUC безразличен к изменениям в версиях CSS или HTML . Проблема возникает из-за набора приоритетов, запрограммированных в браузере. [ необходима цитата ] По мере того, как браузер собирает HTML и все вспомогательные файлы, указанные в разметке, браузер создает объектную модель документа « на лету». Браузер может сначала отобразить текст, который он сможет проанализировать быстрее всего.

FOUC более распространен сейчас, когда HTML-страницы более склонны ссылаться на несколько таблиц стилей. Веб-страницы часто содержат ссылки на стили для мультимедиа, отличные от экрана браузера, например правила CSS для принтеров и мобильных устройств. Веб-страницы могут импортировать слои файлов стилей и ссылаться на альтернативные таблицы стилей. Интернет-реклама и другой внедренный контент, такой как видео и поисковые системы, часто диктуют свои собственные правила стиля в своем блоке кода. Каскадный характер правил CSS побуждает некоторые браузеры ждать, пока будут собраны все данные стиля, прежде чем применять их.

С появлением библиотек JavaScript, таких как jQuery, которые можно использовать для дальнейшего определения и применения стиля веб-страницы, FOUC также стал более заметным. Пытаясь избежать нестилизованного содержимого, разработчики интерфейса могут скрыть весь контент до тех пор, пока он не будет полностью загружен, после чего запускается обработчик события загрузки и отображается содержимое.

Чтобы имитировать FOUC, разработчики могут использовать надстройки браузера, которые способны на лету отключать CSS веб-страницы. Такими надстройками являются Firebug и Async CSS.

Хотя к 2016 году было разработано несколько различных методов, позволяющих избежать нежелательного поведения при отображении, [2] изменение поведения отрисовки в Google Chrome версии 50, в результате чего таблицы стилей, введенные с помощью JavaScript, не могут блокировать загрузку страницы, как того требует спецификация HTML5 , вновь привлекла внимание создателей веб-сайтов к ситуации, особенно затронув пользователей Typekit , продукта веб-типографики от Adobe Systems . [1] В течение 2 месяцев Adobe изменила способ включения своих шрифтов на сторонние веб-сайты, чтобы избежать нежелательного поведения при рендеринге. [7]

Ссылки [ править ]

  1. ^ a b c Тим Браун (3 июня 2016 г.). «Относительно вспышки нестилизованного текста в Chrome 50» . Блог Adobe Typekit . Adobe Systems . Архивировано из оригинала на 1 сен 2016 . Проверено 9 августа +2016 . CS1 maint: discouraged parameter (link)
  2. ^ a b c Крис Койер (1 апреля 2015 г.). «FOIT, FOFT» . CSS-хитрости . Проверено 9 августа +2016 . CS1 maint: discouraged parameter (link)
  3. ^ «Вспышка нестилизованного содержимого (FOUC)» . Синий робот. 2001. Архивировано из оригинального 13 мая 2015 года . Проверено 12 октября 2012 года . CS1 maint: discouraged parameter (link)
  4. ^ «Вспышка нестилизованного содержимого (FOUC)» . Bugzilla @ Mozilla . Проверено 14 октября +2016 . CS1 maint: discouraged parameter (link)
  5. ^ «Ошибки хрома, содержащие 'FOUC ' » . bugs.chromium.org . Проверено 14 октября +2016 . CS1 maint: discouraged parameter (link)
  6. ↑ Дэйв Хаятт (1 сентября 2006 г.). «Проблема FOUC» . Surfin 'Safari . Проект с открытым исходным кодом WebKit . Проверено 16 октября 2012 года . Проблема FOUC обычно возникает незначительно. Однако с появлением Google AdSense FOUC превратился в эпидемию Safari . Поскольку эти объявления Google не только выполняют встроенный скрипт, но и получают доступ к информации о макете, которую они часто даже не используют на странице, проблема FOUC намного серьезнее, чем должна быть. CS1 maint: discouraged parameter (link)
  7. ↑ Брэм Штайн (28 июля 2016 г.). «Изменения в использовании веб-шрифтов на Typekit» . Блог Adobe Typekit . Adobe Systems . Проверено 9 августа +2016 . CS1 maint: discouraged parameter (link)