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 zmiany koloru projektu internetowego, wyświetlacze o szerokiej gamie:

1. Bezwarunkowa degradacja: użyj nowych przestrzeni kolorów i pozwól przeglądarce system operacyjny dobiera kolor do wyświetlenia, na podstawie możliwości wyświetlacza.

2. Stopniowe ulepszenie: użyj @supports i @media, aby ocenić możliwości przeglądarki użytkownika. Jeśli są spełnione warunki, zapewnij szeroki szerokiej gamy kolorów.

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 specjalistów wady:

Pogorszenie z wrogością

• Zalety
  • Najprostsza trasa.
  • Przeglądarka ogranicza zakres mapy do sRGB, jeśli nie jest to wyświetlacz o szerokim zasięgu. w związku z tym odpowiedzialność za niego spoczywa na przeglądarce.
• Wady
  • Przeglądarka może dostosować paletę kolorów lub mapę palety kolorów do koloru, który Ci nie odpowiada.
  • Przeglądarka może nie zrozumieć żądania koloru i całkowicie zakończyć się niepowodzeniem. Jednak można temu zapobiec, określając kolor dwukrotnie. Dzięki temu funkcja kaskady i może skorzystać z poprzedniego koloru.

Stopniowe ulepszanie

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

Sprawdzanie obsługi gamy i przestrzeni kolorów

Przeglądarka umożliwia sprawdzanie obsługi szerokiej gamy funkcji i kolorów. obsługę składni CSS i JavaScript. dokładną gamę kolorów, które ma użytkownik; nie jest dostępna, podano uogólnioną odpowiedź, więc i utrzymywane informacje. Dostępna jest jednak dokładna obsługa przestrzeni kolorów, do możliwości sprzętowych użytkownika, takich jak gamut.

Pytania o pomoc dotyczącą gamy kolorów

W poniższych przykładach kodu można sprawdzić zakres kolorów odwiedzających witrynę wyświetlacz.

Sprawdź z usługi porównywania cen

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

Obsługa przeglądarek

• 98
• 98
• 100
• 13,1

Źródło

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

Zapytaj o przybliżoną lub większą pomoc color-gamut zapytanie o media:

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

Dostępne są dodatkowe 2 zapytania o multimedia:

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

Sprawdzanie za pomocą JavaScriptu

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

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ć w przypadku pozostałych zapytań o media.

Pytania o pomoc dotyczącą przestrzeni kolorów

Poniższe przykłady kodu umożliwiają sprawdzenie przeglądarki odwiedzającego użytkownika i jego wyboru z przestrzeniami kolorów, które można wykorzystać.

Sprawdź z usługi porównywania cen

O obsługę indywidualnej przestrzeni kolorów można zapytać 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 */
}

Sprawdzanie za pomocą JavaScriptu

W przypadku JavaScriptu parametr CSS.supports() można wywołać i przekazać parę właściwość-wartość, aby sprawdzić, czy przeglądarka 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 sprzętu i testów analizy

Oczekiwanie na wdrożenie nowych funkcji kolorystycznych w każdej przeglądarce warto sprawdzić zarówno możliwości sprzętowe, jak i możliwości analizy 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

Zaktualizowaliśmy Narzędzia deweloperskie w Chrome i zawierają nowe narzędzia, które pomagają programistom tworzenia, konwertowania i debugowania kolorów HD.

Zaktualizowano selektor kolorów

Selektor kolorów obsługuje teraz wszystkie nowe przestrzenie kolorów. Umożliwia autorom na interakcje z wartościami kanału w taki sam sposób jak to możliwe.

Granice gamuta

Dodaliśmy również linię granicy zakresu, która rysuje linię między srgb a Gamuty display-P3. Jasno widać, w jakiej gamie mieści się wybrany kolor.

Pozwala to autorom wizualnie odróżnić kolory HD od kolorów innych niż HD. Jest to szczególnie przydatne podczas pracy z funkcją color() oraz przestrzeni barw, bo pozwalają one rejestrować kolory zarówno w rozdzielczości innej niż HD, jak i HD. Jeśli i chcesz sprawdzić, w jakiej gamie kolorów są wybrane Twoje kolory, otwórz selektor kolorów i zobacz.

Przekonwertuj kolory

Narzędzia deweloperskie konwertują kolory między obsługiwanymi formatami, takimi jak hsl, czy hwb, rgb i hex. shift + click na kwadratowej próbce koloru w Okienko Style, które pozwala wykonać tę konwersję. Nowe narzędzia kolorów nie tylko cyklicznie konwersji, tworzą okno, w którym autorzy mogą wyświetlić do osiągnięcia pożądanego poziomu konwersji.

Przy konwersji warto wiedzieć, czy konwersja została przycięta kosmosu. Narzędzia deweloperskie mają teraz przekonwertowaną ikonę ostrzeżenia. do tego klipu.

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

Dalsze kroki

Większa wyrazistość, spójne manipulacje i interpolacje oraz ogólny aby były bardziej kolorowe.

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