@supports로 브라우저별 CSS 적용하기

dvw, dvh와 같은 속성들은 특정 브라우저에서는 지원되지 않을 수 있다.

이를 @supports를 이용해서 개선해보았다!

---

브라우저 지원범위 확인 사이트

https://caniuse.com/

다음 사진처럼 브라우저 종류, 버전별로 지원되는 범위를 확인할 수 있다.

---

@supports

@supports는 특정 CSS 기능을 브라우저가 지원하는지에 따라 스타일을 적용할 수 있게 해준다.

• width: 100dvh를 지원하는 브라우저라면 해당 안의 css가 적용된다.

@supports (width: 100dvw) {

}

• not을 붙이면 반대로 width: 100dvh를 지원하지 않는 브라우저인 경우 해당 안의 css가 적용된다.

@supports not (width: 100dvw) {

}

개선한 코드

/* 개선 전 */
body {
  min-width: 100dvw;
  min-height: 100dvh;
}

/* 개선 후 */
@supports (min-height: 100dvh) and (width: 100dvw) {
	body {
		min-width: 100dvw;
		min-height: 100dvh;
	}
}

@supports not ((min-height: 100dvh) and (width: 100dvw)) {
  body {
    min-width: 100vw;
		min-height: 100vh;
	}
}

---

참고 자료

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