@supports (selector() 포함)

주어진 하나 이상의 css 기능을 브라우저가 지원하는지 여부에 따라 다른 스타일 선언을 할 수 있음. (기능 쿼리 - feature query)

지원 조건은 하나 이상의 키:값을 and, or, not으로 연결해 구성하며, 괄호로 묶어 우선순위를 지정할 수 있음.

 

선언 구문

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

@supports not (transform-origin: 10em 10em 10em) {}
@supports (display:grid) and (not(display:inline-grid)) {}

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

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

* 최상위 not 연산자는 괄호로 감싸지 않으나, 다른 연산자와 함께 사용할 경우 괄호가 필요함.

 

예시

주어진 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:justiry) or (-moz-text-align-last: justify)) {
  ... /* text-align-last: justify를 대체할 css */
}

 

사용자 정의 속성 지원 여부

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

 

* 선택자 지원여부 (:is)

/* :is()를 지원하지 않는 브라우저에서는 무시함 */
:is(ul, ol) > li {}

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

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

 

* IE - @supports / selector() 지원 X

* Opera - selector() 지원 X