@import

Sintaxe

@import url; @import url list-of-media-queries;

where:

url

É algo como <string> ou como <uri> representaando o local de onde o recurso será importado. A URL pode ser absoluta ou relativa. Perceba que a URL não precisa, necessariamente, ser um arquivo específico; ela pode especificar o nome do pacotee parcialmente, e o arquivo apropriado será escolhido automaticamente (exemplo: chrome://communicator/skin/). Veja aqui para mais informações.

list-of-media-queries

É uma lista separada por vírgulas de consultas de mídia (media queries) conidicionando a aplicação das regras de CSS definidas na URL relacionada. Se o navegador não suportar quaisquer consultas de mídia, ele não carregará o recurso relacionado.

Sintaxe formal

@import =
@import [ <url> | <string> ] [ [ layer | layer( <layer-name> ) ] || [ scope | scope( <scope-start> | <scope-boundaries> ) ] || <supports-import-condition> ]? <media-import-condition> ;

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

<scope-start> =
<selector-list>

<scope-boundaries> =
[ [ ( <scope-start> ) ]? [ to ( <scope-end> ) ]? ]!

<supports-import-condition> =
supports( [ <supports-condition> | <declaration> ] )

<media-import-condition> =
<media-query-list>

<selector-list> =
<complex-selector-list>

<scope-end> =
<selector-list>

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

<complex-selector-list> =
<complex-selector>#

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

<complex-selector> =
<complex-selector-unit> [ <combinator>? <complex-selector-unit> ]*

<supports-feature> =
<supports-selector-fn> |
<supports-font-tech-fn> |
<supports-font-format-fn> |
<supports-at-rule-fn> |
<supports-named-feature-fn> |
<supports-env-fn> |
<supports-decl>

<general-enclosed> =
[ <function-token> <any-value>? ) ] |
[ ( <any-value>? ) ]

<complex-selector-unit> =
[ <compound-selector>? <pseudo-compound-selector>* ]!

<combinator> =
'>' |
'+' |
'~' |
[ '|' '|' ] |
[ / <wq-name> / ]

<supports-selector-fn> =
selector( <complex-selector> )

<supports-font-tech-fn> =
font-tech( <font-tech> )

<supports-font-format-fn> =
font-format( <font-format> )

<supports-at-rule-fn> =
at-rule( <at-keyword-token> )

<supports-named-feature-fn> =
named-feature( <ident> )

<supports-env-fn> =
env( <ident> )

<supports-decl> =
( [ <declaration> | <supports-condition-name> ] )

<compound-selector> =
[ <type-selector>? <subclass-selector>* ]!

<pseudo-compound-selector> =
<pseudo-element-selector> <pseudo-class-selector>*

<wq-name> =
<ns-prefix>? <ident-token>

<font-tech> =
<font-features-tech> |
<color-font-tech> |
variations |
palettes |
incremental

<font-format> =
<string> |
collection |
embedded-opentype |
opentype |
svg |
truetype |
woff |
woff2

<type-selector> =
<wq-name> |
<ns-prefix>? '*'

<subclass-selector> =
<id-selector> |
<class-selector> |
<attribute-selector> |
<pseudo-class-selector>

<pseudo-element-selector> =
: <pseudo-class-selector> |
<legacy-pseudo-element-selector>

<pseudo-class-selector> =
: <ident-token> |
: <function-token> <any-value> )

<ns-prefix> =
[ <ident-token> | '*' ]? '|'

<font-features-tech> =
features-opentype |
features-aat |
features-graphite

<color-font-tech> =
color-COLRv0 |
color-COLRv1 |
color-SVG |
color-sbix |
color-CBDT

<id-selector> =
<hash-token>

<class-selector> =
'.' <ident-token>

<attribute-selector> =
'[' <wq-name> ']' |
'[' <wq-name> <attr-matcher> [ <string-token> | <ident-token> ] <attr-modifier>? ']'

<legacy-pseudo-element-selector> =
: [ before | after | first-line | first-letter ]

<attr-matcher> =
[ '~' | '|' | '^' | '$' | '*' ]? '='

<attr-modifier> =
i |
s
Esta sintaxe reflete o padrão mais recente conforme CSS Cascading and Inheritance Level 5, CSS Cascading and Inheritance Level 6, CSS Conditional Rules Module Level 3, CSS Conditional Rules Module Level 4, CSS Conditional Rules Module Level 5, CSS Fonts Module Level 5, Media Queries Level 5, Selectors Level 4, Selectors Level 5. Nem todos os navegadores podem ter implementado todas as partes. Consulte Compatibilidade do navegador para informações de suporte.

Exemplos

Especificações

Specification

CSS Cascading and Inheritance Level 5 # at-import

Browser compatibilidade

Enable JavaScript to view this browser compatibility table.