Правило CSS @import

CSS-правило @import подключает стили из одной внешней таблицы стилей в другую. Оно позволяет разбить CSS на несколько файлов (например, отдельный файл для каждого компонента или темы) и объединять их из единой точки входа, а также загружать таблицу условно — на основе медиазапроса.

За ключевым словом @import должен следовать адрес подключаемого файла, указанный либо через url(), либо как обычная строка. Обе строки ниже делают одно и то же:

@import url("theme.css");
@import "theme.css";

Где должно находиться правило

@import допустимо только в самом начале таблицы стилей. Оно должно располагаться перед всеми остальными правилами, кроме @charset и @layer (пустой оператор @layer без блока). Если поместить @import после обычного правила, например блока с селектором, браузер проигнорирует его.

@charset "utf-8";   /* allowed first */
@import "reset.css"; /* imports must come before any styles */

body {
  margin: 0;
}

@import "late.css";  /* invalid — ignored, because a rule already appeared */

Информация

@import нельзя использовать внутри условных групповых правил, таких как @media или @supports. Чтобы загрузить таблицу только при определённых условиях, добавьте условие непосредственно к самому @import (см. раздел Медиазапросы ниже).

@import и элемент <link>

Подключить таблицу стилей из HTML можно также с помощью <link rel="stylesheet" href="theme.css">. Оба подхода дают одинаковый результат, однако различаются по производительности:

Тег <link> обнаруживается браузером при разборе HTML, поэтому файл начинает загружаться немедленно и параллельно с другими ресурсами.
@import обнаруживается только после того, как родительская таблица стилей загружена и разобрана. Это создаёт цепочку запросов (HTML → main.css → imported.css), способную задержать отрисовку.

Для таблиц стилей верхнего уровня предпочтительнее использовать <link>. К @import стоит обращаться тогда, когда нужна именно композиция на уровне CSS — например, для сборки единого бандла из нескольких частичных файлов или для импорта таблицы в именованный каскадный слой.

Initial Value	-
Applies to	-
Inherited	No.
Animatable	No.
Version	CSS2
DOM Syntax	N/A

Синтаксис

Синтаксис правила CSS @import

@import <url> | <string> [ <media-query-list> ]? ;

Пример правила @import:

Пример правила CSS @import

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document </title>
    <style>
      @import url('https://fonts.googleapis.com/css?family=Coiny');
      @import url('https://fonts.googleapis.com/css?family=Lobster');
      .p1 {
        font-family: 'Coiny', cursive;
      }
      .p2 {
        font-family: 'Lobster', cursive;
      }
    </style>
  </head>
  <body>
    <h2>@import at-rule example</h2>
    <p class="p1">The @import rule allows you to import a style sheet into another style sheet.</p>
    <p class="p2">The @import rule also supports media queries, so you can allow the import to be media-dependent.</p>
  </body>
</html>

Попробуйте сами »

Результат

Разница между относительным и абсолютным URL

Правило @import принимает типы данных <url> и <string> для указания импортируемого файла. Адрес может быть как абсолютным, так и относительным URL.

В примере кода ниже используется относительный URL. Это означает, что адрес задаётся относительно расположения текущей таблицы стилей. В данном случае достаточно указать только имя файла без пути.

Правило CSS @import

@import "relative.css";

В следующем примере URL по-прежнему относительный, однако указана часть пути:

Правило CSS @import

@import "../css/relative.css";

Как видно из примера ниже, здесь указан полный путь с именем домена — это абсолютный URL.

Правило CSS @import

@import "http://www.examples.fr/css/absolute.css";

Медиазапросы

@import принимает медиазапрос после URL, так что таблица применяется только при совпадении условия. Именно так делается медиазависимый импорт без обёртки в @media (что не разрешено).

Таблица ниже загружается только при печати страницы:

@import "print.css" print;

Можно использовать любой медиазапрос, в том числе с проверкой характеристик, например ширины:

@import "wide.css" screen and (min-width: 768px);

Браузер всё равно загружает файл независимо от условия — медиазапрос определяет лишь то, применяются ли правила, но не то, загружается ли файл.

Импорт в каскадный слой

Современная возможность позволяет назначить импортируемую таблицу именованному каскадному слою с помощью layer(). Всё содержимое импортируемого файла будет участвовать в приоритете этого слоя — это удобный способ не допустить переопределения ваших стилей сторонним CSS:

@import "bootstrap.css" layer(framework);

Также можно защитить импорт условием через supports(), чтобы таблица загружалась только если браузер поддерживает указанное объявление:

@import "grid.css" supports(display: grid);

Значения

Значение	Описание
url	`<url>` или `<string>`, указывающие местонахождение импортируемого ресурса. URL может быть относительным или абсолютным.
string list-of-mediaqueries	Разделённый запятыми список медиазапросов, определяющих условия применения CSS-правил из подключаемого URL.

Практика

Какой синтаксис корректен для использования правила @import в CSS?

@import url ('mystyle.css')import url ('mystyle.css')url ('mystyle.css') @import@import 'mystyle.css' @import: 'mystyle.css'