Flash нестилизованного контента
 |
Мгновение нестилизованного контента ( FOUC , или вспышка нестилизованного текста ) [1] [2] — это случай, когда веб-страница ненадолго отображается со стилями браузера по умолчанию перед загрузкой внешней таблицы стилей CSS из -за того, что движок веб-браузера отображает страницу до того, как вся информация будет получена. [3] Страница исправляется сама, как только правила стиля загружаются и применяются; однако сдвиг может отвлекать. Связанные с этим проблемы включают вспышку невидимого текста и вспышку искусственного текста . [1] [2]
Техническая информация
[ редактировать ]
Проблема была описана в статье под названием «Flash of Unstyled Content». [4] Сначала казалось, что FOUC — это проблема браузера, уникальная для Internet Explorer , но позже она стала проявляться и в других браузерах. [5] [6] и с тех пор его называют « эпидемией сафари ». [7]
Мгновение нестилизованного контента безразлично к изменениям в версиях CSS или HTML . Эта проблема, которая не затрагивает основной контент, возникает из-за набора приоритетов, запрограммированных в браузере. [ нужна ссылка ] Поскольку браузер собирает HTML и все вспомогательные файлы, указанные в разметке, он строит объектную модель документа «на лету». Браузер может выбрать сначала отображение текста, чтобы он мог проанализировать быстрее.
Теперь, когда HTML-страницы более склонны ссылаться на несколько таблиц стилей, теперь более распространены вспышки нестилизованного контента. Веб-страницы часто содержат ссылки на стили средств массовой информации, отличных от экрана браузера, например правила CSS для принтеров и мобильных устройств. Веб-страницы могут импортировать слои файлов стилей и ссылаться на альтернативные таблицы стилей. Интернет-реклама и другой вставленный сторонний контент, например видео и поисковые системы, часто диктуют свои собственные правила стиля в блоке кода. Каскадный характер правил CSS заставляет некоторые браузеры ждать, пока все наборы данных стилей не будут собраны, прежде чем применять их.
С появлением библиотек JavaScript, таких как jQuery , которые можно использовать для дальнейшего определения и применения стилей веб-страницы, вспышки нестилизованного контента также стали более заметными. Пытаясь избежать нестилизованного контента, разработчики внешнего интерфейса могут скрыть весь контент до тех пор, пока он не будет полностью загружен, после чего срабатывает обработчик событий загрузки и контент появляется, хотя прерывание загрузки может оставить после себя пустую страницу. которому предпочтительнее нестилизованное содержимое.
Чтобы эмулировать вспышку нестилизованного контента, разработчики могут использовать надстройки браузера, которые способны на лету отключать CSS веб-страницы. Firebug и Async CSS являются такими дополнениями. Другие методы включают ручное прекращение загрузки страницы компонентов CSS. Другой вариант предполагает использование инструментов блокировки сценариев.
Хотя к 2016 году было разработано несколько различных методов, позволяющих избежать нежелательного поведения дисплея, [2] изменение в поведении рендеринга в Google Chrome версии 50, в результате которого таблицы стилей, внедренные JavaScript, не могут блокировать загрузку страницы, как того требует спецификация HTML5 , снова привлекло внимание создателей веб-сайтов к этой ситуации, особенно затронуло пользователей Typekit , для веб-типографики. продукта от Adobe Systems . [1] В течение двух месяцев Adobe изменила способ включения своих шрифтов на сторонние веб-сайты, чтобы избежать нежелательного поведения при рендеринге. [8]
См. также
[ редактировать ]Ссылки
[ редактировать ]- ^ Перейти обратно: а б с Тим Браун (3 июня 2016 г.). «Относительно Flash нестилизованного текста в Chrome 50» . Adobe Typekit Блог . Системы Adobe . Архивировано из оригинала 1 сентября 2016 года . Проверено 9 августа 2016 г.
- ^ Перейти обратно: а б с Койер, Крис (1 апреля 2015 г.). «ФУТ, ФОЙТ, ФОФТ» . CSS-трюки . Архивировано из оригинала 15 августа 2020 года . Проверено 9 августа 2016 г.
- ^ Будро, Райан (18 октября 2013 г.). «Как предотвратить появление нестилизованного контента на ваших веб-сайтах» . Техреспублика . Архивировано из оригинала 05 марта 2021 г. Проверено 9 октября 2021 г.
- ^ «Вспышка нестилизованного контента (FOUC)» . Синий робот. 2001. Архивировано из оригинала 13 мая 2015 года . Проверено 12 октября 2012 г.
- ^ Победительница Джудит (19 апреля 2010 г.). «Вспышка нестилизованного контента (FOUC)» . Багзилла@Mozilla. Архивировано из оригинала 5 ноября 2016 года . Проверено 14 октября 2016 г.
- ^ «Ошибки Chromium, содержащие 'FOUC' » . bugs.chromium.org. Архивировано из оригинала 18 октября 2016 года . Проверено 14 октября 2016 г.
- ^ Дэйв Хаятт (1 сентября 2006 г.). «Проблема FOUC» . Серфинг-сафари . Проект с открытым исходным кодом WebKit . Архивировано из оригинала 30 августа 2012 года . Проверено 16 октября 2012 г.
Проблема FOUC обычно является незначительным явлением. Однако с появлением Google AdSense FOUC превратился в эпидемию Safari . Поскольку эти объявления Google не только выполняют встроенные сценарии, но и получают доступ к информации о макете, которую они часто даже не используют на странице, проблема FOUC гораздо серьезнее, чем должна была бы быть.
- ^ Брэм Стейн (28 июля 2016 г.). «Изменения в веб-шрифтах, отображаемых в Typekit» . Adobe Typekit Блог . Системы Adobe . Архивировано из оригинала 15 августа 2016 года . Проверено 9 августа 2016 г.