주어진 하나 이상의 CSS 기능을 브라우저가 지원하는지에 따라 다른 스타일 선언을 할 수 있는 방법을 제공 예시로 flexbox나 grid의 gap 속성은 ie11이하는 지원하지 않는다 (https://caniuse.com/?search=gap) 이때 @supports 기능 쿼릴 이용하면 예외 처리를 쉽게 할 수 있다 // html // 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; } }
