Migracja do koloru CSS w HD

Ten dokument jest częścią przewodnika po kolorach CSS w wysokiej rozdzielczości.

Adam Argyle

Istnieją 2 główne strategie aktualizowania koloru projektu internetowego, aby obsługiwały wyświetlacze o szerokiej gamie:

1. Przyjazne degradacje: użyj nowych przestrzeni barwowych i pozwól przeglądarce oraz systemowi operacyjnemu określić, które kolory wyświetlić na podstawie możliwości wyświetlacza.

2. Ulepszenia progresywne: użyj atrybutów @supports i @media, aby ocenić możliwości przeglądarki użytkownika, a jeśli warunki są spełnione, wyświetlaj kolory o szerokim zakresie.

Jeśli przeglądarka nie rozpoznaje koloru display-p3:

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

Jeśli przeglądarka rozpoznaje kolor display-p3:

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

Każda z nich ma swoje wady i zalety. Oto krótka lista zalet i wad:

Łagodna degradacja

• Zalety:
  • Najprostsza trasa.
  • Jeśli nie jest to wyświetlacz o szerokim zakresie, przeglądarka dostosowuje zakres do sRGB.
• Wady:
  • Przeglądarka może stosować ograniczenie gamy lub mapowanie gamy na kolor, który Ci się nie podoba.
  • Przeglądarka może nie zrozumieć żądania koloru i całkowicie zakończyć się niepowodzeniem. Można to jednak ominąć, podając kolor dwukrotnie, co spowoduje użycie poprzedniego koloru, który jest rozumiany przez przeglądarkę.

Progresywne ulepszanie

• Zalety:
  • Większa kontrola dzięki zarządzaniu zgodnością kolorów.
  • strategia addytywna, która nie wpływa na bieżące kolory.
• Wady:
  • Musisz zarządzać 2 osobnymi składniami kolorów.
  • Musisz zarządzać 2 osobnymi gamutami kolorów.

Sprawdź obsługę gamutu i przestrzeni barw

Przeglądarka umożliwia sprawdzanie dostępności usług o szerokim zakresie gamy kolorów oraz obsługi składni kolorów przez CSS i JavaScript. Dokładna gama kolorów użytkownika nie jest udostępniana. Aby chronić prywatność użytkownika, podajemy ogólną odpowiedź. Dokładne obsługiwane przestrzenie kolorów są jednak dostępne, ponieważ nie są one powiązane z możliwościami sprzętu użytkownika, jak ma to miejsce w przypadku gamutu.

Zapytania dotyczące obsługi przestrzeni barw

Poniższe przykłady kodu pozwalają sprawdzić zakres kolorów odwiedzającego na wyświetlaczu.

Sprawdzanie w usłudze porównywania cen

Najmniej konkretne zapytanie do zespołu pomocy to zapytanie o media dynamic-range:

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

O przybliżone informacje możesz poprosić zespół pomocy color-gamut w mediach:

@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 */
}

Do sprawdzania pomocy dostępne są 2 dodatkowe zapytania o multimedia:

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

Sprawdzanie z poziomu kodu JavaScript

W języku JavaScript funkcję window.matchMedia() można wywołać i przekazać do oceny w ramach zapytania o media.

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

Powyższy wzór można skopiować do pozostałych zapytań o multimedia.

Zapytania dotyczące obsługi przestrzeni kolorów

Poniższe przykłady kodu sprawdzają przeglądarkę użytkownika i wybrany przez niego gamut kolorów.

Sprawdzanie w usłudze porównywania cen

Obsługę poszczególnych przestrzeni barwowych można sprawdzić za pomocą zapytania @supports:

@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 */
}

Sprawdzanie z poziomu kodu JavaScript

W przypadku JavaScript można wywołać funkcję CSS.supports() i przekazać jej parę właściwości i wartości, aby sprawdzić, czy przeglądarka ją rozumie.

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

Łączenie kontroli sprzętu i parsowania

W oczekiwaniu na wdrożenie tych nowych funkcji kolorów w przeglądarkach warto sprawdzić zarówno możliwości sprzętowe, jak i możliwości analizowania kolorów. Podczas stopniowego poprawiania kolorów do wysokiej rozdzielczości używam często takich rozwiązań:

: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);
  }
}

Debuguj kolor za pomocą Narzędzi deweloperskich w Chrome

Narzędzie deweloperskie w Chrome zostało zaktualizowane i wyposażone w nowe narzędzia, które ułatwiają deweloperom tworzenie, konwertowanie i debugowanie kolorów HD.

Zaktualizowano selektor kolorów

Selektor kolorów obsługuje teraz wszystkie nowe przestrzenie barw. Dopuszczanie autorów do interakcji z wartościami kanału w taki sam sposób, jak gdyby mieli do nich dostęp.

Granice gamutu

Dodano też linię granicy gamutu, która oddziela gamuty sRGB i P3. Określanie, do której gamy należy wybrany kolor.

Dzięki temu autorzy mogą wizualnie odróżnić kolory HD od kolorów niebędących w HD. Jest to szczególnie przydatne podczas pracy z funkcją color() i nowymi przestrzeniami barw, ponieważ umożliwiają one generowanie kolorów w jakości HD i nie HD. Jeśli chcesz sprawdzić, w jakiej gamy kolorów jest używany Twój kolor, otwórz selektor kolorów i zobacz.

Konwertowanie kolorów

Od wielu lat Narzędzia deweloperskie potrafią przekonwertować kolory między obsługiwanymi formatami, takimi jak hsl, hwb, rgb i hex. shift + click na kwadratowym próbniku kolorów w panelu Stylów, aby przeprowadzić tę konwersję. Nowe narzędzia kolorów nie tylko przełączają konwersje, ale umożliwiają autorom okno, w którym mogą wyświetlić i wybrać konwersję.

Przy konwertowaniu warto wiedzieć, czy konwersja została przycięta, aby pasowała do miejsca na dane. W DevTools obok przekonwertowanego koloru znajduje się teraz ikona ostrzeżenia, która informuje o tym przycięciu.

Poznaj więcej funkcji debugowania CSS w Narzędziach deweloperskich.

Dalsze kroki

Bardziej żywe kolory, spójne manipulacje i interpolacje oraz ogólnie bardziej kolorowe wrażenia dla użytkowników.

Więcej informacji o zasobach dotyczących kolorów znajdziesz w przewodniku.