Обратите внимание, что

  1. данный документ является переводом документа «CSS Cascading and Inheritance Level 3» и на данный момент находится на стадии перевода;
  2. данный документ может содержать неточности, опечатки и ошибки перевода;
  3. официальным документом по данной тематике является оригинальный документ на английском языке, расположенный на сайте W3C.

W3C

CSS Каскадирование и Наследование 3 Уровня


* * *

Содержимое


* * *

2 Импорт Таблиц Стилей: правило @import§

Правило @import позволяет пользователям импортировать стили из других таблиц стилей. Правила @import должны предшествовать всем другим правилам и стилям, которые находятся в отдельной таблице стилей (кроме @charset, который должен находиться на первом месте в таблице стилей, если он присутствует), либо правило @import будет является недействительным. Синтаксис @import:

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

В случае если присутствует значение <строка>, агент пользователя должен истолковать её как url с подобным значением.

Следующие строки эквивалентны друг другу по значению и показывают два допустимых варианта синтаксиса '@import' (один в виде значения url() и один в виде обычной строки):

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

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

Например, объявления в стилях, от импортированных таблиц стилей взаимодействуют с каскадом, как если бы они были написаны буквально в таблице стилей в месте, где находится @import. Аналогичным образом, стили, находящиеся в таблице стилей импортируются в стилевую область таким же образом.

Правило @import так же может указывать тип поддерживаемых устройств: подобные типы устройств могут иметь вид списка «запросов типов устройств» разделённого запятыми и находящегося после URI, который определяет какие типы устройств могут импортировать данные стили. При отсутствии каких-либо условий импортирования, импорт является безусловным. (Указание all в качестве значения <списка-медиа-запросов> имеет тот же эффект.)

Определение и полный синтаксис выражений указываемых после URL определяется спецификацией Медиа Запросов [MEDIAQ]. Если данные типа устройства не соответствует указанному значению, то стили, указанные в импортируемых таблицах стилей не применяются, точно так, как если бы импортируемые таблицы стилей были обёрнуты в @media блок с данными допустимых типов устройств. Агенты пользователей могут избежать таким образом извлечение и применение стилей устройствами чей тип не соответствует указанному типу устройств.

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

@import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
@import url("narrow.css") handheld and (max-width: 400px);

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

Примечание: Это не накладывает никаких требований по извлечению ресурсов, только указывает, как таблицы стилей должны отражаться в CSSOM и использоваться в спецификации, такой как эта. Предполагается соответствующее кэширование, которое допускает извлечение агентом пользователя таблиц стилей только один раз, даже если на данную таблицу в документе указано несколько ссылок или указано несколько команд по импортированию данной таблицы.

Инициатором импортирования таблицы стилей является тот же инициатор таблицы стилей, который её импортирует.