@supports () {}

주어진 하나 이상의 CSS 기능을 브라우저가 지원하는지에 따라 다른 스타일 선언을 할 수 있는 방법을 제공

예시로 flexbox나 grid의 gap 속성은 ie11이하는 지원하지 않는다 (https://caniuse.com/?search=gap) 이때 @supports 기능 쿼릴 이용하면 예외 처리를 쉽게 할 수 있다

// html
<div>
  <div></div>
  <div></div>
</div>

// css
div {
  display: grid;
  gap: 20px;
}

// gap을 지원하지 않는 경우를 위한 margin 속성
div div ~ div {
  marign-top: 20px;
}

@supports (gap: 20px) {  
  // 지원하지 않는 경우를 위한 margin 속성을 삭제 (gap과 중복적용)
  div div ~ div {
    marign-top: 0;
  }
}