CSS 선호 투명도

불투명한 UI를 선호하는 사용자를 위해 최적화하고 조정합니다.

Adam Argyle
Adam Argyle
X GitHub

Chrome 118부터 새로운 미디어 쿼리 기능 prefers-reduced-transparency 드림 CSS 미디어 쿼리 5의 쿼리와 있습니다. 불투명하지 않은 인터페이스는 두통을 일으키거나 다양한 유형의 시각 장애가 있을 수 있습니다. Windows, macOS, iOS에 시스템 환경설정이 있는 이유가 여기에 있습니다. UI에서 투명도를 줄이거나 삭제할 수 있습니다.

브라우저 지원

  • Chrome: 118 <ph type="x-smartling-placeholder">
  • Edge: 118. <ph type="x-smartling-placeholder">
  • Firefox: 깃발 뒤쪽에 있습니다.
  • Safari: 지원되지 않음 <ph type="x-smartling-placeholder">

소스

CSS는 브라우저에서 새로운 미디어 쿼리를 실행하여 사용자에게 맞게 인터페이스를 조정할 수 있습니다. 투명도 저하에 대한 요구를 명시:

.example {
  --opacity: .5;

  background: hsl(200 100% 50% / var(--opacity));

  @media (prefers-reduced-transparency: reduce) {
    --opacity: .95;
  }
}

앞의 코드 예에서 CSS 변수는 50%에 불투명도 값을 보유합니다. 그런 다음 HSL과 함께 사용되어 반투명 파란색 배경을 만듭니다. 이 nested 미디어 쿼리는 다음과 같은 사용자 환경설정을 확인합니다. 투명도를 낮추고 true인 경우 불투명도 변수를 95%로 조정합니다. 거의 불투명한 불투명도 값입니다.

이 미디어 쿼리는 다른 환경설정 미디어 쿼리와 잘 맞습니다. 를 사용하면 디자이너와 개발자가 창의력을 발휘하면서 사용자를 적응시킬 수 있습니다. 이러한 미디어 쿼리는 자동으로 실행되는 자동차의 의자와 같다고 사용자에 맞게 위치를 조정합니다. 사용자가 내 웹사이트를 방문할 때 자동으로 조정됩니다. 정말 멋지죠.

투명성 감소 사용 사례

다음 섹션에서는 투명성을 현저하게 줄일 수 있습니다.

이미지의 반투명 자막

이미지나 동영상 미리보기 이미지에 반투명 자막 또는 요약 다음 예는 이렇게 하면 투명도 감소에 대한 선호를 처리할 수 있습니다. 오버레이는 제거되어 동일한 캡션 콘텐츠가 기존 이미지 아래에 표시됩니다.

투명한 모달, 알림, 팝오버

UI 요소가 콘텐츠를 오버레이하는 또 다른 방법은 모달, 알림, 팝오버와 함께 표시됩니다. 이 경우 불투명도를 높이면 사용자 기본 설정을 존중하면서 섬세한 색깔을 입힐 수 있습니다.

.card {
  background: hsl(none none 100% / 20%);

  @media (prefers-reduced-transparency: reduce) {
    background: hsl(none none 0% / 80%);
  }
}

자동 조절 유리

인기 있는 또 다른 이미지 오버레이 스타일은 불투명 유리입니다. 다음 예에서 캡션 뒤의 이미지는 제품 이미지를 거울로 비친 것입니다. 이 이미지가 잘리지 않고 밝거나 어두워서 선호도는 최종 결과에서 조금 더 나타날 수 있습니다.

.adaptive-glass {
  --glass-lightness: 100%;
  --glass-alpha: 50%;

  background: hsl(0 0% var(--glass-lightness) / var(--glass-alpha));
  backdrop-filter: blur(40px);

  @media (prefers-color-scheme: dark) {
    --glass-lightness: 0%;
  }

  @media (prefers-reduced-transparency: reduce) {
    --glass-alpha: 85%;
  }
}

히어로 헤더

일반적인 홈페이지 요소에는 연속 재생 동영상 또는 애니메이션 이미지 다음 예에는 다채로운 색상의 반투명 그라데이션이 있습니다. 오버레이, 무한으로 움직이는 배경 이미지가 있습니다. 이렇게 하면 많은 눈은 또한 많은 사람에게 문제를 일으킬 수 있습니다. 투명도와 모션은 제어할 수 없습니다.

이 문제는 두 가지 CSS 미디어 쿼리로 해결할 수 있습니다. prefers-reduced-motion 투명성 및 선호 수도 있습니다 모션 감소 미디어 쿼리 내에서 사용자에게 '선택 없음'이 있는 경우에만 무한 애니메이션 적용 할인 금액: 코드에 이 사용자가 움직여도 괜찮다고 신호를 보냅니다.

또한 낮은 투명도 미디어 쿼리를 사용하면 오버레이 색상을 거의 100%로 설정할 수 있습니다. 이제 메일을 쉽게 읽을 수 있습니다. 움직임을 방해하거나 문제가 되는 대비가 없어야 합니다.

이를 종합해 보면 광고 소재 UI 디자인을 배포할 수 있을 뿐만 아니라 타겟층이 메시지를 읽고 받을 수 있습니다.

.Hero img {
  @media (prefers-reduced-motion: no-preference) {
    animation: zoom 30s ease infinite;
  }
}

.Hero .overlay {
  background: hsl(none none 0% / 95%);

  @media (prefers-reduced-transparency: no-preference) {
    background: linear-gradient(
      to top right in oklab,
      oklch(40% 0.3 340 / 70%),
      oklch(40% 0.4 200 / 70%)
    );
  }
}

사용자 선호도에 대한 가산적 관점과 제외적 관점

이전 예에서는 이러한 사용자 선호도를 확인하지 않았습니다. 대신 선호도 없음을 확인합니다.

@media (prefers-reduced-transparency: no-preference) {
  …
}

개발자와 디자이너는 대체로 이를 기반으로 사용자 경험을 감소하는 방식으로 생각할 수 있습니다. 이는 미디어 쿼리에서 다음과 같이 나타납니다. '감소'를 확인합니다. 이때 UI에서 항목이 삭제됩니다. 이 추가적 사고방식을 보여주는 예입니다. 즉, 모션과 투명도가 사용자가 괜찮다고 생각할 수 있습니다.

이 접근 방식은 적절한 균형을 유지할 수 있는 건전한 기준 경험을 튼튼합니다. 그런 다음 사용자가 괜찮다고 생각되면 환경에 추가합니다.

DevTools

Chrome DevTools는 투명도를 줄이기 위해 이 환경설정을 에뮬레이션할 수 있습니다 (그리고 자세히 알아보기)은 렌더링 탭에서 찾을 수 있습니다. 다음 동영상에서 Preferreds-color-scheme 및 prefers-reduced-transparency 전환 방법 보기 밝음, 어두움, 투명도 및 낮은 투명도를 보여주는 미디어 쿼리 불투명 유리 카드 변형입니다.

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
</ph> https://codepen.io/web-dot-dev/pen/dyaojxr