미디어쿼리 레벨 5 스펙

미디어쿼리는 상당히 유용합니다. 

w3c 에서는 미디어 쿼리 레벨 5 스펙을 한창 작성중입니다.

https://drafts.csswg.org/mediaqueries-5/#script-custom-mq

Media Queries Level 5

 

새로 생긴 스펙들을 살펴보도록 합시다.

 

light-level

애플에 의해서 다크모드 같은 기능들이 추가되고 사용자의 시간 때나 밝고 어두움에 따른 많은 미디어쿼리들이 생겨나고 있습니다. 그 중에서 `light-level`은 밝기에 대한 것입니다.

@media (light-level: dim) {
  :root {
    --text-color: white;
    --background-color: black;
  }
}

dim, washed, normal 이렇게 3가지 속성이 있습니다.

 

dim은 사용자가 디바이스를 어두운 환경에 대한 스타일을 설정하는 값입니다.
washed는 광량이 밝은 곳에서의 디바이스 밝기에 따라 변경될 스타일 설정값입니다.
햇빛이 강한 야외 환경이 이에 해당합니다.
normal은 화면에 이상적인 범위의 조명 수준의 환경에서 사용되며 특별한 조정이 필요하지 않습니다.

inverted-colors 

현재는 사파리에서만 지원하고 있지만 반전되는 속성에 대한 값에 대한 설정입니다.

@media (inverted-colors) {
  img { filter: invert(1); }
  * { box-shadow: none !important; text-shadow: none !important; }
}

예를 들어 운영 체제의 화면 색상 반전 기능을 자주 사용하는 사용자는 사용자 스타일 시트에 다음을 추가하여 반전의 바람직하지 않은 부작용을 제한 할 수 있습니다. (고대비)

 

Preferences, preferences, preferences

CSS 미디어 쿼리의 다섯 번째 수준은 개인화에 중점을 둡니다. 

웹 사이트를 사용자가 원하는대로 조정할 수있는 5 개의 고유 한 미디어 쿼리를 소개합니다.

 

prefers-color-scheme

실제로 prefers-color-scheme 미디어 쿼리에 대해 들어 보셨을 것입니다. 

이를 통해 사용자가 장치에서 "다크 모드"를 켰는 지 여부에 반응 할 수 있습니다. 

다시 말해, 앱에 "어두운 모드"를 추가하는 것은 이제 몇 줄의 코드입니다!

@media (prefers-color-scheme: dark) {
  body { background: #1e1e1e; color: white; }
}

prefers-contrast

이 새로운 미디어 쿼리에서 내가 좋아하는 것 중 하나는 접근성 기능에 중점을 둔다는 것입니다. 

기본 설정 대비 미디어 쿼리를 사용하면 원래 디자인에 비해 고대비 콘텐츠를 선호하는 사용자를 수용 할 수 있습니다.

@media (prefers-contrast) {
  :root {
    --text-color: black;
  }
}

prefers-reduced-motion

일부 사용자는 애니메이션 및 전환을 좋아하지 않습니다. 

운이 좋지 않은 몇몇 사람들에게 이런 종류의 움직임은 신체적으로 아프게 만들 수 있습니다! 

그렇기 때문에 대부분의 기기는 이제 최신 UI에서 찾을 수있는 전환을 조정하는 방법을 지원합니다.

 

@media (prefers-reduced-motion) {
  * { transition-duration: 0.05s; }
}

 

prefers-reduced-transparency

일부 운영 체제는 시스템에서 사용되는 반투명 레이어링 효과의 양을 줄이는 옵션을 제공합니다

@media (prefers-reduced-transparency) {
  .floating-box { opacity: 1; }
}

 

prefers-reduced-data

이제 이것은 매우 흥미 롭습니다. 

셀룰러 데이터가 부족하거나 해외 여행을하는 경우 이미지가 많은 사이트에 부딪 히게됩니다. 

감소 된 데이터 미디어 쿼리 덕분에 더 이상은 아닙니다!

@media (prefers-reduced-data) {
  .hero-image { background-image: none; background-color: salmon; }
}

One more thing – custom media queries

레벨 5 사양에 도입 된 마지막 미디어 쿼리는 스크립트 가능하고 사용자 정의 가능한 미디어 쿼리 중 가장 강력한 쿼리입니다.

주된 목적은 더 긴 미디어 쿼리에 매핑되는 사용자 지정 미디어 쿼리를 만들어 반복을 피하는 것 같습니다.

@custom-media --medium-devices (min-width: 50rem);
@custom-media --large-landscape (min-width: 70rem) and (orientation: landscape);

@media (--medium-devices) {
  .container { max-width: 40rem; }
}

아직 이것을 구현하는 브라우저는 없지만 

PostCSS 플러그인을 사용하여 맞는 사양의 @custom-media 부분을 사용할 수 있습니다.

 

Sass와 같은 전처리기도 좋지만 PostCSS를 사용하여 현재 업그레이드 되고 있는 CSS 기본 본질의 기능들을 더 많이 사용해보는 것이 중요한 것 같습니다.

 

디버깅 툴의 현대화에 따라 logRocket을 사용하는 것도 좋을 것 같습니다. 

 

 

 

 

 

 

출처 : https://blog.logrocket.com/new-media-queries-you-need-to-know/