Wszystkie główne wyszukiwarki obsługują teraz nowe przestrzenie kolorów i funkcje CSS. Dowiedz się, jak mogą dodać energię do Twoich projektów.
CSS obsługuje teraz przestrzenie kolorów, które pozwalają nam uzyskać dostęp do kolorów spoza gamy sRGB. Oznacza to, że możesz obsługiwać wyświetlacze HD (wysoka rozdzielczość) w kolorach zgodnych z gatunkami HD. Obejmuje ona nowe funkcje ułatwiające korzystanie z kolorów w internecie.
Uzyskiwanie dostępu do przestrzeni kolorów z CSS
Mamy już szereg funkcji, które umożliwiają nam dostęp do kolorów w gamie sRGB – rgb(), hsl() i hwb(). Teraz w przeglądarkach obsługiwana jest funkcja color(), czyli znormalizowany sposób uzyskiwania dostępu do kolorów w dowolnej przestrzeni kolorów RGB. Obejmuje to m.in. sRGB, wyświetlacz P3 i Rec2020. Możesz zobaczyć kilka przykładów w tym kodzie CSS:
.valid-css-color-function-colors {
--srgb: color(srgb 1 1 1);
--srgb-linear: color(srgb-linear 100% 100% 100% / 50%);
--display-p3: color(display-p3 1 1 1);
--rec2020: color(rec2020 0 0 0);
--a98-rgb: color(a98-rgb 1 1 1 / 25%);
--prophoto: color(prophoto-rgb 0% 0% 0%);
--xyz: color(xyz 1 1 1);
}
Obsługiwanych jest też kilka funkcji umożliwiających dostęp do przestrzeni kolorów innych niż sRGB za pomocą lch(), lab(), oklch() i oklab().
Więcej o tych wszystkich przestrzeniach kolorów dowiesz się z przewodnika po kolorach CSS w wysokiej rozdzielczości.
Funkcja color-mix()
Oprócz nowej przestrzeni kolorów wszystkie wyszukiwarki obsługują teraz funkcję color-mix(). Ta funkcja umożliwia łączenie kolorów z jednego koloru w dowolnej przestrzeni kolorów. W poniższym kodzie CSS 25% koloru niebieskiego jest mieszane w przestrzeni kolorów białego w przestrzeni kolorów Srgb.
.example {
background-color: color-mix(in srgb, blue 25%, white);
}
Dowiedz się więcej o color-mix()
Te nowe funkcje i przestrzenie kolorów mogą wprowadzić żywe kolory HD w internecie. Aby się zainspirować, możesz zacząć od utworzenia pięknych gradientów przy użyciu generatora gradientów HD pod adresem gradient.style.