Несоответствующие медиа-запросы CSS: почему браузеры загружают их

Несоответствующие медиа-запросы CSS: почему браузеры загружают их

От автора: на днях я прочитал статью Дарио Гизелара по оптимизации кода путем удаления неиспользуемых медиа-запросов CSS. Одна из основных мыслей заключается в том, что вы можете использовать атрибут media при включении таблиц стилей.

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

Я отметил, что приоритет этих загрузок является Lowest, поэтому они, по крайней мере, не конкурируют с основными ресурсами на странице:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

На первый взгляд это все же казалось субоптимальным, и я думал, что, если приоритет является Lowest, возможно, браузер не должен запускать загрузки вообще. Итак, я провел некоторые исследования, и, к своему удивлению, выяснил, что разработчики спецификаций CSS и разработчики браузеров на самом деле довольно умны:

Дело в том, что пользователь всегда может изменить размер окна (влияя на ширину, высоту, соотношение сторон), распечатать документ и т. д., и даже вещи, которые на первый взгляд кажутся статическими (например, разрешение), могут измениться, когда пользователь, использующий несколько мониторов перемещает окно с экрана ноутбука на более крупный Retina-монитор компьютера, или пользователь может отключить мышь и так далее.

Поистине статические вещи, которые не могут измениться (телевизор не может внезапно превратиться во что-то другое), на самом деле устаревают в Media Queries Level 4 (см. блоки, помеченные желтым); и рекомендация скорее нацелена на медиа-функции (см. текст, помеченный красным).

Наконец, еще нужно учитывать даже недопустимые значения, такие как media=»nonsense», согласно правилам игнорирования в спецификации.

Короче говоря, браузеры стараются быть настолько умными, насколько это возможно, применяя приоритеты, а Lowest — разумное значение для случаев в тесте Скотта.

Автор: Thomas Steiner

Источник: https://blog.tomayac.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Фреймворк Bootstrap - верстаем адаптивно, просто, быстро!

Получите видеокурс по основам Bootstrap

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree