Ten dokument jest częścią przewodnika po kolorach CSS w wysokiej rozdzielczości.
Istnieją 2 główne strategie aktualizowania koloru projektu internetowego pod kątem obsługi wyświetlaczy o szerokiej gamie:
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.
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
:
@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:
@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:
Sprawdź z kodu JavaScript
W przypadku JavaScriptu funkcję window.matchMedia()
można wywołać i przekazać do oceny zapytanie o multimedia.
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
:
@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.