[CSS] 📚 최신 CSS 기능 지원여부 확인 🎨 @supports

@supports

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

방법은 바로 @supports 문법(기능 쿼리, feature query)을 이용하는 것이다. @supports 문법은 미디어 쿼리 문법을 사용하는 것과 유사하다.

@supports (display:flex) {
  /* 만약 해당 브라우저가 flex를 지원 할 경우 아랫값을 적용 시킨다. */
  .contents {
    display: flex;
    margin: 0 5px;
    align-items: center;
    justify-content: space-between;
  }
  .contents div {
    flex-grow: 1;
  }
}


@supports not (display:flex) {
 /* 만약 해당 브라우저가 flex를 지원 안 할 경우 아랫 값을 적용 시킨다.*/
 .contents {
    overflow: hidden;
  }
  .contents div {
    float: left;
    margin: 0 5px;
  }
}

---

# 참고자료

https://www.youtube.com/watch?v=lkTpOHv1Ros&list=WL&index=48