[@supports] 브라우저가 지원하는지에 따라 스타일 적용

@supports

@supports은 주어진 하나 이상의 CSS 기능을 브라우저가 지원하는지에 따라 다른 스타일 선언을 할 수 있는 방법을 제공하며, 이를 기능 쿼리라 한다.

지원 조건은 하나 이상의 키-값 쌍을 논리곱(and), 논리합(or), 부정(not)으로 연결해 구성할 수 있다.

@supports (display: grid) {
  div {
    display: grid;
  }
}

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

display: grid를 지원하면 사용하고, 지원하지 않으면 float: right를 사용한다.

selector()

브라우저가 주어진 선택자를 지원하는지 판별한다.

@supports selector(A > B) {
}

not 연산자

조건이 유효하지 않다고 여길 때 통과한다.

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

@supports not (not (transform-origin: 2px)) {
}

@supports (display: grid) and (not (display: inline-grid)) {
}

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 연산자

두 구성 표현식 중 어느 한 쪽이라도 참이면 참을 반환한다.

@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 연산자를 같이 사용할 때는 괄호를 사용해 연산자 적용 순서를 정의해야 한다.

주어진 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())

/* :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 */
  }
}

참고사이트

@supports