@supports

요약

The @supports CSS at-rule associates a set of nested statements, in a CSS block, that is delimited by curly braces, with a condition consisting of testing of CSS declarations, that is property-value pairs, combined with arbitrary conjunctions, disjunctions, and negations of them. Such a condition is called a supports condition.

@supports 는 CSS에 기능 쿼리(feature query)를 수행하는 능력을 부여한다.

@supports at-rule은 CSS의 상위 레벨에서만 사용될 뿐만 아니라, 모든 CSS conditional-group at-rule의 안에서 사용될 수 있으며, CSS 객체 모델 인터페이스를 통한 접근이 가능하다 CSSSupportsRule.

문법

supports 조건은 서로 다른 논리 연산으로 조합된 하나 혹은 그 이상의 선언들로 구성된다. 연산의 우선순위는 괄호의 사용으로 무시될 수 있다.

선언문

CSS 선언의 가장 간단한 표현은 콜론으로 구분하여 속성명과 해당 값을 작성하는 것이다. 다음의 표현식은,

( transform-origin: 5% 5% )

transform-origin가 5% 5%의 값을 인식하는 문법을 구현하면 true를 반환한다. 

CSS의 선언은 항상 괄호로 감쌓는다.

not 연산

not 연산은 새로운 표현을 생성하는 모든 표현보다 선행하며, 본래의 표현에 대한 반대값을 지닌다. 다음의 연산은

not ( transform-origin: 10em 10em 10em )

transform-origin가 10em 10em 10em의 값을 인식하는 값을 구현하지 않을 경우에 true를 반환한다.

모든 연산과 마찬가지로, not 연산은 그 어떠한 복합적인 선언에도 적용될 수 있다. 다음의 예제는 모두 유효한 연산들이다. 

not ( not ( transform-origin: 2px ) )
(display: flexbox) and ( not (display: inline-grid) )

and 연산

From two expressions, the and operator creates a new expression consisting in the conjunction of the two original ones, that is the resulting expression is true only if both of the original expressions also resolve to true. In this example, the complete expression resolves to true if and only if the two expressions are simultaneously true:

(display: table-cell) and (display: list-item)

Several conjunctions can be juxtaposed without the need of more parenthesis:

(display: table-cell) and (display: list-item) and (display:run-in)

is equivalent to:

(display: table-cell) and ((display: list-item) and (display:run-in))

or 연산

From two expressions, the or operator creates a new expression consisting in the disjunction of the two original ones, that is the resulting expression is true if one, or both, of the original expressions also resolves to true. In this example, the complete expression resolves to true if at least one of the two expressions is true:

( transform-style: preserve ) or ( -moz-transform-style: preserve )

Several disjunctions can be juxtaposed without the need of more parenthesis:

( transform-style: preserve ) or ( -moz-transform-style: preserve ) or 
( -o-transform-style: preserve ) or ( -webkit-transform-style: preserve  )

is equivalent to:

( transform-style: preserve-3d ) or (( -moz-transform-style: preserve-3d ) or 
(( -o-transform-style: preserve-3d ) or ( -webkit-transform-style: preserve-3d  )))

Formal syntax

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

예제

주어진 CSS 속성에 대한 지원 여부를 위한 테스트

@supports (animation-name: test) {
    … /* 에니메이션이 비접두어로 지원될 때, 특정 CSS가 적용된다. */
    @keyframes { /* @supports는 at-rule의 CSS 조건 그룹으로서, 다른 적합하나 at-rule를 포함할 수 있다 */
      …
    }
}

주어진 CSS 속성 및 접수어 버전에 대한 지원 여부에 대한 테스트

@supports ( (perspective: 10px) or (-moz-perspective: 10px) or (-webkit-perspective: 10px) or
            (-ms-perspective: 10px) or (-o-perspective: 10px) ) {
    … /* 3D transforms를 지원하며, 동시에 접두어가 지원될 때 특정 CSS를 적용한다. */
}

특정 CSS 속성에 대한 비지원 여부를 위한 테스트

@supports not ((text-align-last:justify) or (-moz-text-align-last:justify) ){
    … /* specific CSS applied to simulate text-align-last:justify */
}

명세

브라우저 호환

[1] Gecko 17 to Gecko 21 supported this feature only if the user enables it by setting the config value layout.css.supports-rule.enabled to true.

[2] Safari doesn't currently support this feature, but the underlying WebKit engine does; see WebKit bug #134358.

참고

• The CSSOM class CSSSupportsRule, and the CSS.supports method that allows to perform the same check via JavaScript.