У элемента
<link rel="stylesheet"> можно указать атрибут media с выражением как в директиве @media. Браузер будет проверять медиа-выражение на соответствие текущему окружению, что повлияет на загрузку файла стилей. <link
rel="stylesheet"
href="mobile.css"
media="(width < 600px)"
>
Если условие не выполняется, файл стилей загружается с низким приоритетом и асинхронно (не блокирует отрисовку), а сами стили не применяются. Эта механика лежит в основе доклада Вадима Макеева «условно адаптивно», о котором я делал пост.
В 496-м выпуске Веб-стандартов слушатель задал вопрос про директиву
@import и каскадные слои (@layer). Хочется обернуть стили из внешнего файла в каскадный слой без изменения исходного кода этого файла.Тут бы пригодился атрибут
layer у элемента <link>, который помещал бы загруженные стили в указанный слой. Но такого атрибута на данный момент нет. Единственный способ — использовать директиву @import с layer() внутри элемента <style>:<!-- атрибут layer не поддерживается
<link
rel="stylesheet"
href="utils.css"
layer="utils"
>
-->
<style>
@import url('utils.css') layer(utils);
</style>
Браузер загрузит
utils.css и поместит его в слой с именем utils, что позволит управлять каскадом: повысить или понизить приоритет всех стилей из этого файла по сравнению со стилями из других слоёв.Директива
@import известна как плохое решение для производительности и многие рекомендуют её избегать. Дело в том, что вложенные @import приводят к последовательной загрузке стилей вместо параллельной.Не смотря на то, что в файле
utils.css могут отсутствовать директивы @import и загрузка должна быть как у <link rel="stylesheet">, всё ещё остаются вопросы к такому методу подключения внешних файлов стилей.Другая полезная директива —
@supports. В теории хотелось бы загружать некоторые стили только при наличии поддержки определённых CSS-функций. Это пригодилось бы для реализации прогрессивного улучшения:<!-- атрибут supports не поддерживается
<link
rel="stylesheet"
href="scroll-animations.css"
supports="(animation-timeline: scroll())"
>
-->
<style>
@import url('scroll-animations.css') supports(animation-timeline: scroll());
</style>
В WHATWG есть issue, где обсуждается расширение элемента
<link>, чтобы учесть директивы @layer и @supports. Пока решение по этому вопросу не принято, но есть разные идеи того, как это может выглядеть и работать.#html #css