@import CSS at-규칙은 다른 스타일 시트에서 스타일 규칙을 import하는데 쓰입니다. 이 규칙은 @charset 규칙을 제외하고 모든 다른 종류의 규칙보다 선행해야 합니다; 중첩된 문이 아니기에, @import조건부 그룹 at-규칙 내에 사용될 수 없습니다.

@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> 또는 <uri>입니다. URL은 절대 또는 상대일 수 있습니다. URL은 실제로 파일에 지정할 필요는 없음을 주의하세요; 그냥 패키지 명 및 일부를 지정할 수 있으며 적절한 파일이 자동으로 선택됩니다(가령 chrome://communicator/skin/). 자세한 내용은 여기를 참조.
list-of-media-queries
링크된 URL 내에 정의된 CSS 규칙의 적용을 조절하는 쉼표 구분된 미디어 질의 목록입니다. 브라우저가 이러한 질의를 지원하지 않으면, 링크된 자원을 로드하지 않습니다.

형식 구문

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

where
<media-query-list> = <media-query>#

where
<media-query> = <media-condition> | [ not | only ]? <media-type> [ and <media-condition-without-or> ]?

where
<media-condition> = <media-not> | <media-and> | <media-or> | <media-in-parens>
<media-type> = <ident>
<media-condition-without-or> = <media-not> | <media-and> | <media-in-parens>

where
<media-not> = not <media-in-parens>
<media-and> = <media-in-parens> [ and <media-in-parens> ]+
<media-or> = <media-in-parens> [ or <media-in-parens> ]+
<media-in-parens> = ( <media-condition> ) | <media-feature> | <general-enclosed>

where
<media-feature> = ( [ <mf-plain> | <mf-boolean> | <mf-range> ] )
<general-enclosed> = [ <function-token> <any-value> ) ] | ( <ident> <any-value> )

where
<mf-plain> = <mf-name> : <mf-value>
<mf-boolean> = <mf-name>
<mf-range> = <mf-name> [ '<' | '>' ]? '='? <mf-value> | <mf-value> [ '<' | '>' ]? '='? <mf-name> | <mf-value> '<' '='? <mf-name> '<' '='? <mf-value> | <mf-value> '>' '='? <mf-name> '>' '='? <mf-value>

where
<mf-name> = <ident>
<mf-value> = <number> | <dimension> | <ident> | <ratio>

명세

Specification Status Comment
CSS Cascading and Inheritance Level 3
The definition of '@import' in that specification.
Candidate 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> 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

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
@importChrome Full support YesEdge Full support YesFirefox Full support 1IE Full support 5.5Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes

Legend

Full support  
Full support

문서 태그 및 공헌자

태그: 
이 페이지의 공헌자: alattalatta, mdnwebdocs-bot, Netaras
최종 변경자: alattalatta,