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 pod kątem obsługi wyświetlaczy o szerokiej gamie:

1. Wyraźna degradacja: korzystaj z nowej przestrzeni kolorów i pozwól przeglądarce i systemowi operacyjnemu określić, jaki kolor wyświetlać w zależności od możliwości wyświetlacza.

2. Stopniowe ulepszanie: za pomocą @supports i @media możesz ocenić możliwości przeglądarki użytkownika i jeśli zostaną spełnione warunki, podaj kolory o szerokiej gamie.

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 wad i zalet:

Proste pogorszenie

• Zalety:
  • Najprostszą trasą.
  • Gama przeglądarki mapuje lub ogranicza do sRGB, jeśli nie ma szerokiego zakresu, za to odpowiedzialność ponosi przeglądarka.
• Wady
  • Przeglądarka może dopasować zakres lub gamę kolorów do koloru, który Ci się nie podoba.
  • Przeglądarka może nie rozpoznać żądania koloru i całkowicie się nie udać. Można to jednak ograniczyć, określając kolor dwukrotnie, umożliwiając kaskadzie przejście do poprzedniego rozpoznawanego koloru.

Stopniowe ulepszanie

• Zalety:
  • Większa kontrola dzięki zarządzanej wierności kolorów.
  • Strategia dodawania, która nie ma wpływu na bieżące kolory.
• Wady
  • Musisz zarządzać 2 oddzielnymi składniami kolorów.
  • Musisz zarządzać 2 oddzielnymi zakresami kolorów.

Sprawdź, czy dostępna jest gama kolorów i przestrzeń kolorów

Przeglądarka umożliwia sprawdzenie obsługi szerokiej gamy funkcji i składni kolorów z kodów CSS i JavaScript. Nie udostępniamy dokładnej gamy kolorów określonych przez użytkownika. W ten sposób zapewniamy uogólnioną odpowiedź, która pozwala zachować prywatność. Dostępna jest jednak dokładna obsługa przestrzeni kolorów, ponieważ nie zależy od możliwości sprzętu użytkownika, takich jak gamut.

Zapytania dotyczące pomocy w zakresie kolorów

Poniższe przykłady kodu umożliwiają sprawdzenie zakresu kolorów na wyświetlaczu użytkownika.

Sprawdź w usłudze porównywania cen

Najmniej szczegółowe zapytanie do zespołu pomocy to zapytanie o media dynamic-range:

Obsługa przeglądarek

• 98
• 98
• 100
• 13.1

Źródło

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

Pytania o media color-gamut można zadawać w przybliżeniu, a także w innych przypadkach:

Obsługa przeglądarek

• 58
• 79
• 110
• 10

Źródło

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

Możesz też przesłać 2 dodatkowe zapytania o media w związku z kontaktem z zespołem pomocy:

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

Sprawdź z kodu JavaScript

W przypadku JavaScriptu funkcję window.matchMedia() można wywołać i przekazać do oceny zapytanie o multimedia.

Obsługa przeglądarek

• 9
• 12
• 6
• 5.1

Źródło

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 wzorzec można skopiować do pozostałych zapytań o media.

Zapytania dotyczące obsługi przestrzeni kolorów

Poniższe przykłady kodu sprawdzają przeglądarkę użytkownika odwiedzającego i wybór przestrzeni kolorów, z którymi chce pracować.

Sprawdź w usłudze porównywania cen

Indywidualną pomoc dotyczącą przestrzeni kolorów można uzyskać, wysyłając zapytanie @supports:

Obsługa przeglądarek

• 28
• 12
• 22
• 9

Źródło

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

Sprawdź z kodu JavaScript

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

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

Łączenie testów dotyczących sprzętu i analizowania

Czekając na wdrożenie nowych funkcji kolorów przez każdą przeglądarkę, warto sprawdzić zarówno sprzęt, jak i możliwości analizy kolorów. Najczęściej używam tego podczas stopniowego poprawiania kolorów do wysokiej rozdzielczości:

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

Debugowanie koloru za pomocą Narzędzi deweloperskich w Chrome

Zaktualizowaliśmy Narzędzia deweloperskie w Chrome i zawierają nowe narzędzia, które ułatwiają programistom tworzenie, konwertowanie i debugowanie kolorów HD.

Zaktualizowano selektor kolorów

Selektor kolorów obsługuje teraz wszystkie nowe przestrzenie kolorów. Pozwala autorom na interakcję z wartościami kanału tak, jak byli byli.

Granice gamuta

Dodano również linię gamutu, rysując linię między gamutami Srgb i Display-P3. Wyraźnie widać gamę kolorów, w których znajduje się wybrany kolor.

Pomoże to autorom wizualnie odróżnić kolory HD od kolorów w innych. Jest on szczególnie przydatny podczas pracy z funkcją color() i nowymi przestrzeniami kolorów, ponieważ pozwalają one wyświetlać kolory zarówno w jakości innej niż HD, jak i HD. Jeśli chcesz sprawdzić gamy kolorów, otwórz selektor kolorów i zobacz.

Konwertuj kolory

Od wielu lat są w stanie przekonwertować kolory z obsługiwanych formatów, takich jak hsl, hwb, rgb i hex. shift + click na kwadratowej próbce kolorów w panelu Style, aby wykonać tę konwersję. Nowe narzędzia do określania kolorów nie tylko cyklicznie prowadzą konwersje, ale też zapewniają twórcom okno dialogowe, w którym autorzy mogą zobaczyć i wybrać żądaną konwersję.

Podczas konwersji ważne jest, aby wiedzieć, czy została przycięta w celu dopasowania do przestrzeni. W Narzędziach deweloperskich znajdziesz teraz ikonę ostrzeżenia o skonwertowanym kolorze, która informuje o tym klipie.

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

Dalsze kroki

Bardziej żywe, spójne manipulacje i interpolacje zapewniają bardziej kolorową obsługę.

Przeczytaj więcej zasobów dotyczących kolorów w przewodniku.