От автора: на днях я прочитал статью Дарио Гизелара по оптимизации кода путем удаления неиспользуемых медиа-запросов CSS. Одна из основных мыслей заключается в том, что вы можете использовать атрибут media при включении таблиц стилей.
<link href="print.css" rel="stylesheet" media="print"> <link href="mobile.css" rel="stylesheet" media="screen and (max-width: 600px)">
В этой статье Дарио ссылается на набор тестов загрузки CSS по медиа-запросам Скотта Джеля, в котором Скотт показывает, как браузеры будут загружать таблицы стилей, даже если их медиа-запросы CSS не соответствуют.
Я отметил, что приоритет этих загрузок является Lowest, поэтому они, по крайней мере, не конкурируют с основными ресурсами на странице:
На первый взгляд это все же казалось субоптимальным, и я думал, что, если приоритет является Lowest, возможно, браузер не должен запускать загрузки вообще. Итак, я провел некоторые исследования, и, к своему удивлению, выяснил, что разработчики спецификаций CSS и разработчики браузеров на самом деле довольно умны:
Дело в том, что пользователь всегда может изменить размер окна (влияя на ширину, высоту, соотношение сторон), распечатать документ и т. д., и даже вещи, которые на первый взгляд кажутся статическими (например, разрешение), могут измениться, когда пользователь, использующий несколько мониторов перемещает окно с экрана ноутбука на более крупный Retina-монитор компьютера, или пользователь может отключить мышь и так далее.
Поистине статические вещи, которые не могут измениться (телевизор не может внезапно превратиться во что-то другое), на самом деле устаревают в Media Queries Level 4 (см. блоки, помеченные желтым); и рекомендация скорее нацелена на медиа-функции (см. текст, помеченный красным).
Наконец, еще нужно учитывать даже недопустимые значения, такие как media=»nonsense», согласно правилам игнорирования в спецификации.
Короче говоря, браузеры стараются быть настолько умными, насколько это возможно, применяя приоритеты, а Lowest — разумное значение для случаев в тесте Скотта.
Автор: Thomas Steiner
Источник: https://blog.tomayac.com/
Редакция: Команда webformyself.