@supports

@supports CSS @규칙은 주어진 하나 이상의 CSS 기능을 브라우저가 지원하는지에 따라 다른 스타일 선언을 할 수 있는 방법을 제공합니다. 이를 기능 쿼리(feature query)라고 부릅니다. @supports는 스타일의 최상위 단계, 또는 다른 조건부 그룹 규칙에 중첩해 위치할 수 있습니다.

@supports (display: grid) {
  div {
    display: grid;
  }
}
@supports not (display: grid) {
  div {
    float: right;
  }
}

JavaScript에서, @supports는 CSS 객체 모델 인터페이스 CSSSupportsRule로 접근할 수 있습니다.

구문

@supports @규칙은 하나의 선언 블록을 특정 기능의 브라우저 지원 조건과 연결할 수 있습니다. 지원 조건은 하나 이상의 키-값 쌍을 논리곱(and), 논리합(or), 부정(not)으로 연결해 구성합니다. 괄호로 묶어 우선순위를 지정할 수도 있습니다.

선언 구문

가장 기본적인 지원 조건은 단순한 선언(속성 이름과 그 값)입니다. 선언은 괄호로 묶여야 합니다. 다음 예제는 브라우저가 transform-origin 속성의 값으로 5% 5%가 유효하다고 여길 때 통과합니다.

@supports (transform-origin: 5% 5%) {}

함수 구문

두 번째 기본적인 지원 조건은 지원 함수로, 모든 브라우저가 함수 구문을 지원하지만 지원 함수 자체는 아직 표준화 중입니다.

selector() 

브라우저가 주어진 선택자를 지원하는지 판별합니다. 다음 예제는 브라우저가 자식 결합자를 지원할 때 통과합니다.

@supports selector(A > B) {}

not 연산자

not 연산자를 어떤 표현식 앞에 붙이면 그 반대 결과를 낳는 새로운 표현식을 생성합니다. 다음 예제는 브라우저가 transform-origin 속성의 값으로 10em 10em 10em유효하지 않다고 여길 때 통과합니다.

@supports not (transform-origin: 10em 10em 10em) {}

다른 연산자와 마찬가지로, 선언의 복잡도와 관계 없이 not 연산자를 적용할 수 있습니다. 다음 두 예시는 모두 유효한 구문입니다.

@supports not (not (transform-origin: 2px)) {}
@supports (display: grid) and (not (display: inline-grid)) {}

참고: 최상위 not 연산자는 괄호로 감싸지 않아도 괜찮습니다. and, or 등 다른 연산자와 함께 사용할 때는 괄호가 필요합니다.

and 연산자

and 연산자는 두 표현식의 논리곱으로부터 새로운 표현식을 생성합니다. 새로운 표현식은 두 구성 표현식이 모두 참일 때만 참을 반환합니다. 다음 예제는 두 개의 구성 표현식이 동시에 참이어야만 통과합니다.

@supports (display: table-cell) and (display: list-item) {}

다수의 논리곱은 괄호 없이 병치할 수 있습니다. 다음 두 예시는 모두 유효한 구문입니다.

@supports (display: table-cell) and (display: list-item) and (display:run-in) {}
@supports (display: table-cell) and ((display: list-item) and (display:run-in)) {}

or 연산자

or 연산자는 두 표현식의 논리합으로부터 새로운 표현식을 생성합니다. 새로운 표현식은 두 구성 표현식 중 어느 한 쪽이라도 참이면 참을 반환합니다. 다음 예제는 두 개의 구성 표현식 중 하나라도 참이면 통과합니다.

@supports (transform-style: preserve) or (-moz-transform-style: preserve) {}

다수의 논리합은 괄호 없이 병치할 수 있습니다. 다음 두 예시는 모두 유효한 구문입니다.

@supports (transform-style: preserve) or (-moz-transform-style: preserve) or 
          (-o-transform-style: preserve) or (-webkit-transform-style: preserve) {}

@supports (transform-style: preserve-3d) or ((-moz-transform-style: preserve-3d) or
          ((-o-transform-style: preserve-3d) or (-webkit-transform-style: preserve-3d))) {}

참고: and와 or 연산자를 같이 사용할 때는 괄호를 사용해 연산자 적용 순서를 정의해야 합니다. 그렇지 않으면 조건이 유효하지 않으므로 @-규칙 전체를 무시합니다.

형식 구문

@supports <supports-condition> {
  <group-rule-body>
}

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

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

where
<supports-feature> = <supports-decl> | <supports-selector-fn>
<general-enclosed> = [ <function-token> <any-value> ) ] | ( <ident> <any-value> )

where
<supports-decl> = ( <declaration> )
<supports-selector-fn> = selector( <complex-selector> )

where
<complex-selector> = <compound-selector> [ <combinator>? <compound-selector> ]*

where
<compound-selector> = [ <type-selector>? <subclass-selector>* [ <pseudo-element-selector> <pseudo-class-selector>* ]* ]!
<combinator> = '>' | '+' | '~' | [ '||' ]

where
<type-selector> = <wq-name> | <ns-prefix>? '*'
<subclass-selector> = <id-selector> | <class-selector> | <attribute-selector> | <pseudo-class-selector>
<pseudo-element-selector> = ':' <pseudo-class-selector>
<pseudo-class-selector> = ':' <ident-token> | ':' <function-token> <any-value> ')'

where
<wq-name> = <ns-prefix>? <ident-token>
<ns-prefix> = [ <ident-token> | '*' ]? |
<id-selector> = <hash-token>
<class-selector> = '.' <ident-token>
<attribute-selector> = '[' <wq-name> ']' | '[' <wq-name> <attr-matcher> [ <string-token> | <ident-token> ] <attr-modifier>? ']'

where
<attr-matcher> = [ '~' | | | '^' | '$' | '*' ]? '='
<attr-modifier> = i | s

예제

주어진 CSS 속성의 지원 여부 판별

@supports (animation-name: test) {
    … /* 애니메이션 속성을 접두사 없이 사용할 수 있을 때 CSS 적용 */
    @keyframes { /* 다른 @-규칙을 중첩 가능 */
      …
    }
}

주어진 CSS 속성 및 접두사 버전의 지원 여부 판별

@supports ( (perspective: 10px) or (-moz-perspective: 10px) or (-webkit-perspective: 10px) or
            (-ms-perspective: 10px) or (-o-perspective: 10px) ) {
    … /* 접두사가 붙더라도 3D 변형을 지원하면 CSS 적용 */
}

특정 CSS 속성의 미지원 여부 판별

@supports not ((text-align-last: justify) or (-moz-text-align-last: justify) ){
    … /* text-align-last: justify를 대체할 CSS */
}

사용자 정의 속성 지원 여부 판별

@supports (--foo: green) {
  body {
    color: var(--varName);
  }
}

선택자 지원 여부 판별 (예: :is())

This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

/* :is()를 지원하지 않는 브라우저에서는 무시함 */
:is(ul, ol) > li {
  … /* :is() 선택자를 지원할 때 적용할 CSS */
}

@supports not selector(:is(a, b)) {
  /* :is()를 지원하지 않을 때 대체할 CSS */
  ul > li,
  ol > li {
    … /* :is()를 지원하지 않을 때 적용할 CSS */
  }
}

@supports selector(:nth-child(1n of a, b)) {
  /* @supports로 먼저 묶지 않으면 :nth-child()의 of 구문을
     지원하지 않는 브라우저에서 스타일을 잘못 적용할 수 있음 */
  :is(:nth-child(1n of ul, ol) a,
  details > summary) {
    … /* :is() 선택자와 :nth-child()의 of 구문을 지원할 때 적용할 CSS */
  }
}

명세

Specification Status Comment
Unknown
The definition of '@supports' in that specification.
Unknown Adds the selector()function.
CSS Conditional Rules Module Level 3
The definition of '@supports' in that specification.
Candidate Recommendation Initial definition.

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
@supportsChrome Full support 28Edge Full support 12Firefox Full support 22
Full support 22
No support 17 — 22
Disabled
Disabled From version 17 until version 22 (exclusive): this feature is behind the layout.css.supports-rule.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 12.1Safari Full support 9WebView Android Full support ≤37Chrome Android Full support 28Firefox Android Full support 22
Full support 22
No support 17 — 22
Disabled
Disabled From version 17 until version 22 (exclusive): this feature is behind the layout.css.supports-rule.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support 12.1Safari iOS Full support 9Samsung Internet Android Full support Yes
selector()
Experimental
Chrome No support NoEdge No support NoFirefox Full support 69
Full support 69
Full support 64
Disabled
Disabled From version 64: this feature is behind the layout.css.supports-selector.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android Full support 64
Disabled
Full support 64
Disabled
Disabled From version 64: this feature is behind the layout.css.supports-selector.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No

Legend

Full support  
Full support
No support  
No support
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
User must explicitly enable this feature.
User must explicitly enable this feature.

같이 보기