Почему браузеры скачивают стили для несматченных медиавыражений

Почему браузеры скачивают стили для несматченных медиавыражений, рассказывает Томас Штайнер в небольшом посте "Why Browsers Download Stylesheets With Non-Matching Media Queries".

Если у вас есть страница, на которой подключаются файлы стилей с разными медиазапросами:

<link href="print.css" rel="stylesheet" media="print">
<link href="mobile.css" rel="stylesheet" media="screen and (max-width: 600px)">

то будут загружены все css-файлы, даже если они не будут матчиться на текущее значение media. На первый взгляд это может показаться избыточным: зачем скачивать стили, предназначенные для небольших дисплеев, если я просматриваю страницу на большом экране?

В этом нет ошибки. Cтраницы отображаются в динамичной среде. Вы можете изменить размер браузера или перенести окно с одного монитора на другой с другим разрешением и плотностью пикселей, поэтому браузеры скачивают все стили для несматченных медиавыражений с низким приоритетом. Более того, браузеры должны загружать стили для невалидных media queries в соответствии с правилами игнорирования, описанными в спецификации.

https://blog.tomayac.com/2018/11/08/why-browsers-download-stylesheets-with-non-matching-media-queries-180513

← Home