Учимся использовать @import в CSS

Правило CSS import может импортировать внешние таблицы стилей не только на HTML-страницу, но и в другой стилевой документ. Это упрощает управление файлами и их интеграцию.

Учимся использовать @import в CSS

Импорт в 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 давно позади.

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *