@import

@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, определённых в связанном URL. Если браузер не поддерживает ни один из этих запросов, он не загрузит связанный ресурс.

layer-name

Имя слоя каскада, в который импортируется содержимое связанного ресурса.

supports-condition

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

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

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

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

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

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

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

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

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

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

@import = 
  @import [ <url> | <string> ] [ layer | layer( <layer-name> ) ]? <import-conditions> ;  

<url> = 
  <url()>  |
  <src()>  

<layer-name> = 
  <ident> [ '.' <ident> ]*  

<import-conditions> = 
  [ supports( [ <supports-condition> | <declaration> ] ) ]? <media-query-list>?  

<url()> = 
  url( <string> <url-modifier>* )  |
  <url-token>                      

<src()> = 
  src( <string> <url-modifier>* )  

<supports-condition> = 
  not <supports-in-parens>                            |
  <supports-in-parens> [ and <supports-in-parens> ]*  |
  <supports-in-parens> [ or <supports-in-parens> ]*   

<supports-in-parens> = 
  ( <supports-condition> )  |
  <supports-feature>        |
  <general-enclosed>        

<supports-feature> = 
  <supports-decl>  

<supports-decl> = 
  ( <declaration> )  

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

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

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

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

@import url("gridy.css") supports(display: grid) screen and (max-width: 400px);
@import url("flexy.css") supports((not (display: grid)) and (display: flex))
  screen and (max-width: 400px);

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

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

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

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

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

@import url(headings.css) layer(default);
@import url(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 каскадирования и наследования