CSS-правило @import

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

Синтаксис

@import url;
@import url layer;
@import url layer(layer-name);
@import url layer(layer-name) supports(supports-condition);
@import url layer(layer-name) supports(supports-condition) list-of-media-queries;
@import url layer(layer-name) list-of-media-queries;
@import url supports(supports-condition);
@import url supports(supports-condition) list-of-media-queries;
@import url list-of-media-queries;

где:

url

Это значение типа <string> или <url>, указывающее местоположение импортируемого ресурса. URL может быть абсолютным или относительным.

list-of-media-queries

Это разделённый запятыми список медиазапросов, задающих условия применения правил CSS, определённых в связанной ссылке, в зависимости от типа носителя. Если браузер не поддерживает ни один из этих запросов, он не загружает связанный ресурс.

layer-name

Это имя слоя каскада, в который импортируется содержимое связанного ресурса. Дополнительные сведения см. в разделе layer().

supports-condition

Указывает функции, которые должен поддерживать браузер, чтобы таблица стилей была импортирована. Если браузер не соответствует условиям, указанным в supports-condition, он может не загружать связанную таблицу стилей и не применит её, даже если она будет загружена иным способом. Синтаксис supports() почти идентичен описанному в разделе @supports, который можно использовать в качестве более подробного справочника.

Используйте @import вместе с ключевым словом layer или функцией layer(), чтобы импортировать внешние таблицы стилей (из фреймворков, таблиц стилей виджетов, библиотек и т. д.) в слои.

Описание

Импортируемые правила должны предшествовать всем остальным типам правил, за исключением правил @charset и операторов @layer, создающих слои.

* {
  margin: 0;
  padding: 0;
}
/* more styles */
@import "my-imported-styles.css";

Поскольку at-правило @import объявлено после стилей, оно недопустимо и поэтому игнорируется.

@import "my-imported-styles.css";
* {
  margin: 0;
  padding: 0;
}
/* more styles */

Правило @import не является вложенным оператором. Поэтому его нельзя использовать внутри условных групповых at-правил.

Чтобы пользовательские агенты могли не загружать ресурсы для неподдерживаемых типов носителей, авторы могут задавать условия импорта, зависящие от типа носителя. Такие условные импорты указывают после URL разделённые запятыми медиазапросы. Если медиазапросы не указаны, импорт не зависит от используемого типа носителя. Указание all для list-of-media-queries даёт тот же эффект.

Аналогичным образом пользовательские агенты могут использовать функцию supports() в at-правиле @import, чтобы загружать ресурсы, только если поддерживается (или не поддерживается) определённый набор функций. Это позволяет авторам использовать недавно появившиеся функции CSS и при этом предусматривать корректные запасные варианты для старых версий браузеров. Условия в функции supports() at-правила @import можно получить в JavaScript с помощью CSSImportRule.supportsText.

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

Формальный синтаксис

Примеры

Импорт правил CSS

@import "custom.css";
@import url("chrome://communicator/skin/communicator.css");

В двух примерах выше показано, как указать url в виде <string> и функции url().

Условный импорт правил CSS с использованием медиазапросов

@import "fine-print.css" print;
@import "bluish.css" print, screen;
@import "common.css" screen;
@import "landscape.css" screen and (orientation: landscape);

Правила @import в примерах выше задают условия, зависящие от типа носителя, которые должны выполняться, прежде чем будут применены связанные правила CSS. Так, например, последнее правило @import загрузит таблицу стилей landscape.css только на устройстве с экраном в альбомной ориентации.

Условный импорт правил CSS в зависимости от поддержки функций

@import "grid.css" supports(display: grid) screen and (width <= 400px);
@import "flex.css" supports((not (display: grid)) and (display: flex)) screen
  and (width <= 400px);

Правила @import выше показывают, как импортировать макет с сеткой, если поддерживается display: grid, а в противном случае импортировать CSS с использованием display: flex. Можно использовать только один оператор supports(), но при этом сочетать любое количество проверок функций с помощью not, and и or. Однако при их сочетании необходимо использовать скобки, чтобы задать приоритет операций: например, supports((..) or (..) and not (..)) — недопустимая запись, а supports((..) or ((..) and (not (..)))) — допустимая. Обратите внимание: если указано только одно объявление, заключать его в дополнительные скобки не нужно — это показано в первом примере выше.

В примерах выше условия поддержки заданы с использованием базового синтаксиса объявлений. В supports() можно также указать функции CSS: если они поддерживаются и могут быть вычислены пользовательским агентом, результатом будет true. Например, в приведённом ниже коде показано правило @import, условие которого зависит как от комбинаторов дочерних элементов (selector()), так и от функции font-tech():

@import "whatever.css"
  supports((selector(h2 > p)) and (font-tech(color-COLRv1)));

Импорт правил CSS в слой каскада

@import "theme.css" layer(utilities);

В примере выше создаётся слой каскада с именем utilities, в который войдут правила из импортированной таблицы стилей theme.

@import "headings.css" layer(default);
@import "links.css" layer(default);

@layer default {
  audio[controls] {
    display: block;
  }
}

В примере выше правила из таблиц стилей headings.css и links.css участвуют в каскаде в том же слое, что и правило audio[controls].

@import "theme.css" layer();
@import "style.css" layer;

В этом примере создаются два отдельных безымянных слоя каскада, и связанные правила импортируются в каждый из них отдельно. Слой каскада, объявленный без имени, называется безымянным слоем каскада. Безымянные слои каскада становятся окончательными сразу после создания: в них нельзя переупорядочивать или добавлять стили, а также ссылаться на них извне.

Спецификации

Совместимость с браузерами

См. также

• @media
• @supports
• Модуль каскада и наследования CSS
• Функции at-правил CSS