skip to main content

@import

css

Кратко 🔗

При помощи этой директивы можно импортировать один файл со стилями в другой файл со стилями.

Пример 🔗

Предположим, в проекте для удобства стили разделены на несколько файлов.

  1. fonts.css — файл с подключением шрифтов и стилями.
  2. buttons.css — файл со стилями для кнопок.
  3. main.css — основной файл стилей с остальным CSS-кодом.

Нам нужно, чтобы все стили загружались при открытии страницы. Для этого импортируем отдельные файлы в наш основной файл main.css.

@import url("fonts.css");
@import "buttons.css";

/* Остальной CSS-код */

Как пишется 🔗

Равнозначные варианты импорта:

@import "путь-до-файла.css";
@import url("путь-до-файла.css");

Технической разницы между этими двумя вариантами нет. Файлы будут импортироваться одинаково в обоих случаях. Путь до файла может быть как абсолютным, так и относительным.

Можно указать для каких типов устройств должны применяться стили из импортируемого файла:

@import url("путь-до-файла.css") preent;
@import "путь-до-файла.css" screen;

В этом примере стили из файла, импортируемого в первой строке, будут применяться только при печати. А стили из файла, импортируемого во второй строке, будут применяться для отображения на экране.

Допустимо указывать несколько медиа-выражений после пути:

@import "путь-до-файла.css" (min-width: 481px) and (max-width: 768px);
@import url("путь-до-файла.css") screen and (orientation: landscape);

Можно проверить, поддерживается ли какое-то конкретное правило или выражение в браузере пользователя и загрузить для него конкретные стили. Для этого используется правило supports:

@import url("путь-до-файла.css") supports(not (display: flex));

/* CSS-код*/

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

Как это понять 🔗

Во время загрузки страницы браузер пройдёт по всем указанным в импортах путям и загрузит таблицы стилей. Затем прочитает правила ниже импортов и отрисует страницу на основании комбинации всего CSS.

Подсказки 🔗

💡 Желательно не злоупотреблять импортами. Потенциально это может замедлить загрузку страницы.

💡 Все импорты всегда должны быть в начале CSS-файла.

💡 Поскольку браузер читает медиа-выражения, указанные после пути до файла в импорте в последнюю очередь, то он в любом случае сходит по ссылке почитать стили и только потом определит, нужно ли их применять. Эту особенность стоит держать в голове.

В работе 🔗

🛠 Кроме импорта файлов внутри проекта можно встретить использование этой директивы для импорта шрифтов с сайта Google Fonts. Это один из предложенных на их сайте вариантов подключения.

@import url("https://fonts.googleapis.com/css2?family=Andika+New+Basic&display=swap");

После этого в коде ниже можно использовать подключенный шрифт. Минимум усилий — максимум результата.

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

Из двух предложенных на сайте Google Fonts вариантов подключения шрифта выбирайте тот, что через <link>.

🛠 Если проект большой, то удобно разделять стили на разные файлы. Отдельно стили для разметки, отдельно для типографики, отдельно для форм и кнопок. В этом случае в основном файле стилей — назовём его style.css — будут сплошные импорты. Так удобнее содержать код в чистоте. И всегда точно знаешь, в какой файл залезть, чтобы что-нибудь поправить.

Так организуют проекты, в которых есть так называемый сборщик: он собирает код из всех импортируемых файлов в один файл, чем сильно облегчает жизнь браузеру. Если вы не используете сборщик, то постарайтесь избежать обилия импортов.

Автор: Алёна,