HD CSS 색상으로 이전

이 문서는 고화질 CSS 색상 가이드의 일부입니다.

Adam Argyle
Adam Argyle
X GitHub

웹 프로젝트의 색상을 지원하도록 업데이트하기 위한 두 가지 주요 전략 넓은 색 영역 디스플레이:

  1. 단계적 성능 저하: 새로운 색상 공간을 사용하고 브라우저 및 운영체제는 디스플레이 기능에 따라 어떤 색상을 표시할지 파악합니다.

  2. 점진적 개선: @supports 및 @media를 사용하여 사용자가 브라우저의 기능을 사용할 수 있도록 하고, 조건이 충족되는 경우 광범위한 색 영역입니다.

브라우저가 display-p3 색상을 이해하지 못하는 경우:

color: red;
color: color(display-p3 1 0 0);

브라우저가 display-p3 색상을 인식하는 경우:

color: red;
color: color(display-p3 1 0 0);

각각에는 장단점이 있습니다. 다음은 Google Cloud에서 사용할 수 있는 단점:

단계적 성능 저하

  • 장점 <ph type="x-smartling-placeholder">
      </ph>
    • 가장 간단한 경로입니다.
    • 브라우저 색 영역은 넓어진 색 영역 디스플레이가 아닌 경우 sRGB로 매핑하거나 고정됩니다. 따라서 책임은 브라우저에 있습니다
  • 단점 <ph type="x-smartling-placeholder">
      </ph>
    • 브라우저는 색 영역 고정 또는 색 영역을 사용자가 원하지 않는 색상으로 매핑할 수 있습니다.
    • 브라우저가 색상 요청을 이해하지 못하여 완전히 실패할 수 있습니다. 하지만 색상을 두 번 지정하여 캐스케이드를 허용하여 이 문제를 완화할 수 있습니다. 이해하는 이전 색상으로 대체됩니다.

점진적 개선

  • 장점 <ph type="x-smartling-placeholder">
      </ph>
    • 관리형 색상 충실도로 더 세밀한 제어
    • 현재 색상에 영향을 미치지 않는 가산 전략입니다.
  • 단점 <ph type="x-smartling-placeholder">
      </ph>
    • 두 개의 개별 색상 문법을 관리해야 합니다.
    • 두 개의 개별 색 영역을 관리해야 합니다.

색 영역 및 색상 공간 지원 확인

브라우저에서 넓은 색 영역 기능과 색상에 대한 지원 여부를 확인할 수 있습니다. 구문 지원을 제공합니다. 사용자의 정확한 색상 영역 제공되지 않은 경우 일반화된 답변이 제공되어 사용자 개인 정보 보호가 유지되어야 합니다 하지만 정확한 색상 공간 지원은 사용자 하드웨어의 기능에 따라 달라집니다.

색 영역 지원 쿼리

다음 코드 예에서는 디스플레이.

CSS에서 확인

가장 구체적이지 않은 지원 문의는 dynamic-range 드림 미디어 쿼리:

브라우저 지원

  • Chrome: 98. <ph type="x-smartling-placeholder">
  • Edge: 98. <ph type="x-smartling-placeholder">
  • Firefox: 100 <ph type="x-smartling-placeholder">
  • Safari 13.1. <ph type="x-smartling-placeholder">

소스

@media (dynamic-range: high) {
  /* safe to use HD colors */
}

대략적인 지원 또는 그 이상의 지원은 color-gamut 드림 미디어 쿼리:

브라우저 지원

  • Chrome: 58. <ph type="x-smartling-placeholder">
  • Edge: 79. <ph type="x-smartling-placeholder">
  • Firefox: 110 <ph type="x-smartling-placeholder">
  • Safari: 10. <ph type="x-smartling-placeholder">

소스

@media (color-gamut: srgb) {
  /* safe to use srgb colors */
}

@media (color-gamut: p3) {
  /* safe to use p3 colors */
}

@media (color-gamut: rec2020) {
  /* safe to use rec2020 colors */
}

지원 확인을 위한 추가 미디어 쿼리 두 개가 있습니다.

  1. @media (color)
  2. @media (color-index)

JavaScript에서 확인

JavaScript의 경우 window.matchMedia() 드림 함수를 호출하고 평가를 위한 미디어 쿼리를 전달할 수 있습니다.

브라우저 지원

  • Chrome: 9. <ph type="x-smartling-placeholder">
  • Edge: 12. <ph type="x-smartling-placeholder">
  • Firefox: 6. <ph type="x-smartling-placeholder">
  • Safari: 5.1. <ph type="x-smartling-placeholder">

소스

const hasHighDynamicRange = window
.matchMedia('(dynamic-range: high)')
.matches;

console.log(hasHighDynamicRange); // true || false

const hasP3Color = window
.matchMedia('(color-gamut: p3)')
.matches;

console.log(hasP3Color); // true || false

위의 패턴은 나머지 미디어 쿼리로 복사할 수 있습니다.

색상 공간 지원 쿼리

다음 코드 예에서는 방문하는 사용자의 브라우저와 선택사항을 확인합니다. 몇 가지 색상 공간을 제공합니다.

CSS에서 확인

개별 색상 공간 지원은 @supports 쿼리:

브라우저 지원

  • Chrome: 28. <ph type="x-smartling-placeholder">
  • Edge: 12. <ph type="x-smartling-placeholder">
  • Firefox: 22. <ph type="x-smartling-placeholder">
  • Safari: 9. <ph type="x-smartling-placeholder">

소스

@supports (background: rgb(0 0 0)) {
  /* rgb color space supported */
}


@supports (background: color(display-p3 0 0 0)) {
  /* display-p3 color space supported */
}


@supports (background: oklch(0 0 0)) {
  /* oklch color space supported */
}

JavaScript에서 확인

JavaScript의 경우 CSS.supports() 드림 함수를 호출하고 속성과 값 쌍을 전달하여 이해하지 못할 것입니다.

CSS.supports('background: rgb(0 0 0)')
CSS.supports('background: color(display-p3 0 0 0)')
CSS.supports('background: oklch(0 0 0)')

하드웨어 검사 및 파싱 검사 함께 실행

각 브라우저가 이러한 새로운 색상 기능을 구현하기를 기다리는 동안 하드웨어 기능과 색상 파싱 기능을 모두 확인하는 것이 좋습니다. 색상을 고화질로 점진적으로 향상시킬 때 주로 사용합니다.

:root {
  --neon-red: rgb(100% 0 0);
  --neon-blue: rgb(0 0 100%);
}

/* is the display HD? */
@media (dynamic-range: high) {

  /* does this browser understand display-p3? */
  @supports (color: color(display-p3 0 0 0)) {

    /* safe to use display-p3 colors */
    --neon-red: color(display-p3 1 0 0);
    --neon-blue: color(display-p3 0 0 1);
  }
}

Chrome DevTools로 색상 디버그

Chrome DevTools가 업데이트되었으며 개발자를 지원하는 새로운 도구가 추가되었습니다. 생성, 변환 및 디버그하는 데 유용합니다.

업데이트된 색상 선택 도구

이제 색상 선택 도구가 모든 새로운 색상 공간을 지원합니다. 작성자에게 다음 작업 허용 채널 값과 상호작용할 수 있습니다.

display-p3 색상 지원을 보여주는 DevTools

색 영역 경계

색 영역 경계선도 추가되어 srgb와 srgb 사이에 선이 그려졌습니다. display-p3 gamuts를 지원합니다 선택한 색상이 속한 영역을 명확하게 표시합니다.

색상 선택 도구에 색 영역 선을 표시하는 DevTools

이를 통해 작성자는 HD 색상과 HD가 아닌 색상을 시각적으로 구분할 수 있습니다. color() 함수 및 새로운 HD가 아닌 색상과 HD 색상을 모두 만들 수 있기 때문입니다. 만약 색상이 어떤 영역에 있는지 확인하고 싶다면 색상 선택 도구를 열어 확인하세요.

색상 변환

DevTools는 hsl과 같은 지원되는 형식 간에 색상을 변환할 수 있었습니다. hwb, rgb 및 16진수를 사용합니다. 정사각형 색상 견본의 shift + click Styles 창을 사용하여 변환을 수행합니다. 새로운 색상 도구는 변환하면 작성자가 변환 텍스트를 보고 선택할 수 있는 확인할 수 있습니다

전환할 때는 전환이 목표에 맞게 잘렸는지를 있습니다. 이제 DevTools에 변환된 색상으로 표시되는 경고 아이콘이 있어서 이 클리핑에 추가합니다.

색상 옆에 경고 아이콘이 있는 DevTools 색 영역 클리핑의 스크린샷

DevTools의 CSS 디버깅 기능에 대해 자세히 알아보세요.

다음 단계

보다 생동감 있고, 일관된 조작 및 보간을 통해 전반적으로 사용자에게 더 다채로운 환경을 제공할 수 있습니다.

색상 리소스 자세히 알아보기 를 참조하세요.