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

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

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

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

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

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Зарегистрироваться

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

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

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

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

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

Автор: Thomas Steiner

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

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

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Зарегистрироваться

PSD to HTML

Практика верстки сайта на CSS Grid с нуля

Смотреть

Метки:

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

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

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

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