@supports

@supports CSS 규칙은 주어진 하나 이상의 CSS 기능을 브라우저가 지원하는지에 따라 다른 스타일 선언을 할 수 있는 방법을 제공합니다. 이를 기능 쿼리(feature query)라고 부릅니다.

즉, 최신 스펙의 css값을 사용할 때 해당 css를 제공하는 브라우저에 따라 맞춤형으로 적용할 수 있게 해줍니다.

@supports 사용

css 입력 영역에 @supports (조건) { 적용할 css내용 } 을 입력하면 됩니다.

부정의 경우는 @supports not (조건) { 적용할 css내용 } 을 입력합니다.

.container {
  width: 200px;
  height: 200px;
}

/* 해당 브라우저에서 backdrop-filter 속성을 지원하면 css 적용 */
@supports (backdrop-filter: blur(10px)) {
  .container {
    backdrop-filter: blur(10px);
  }
}

/* 해당 브라우저에서 backdrop-filter 속성을 지원하지 않는다면 css 적용 */
@supports not (backdrop-filter: blur(10px)) {
  .container {
    background-image: linear-gradient(orange, royalblue);
  }
}

@supports 의 응용

기본적으로 한 가지의 특정 css의 지원/미지원에 따른 css 적용 뿐만 아니라 and, or 같은 연산자를 사용해 특정 상황에 따른 css 적용 조건을 만들 수 있습니다.

/* and를 기점으로 작성한 조건의 css가 모두 참일 경우 관련 css 값을 적용한다. */
@supports (display: grid) and (display: flex) {
  .container {
    display: grid;
  }

  .container .item {
    display: flex;
  }
}

/* and를 기점으로 작성한 조건의 css가 모두 거짓일 경우 관련 css 값을 적용한다. */
/* 위와 달리 ()로 조건 전체를 감싼후 not을 입력한다. */
@supports not ((display: grid) and (display: flex)) {
  .container {
    float: left;
  }

  .container .item {
    text-align: center;
    line-height: 100px;
  }
}

/* or를 기점으로 둘 중 혹은 여러 개 중 하나라도 참일 경우 관련 css 값을 적용한다. */
@supports (display: grid) or (display: flex) {
  .container {
    width: 500px;
  }
}

@supports의 selector() 적용

브라우저에서 특정 선택자를 지원하는지도 @supports 문법을 통해 분별하고 스타일을 적용할 수 있다.

selector() 를 사용할 때는 selector 문법 뒤에 띄어 쓰기 없이 selector(선택자 조건)을 입력해야 함을 주의하자.

• selector (A ~ B) {} ---- X
• selector(A ~ B) {} ---- O

/* css 선택자 동작 여부 */

/* class 선택자에 대한 동작 여부 예제 코드 */
@supports (selector(.container)) {
  .container {
    border: 10px solid orange;
  }
}

/* 직계 자손 선택자(>)에 대한 동작 여부 예제 코드 */
@supports (selector(A > B)){
  .contents > .box {background:#000;}
}

참고자료

• https://developer.mozilla.org/ko/docs/Web/CSS/@supports