Как правильно использовать @import в CSS: правила, примеры и поддержка браузеров
Ошибки при подключении внешних стилей и некорректная работа медиа‑запросов приводят к нарушению дизайна на разных устройствах. Разбор охватывает синтаксис @import, отличия импорта в HTML и CSS, использование в медиа‑запросах и влияние порядка загрузки на применимость правил в браузерах.
Вы научитесь правильно подключать внешние файлы и организовывать медиа‑запросы с @import. В результате получите структуру стилей, корректно работающую в целевых браузерах и удобную для поддержки.
Импорт в HTML
Чтобы воспользоваться правилом @import в HTML-файле, добавьте следующий код в шапку страницы:
<style>
@import url("/styles/default.css");
</style>Данный код импортирует CSS для использования на HTML-странице. Это позволяет редактировать все ее стили при помощи отдельного файла. Недостаток такого подхода заключается в отсутствии параллельной загрузки. То есть, страница не начнет загружаться до тех пор, пока браузер не загрузит файл CSS полностью. Это негативно скажется на скорости загрузки сайта и общей производительности.
В качестве альтернативного способа применения import url CSS в HTML можно сослаться на таблицу стилей следующим образом:
<link href="/styles/default.css" rel="stylesheet">Эта ссылка работает по принципу @import, и позволяет управлять всем CSS-кодом с помощью отдельного файла. Данный метод предпочтительнее с точки зрения параллельной загрузки. Если вам все еще хочется распределить CSS по отдельным файлам, то можно воспользоваться @import внутри основного стилевого файла.
Импорт в CSS
Применение <link> в приведенном выше примере позволит внедрить файл "default.css " в HTML-страницу. Внутри этого CSS-файла находятся различные правила стилизации. Эти стили можно разместить как на одной странице, так и разбить их на отдельные фрагменты. А также импортировать в основной файл CSS.
Предположим, что мы используем четыре отдельных CSS-файла: один для разметки, второй для шрифтов и третий для картинок. Четвертым будет основной файл, в котором указаны ссылки на все остальные файлы. В самом верху основного файла (так как правила импорта должны размещаться над всем остальным содержимым) добавьте следующий код CSS import:
@import url('/styles/layout.css');
@import url('/styles/type.css');
@import url('/styles/images.css');Уже после этих правил можно добавлять любой CSS-код для оформления страниц.
При загрузке страницы сначала все отдельные файлы будут подгружены в основной CSS, а уже после этого файл загрузится в HTML-страницу. Таким образом у вас будет более простой доступ к отдельным сегментам стилизации.
Используем @import в медиа-запросах
Разделение основного CSS-файла может пригодиться при адаптации сайта под мобильные устройства, где для разных разрешений и размеров экрана применяются различные стили. Главная проблема заключается в том, что подключения CSS import расположены в самом верху страницы, поэтому медиа-запросы будут загружены после стилей. При разработке адаптивных дизайнов важно учитывать производительность сайта. Рекомендуется не разделять CSS адаптивного сайта и использовать @import для их загрузки на ресурс.
Всегда ли нужно использовать @import?
Вовсе нет. На многих сайтах весь CSS расположен прямо в коде страниц, и в этом нет ничего страшного.
Поддержка браузерами
У старых браузеров наблюдаются некоторые проблемы поддержки правила CSS import, но сейчас этими версиями программ практически никто не пользуется. Времена Internet Explorer уже давно позади.
Комментарии