@import

@import CSS @규칙은 다른 스타일 시트에서 스타일 규칙을 가져올 때 쓰입니다. 이 규칙은 @charset 규칙을 제외하고 모든 다른 종류의 규칙보다 선행해야 합니다. @import는 중첩 명령문이 아니기 때문에 조건부 그룹 @규칙 내에 사용할 수 없습니다.

@import url("fineprint.css") print;
@import url("bluish.css") speech;
@import 'custom.css';
@import url("chrome://communicator/skin/");
@import "common.css" screen;
@import url('landscape.css') screen and (orientation:landscape);

사용자 에이전트는 지원되지 않는 미디어 유형에 대한 자원 검색을 피할 수 있도록, 제작자는 미디어에 의존한 @import 규칙을 지정할 수 있습니다. 이러한 조건부 import는 URI 뒤에 쉼표로 구분된 미디어 질의를 지정합니다. 미디어 질의가 없으면, import는 무조건(unconditional)입니다. 미디어에 all을 지정하면 같은 효과가 있습니다.

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

where:

url

import할 자원의 위치를 나타내는 <string> (en-US) 또는 <uri> (en-US)입니다. URL은 절대 또는 상대일 수 있습니다. URL은 실제로 파일에 지정할 필요는 없음을 주의하세요; 그냥 패키지 명 및 일부를 지정할 수 있으며 적절한 파일이 자동으로 선택됩니다(가령 chrome://communicator/skin/). 자세한 내용은 여기를 참조.

list-of-media-queries

링크된 URL 내에 정의된 CSS 규칙의 적용을 조절하는 쉼표 구분된 미디어 질의 목록입니다. 브라우저가 이러한 질의를 지원하지 않으면, 링크된 자원을 로드하지 않습니다.

@import [ (en-US) <string> (en-US) | (en-US) <url> ] (en-US) [ (en-US) <media-query-list> ] (en-US)? (en-US);
where 
<media-query-list> = <media-query># (en-US)
where 
<media-query> = <media-condition> | (en-US) [ (en-US) not | (en-US) only ] (en-US)? (en-US) <media-type> [ (en-US) and <media-condition-without-or> ] (en-US)? (en-US)
where 
<media-condition> = <media-not> | (en-US) <media-and> | (en-US) <media-or> | (en-US) <media-in-parens>
<media-type> = <ident> (en-US)
<media-condition-without-or> = <media-not> | (en-US) <media-and> | (en-US) <media-in-parens>
where 
<media-not> = not <media-in-parens>
<media-and> = <media-in-parens> [ (en-US) and <media-in-parens> ] (en-US)+ (en-US)
<media-or> = <media-in-parens> [ (en-US) or <media-in-parens> ] (en-US)+ (en-US)
<media-in-parens> = ( <media-condition> ) | (en-US) <media-feature> | (en-US) <general-enclosed>
where 
<media-feature> = ( [ (en-US) <mf-plain> | (en-US) <mf-boolean> | (en-US) <mf-range> ] (en-US) )
<general-enclosed> = [ (en-US) <function-token> <any-value> ) ] (en-US) | (en-US) ( <ident> (en-US) <any-value> )
where 
<mf-plain> = <mf-name> : <mf-value>
<mf-boolean> = <mf-name>
<mf-range> = <mf-name> [ (en-US) '<' | (en-US) '>' ] (en-US)? (en-US) '='? (en-US) <mf-value> | (en-US) <mf-value> [ (en-US) '<' | (en-US) '>' ] (en-US)? (en-US) '='? (en-US) <mf-name> | (en-US) <mf-value> '<' '='? (en-US) <mf-name> '<' '='? (en-US) <mf-value> | (en-US) <mf-value> '>' '='? (en-US) <mf-name> '>' '='? (en-US) <mf-value>
where 
<mf-name> = <ident> (en-US)
<mf-value> = <number> | (en-US) <dimension> | (en-US) <ident> (en-US) | (en-US) <ratio>