CSS의 media query 는 디바이스에 따라서 UI에 다양한 변화를 줄 수 있는 좋은 기능입니다.
보통은 반응형 웹을 구현하기위해 화면의 넓이나 높이에 따라 변화가 필요할때 많이 사용을 했을텐데요,
미디어쿼리는 사실 화면(screen)뿐만 아니라
인쇄물(print), 음성장치(speech)에 대해서도 기능을 수행합니다.
만약 디바이스마다 다른 스타일을 주고 싶다면 아래와 같은 코드로 사용이 가능하죠..
@media screen { ... } /* 화면 */
@media print { ... } /* 인쇄물 */
@media speech { ... } /* 음성장치 */
이번에 새로 추가된 기능인 update 는 이런 디바이스에 대한 구분을 조금 더 유동적으로 하는데
유용한 기능이 아닐까 생각됩니다.
update 쿼리는 장치의 새로고침 빈도에 맞게 스타일을 제공할 수 있도록 도와줍니다.
옵션값은 fast, slow, none 이며 아래처럼 사용 가능합니다.
@media (update: fast) {
/* 빠른 새로고침 빈도를 가지고 있는 장치들에 적용됩니다.
컴퓨터, 모바일기기 등이 해당됩니다. */
}
@media (update: slow) {
/* 새로고침 빈도가 낮은 장치들에 적용됩니다.
e북 리더기, 저전력 시스템 등이 해당됩니다. */
}
@media (update: none) {
/* 새로고침이 없는 장치들에 적용됩니다.
인쇄용지, 전자 잉크 디스플레이 기기 등이 해당됩니다. */
}
새로고침 빈도에 맞게 UI를 조정할 수 있기 때문에
잘만 활용한다면 다양한 사용자 환경에 맞는 UI를 제공할 수 있을것으로 기대됩니다.
브라우저 지원 : 크롬(113), 파이어폭스(112), Edge(113)