@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>
명세
Specification | Status | Comment |
---|---|---|
CSS Cascading and Inheritance Level 3 The definition of '@import' in that specification. |
Recommendation | |
Media Queries The definition of '@import' in that specification. |
Recommendation | Extended the syntax to support any media query and not only simple media types. |
CSS Level 2 (Revision 1) The definition of '@import' in that specification. |
Recommendation | Added support for <string> (en-US) to denote the url of a stylesheet,and requirement to insert the @import rule at the beginning of the CSS document. |
CSS Level 1 The definition of '@import' in that specification. |
Recommendation | Initial definition |
브라우저 호환성
BCD tables only load in the browser