Nowe przestrzenie kolorów i funkcje CSS we wszystkich głównych wyszukiwarkach

Wszystkie główne silniki obsługują teraz nowe przestrzenie kolorów i funkcje CSS. Dowiedz się, jak mogą ożywić Twoje projekty.

Rachel Andrew

CSS obsługuje teraz przestrzenie kolorów, które umożliwiają dostęp do kolorów spoza gamutu sRGB. Oznacza to, że możesz obsługiwać wyświetlacze HD (wysokiej rozdzielczości) przy użyciu kolorów z zakresów HD. W ramach tej obsługi udostępniamy nowe funkcje, które umożliwiają lepsze wykorzystanie kolorów w internecie.

Dostęp do przestrzeni barw z CSS

Mamy już kilka funkcji, które umożliwiają dostęp do kolorów w gamutach sRGB – rgb(), hsl() i hwb(). W przeglądarkach obsługiwana jest teraz funkcja color(), która jest ujednoliconym sposobem dostępu do kolorów w dowolnej przestrzeni kolorów RGB. Dotyczy to m.in. przestrzeni sRGB, Display P3 i Rec2020. Przykłady znajdziesz 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ługa przeglądarek

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 113.
  • Safari: 15.

Źródło

Obsługiwane są też funkcje, które umożliwiają dostęp do przestrzeni barw innych niż sRGB za pomocą funkcji lch(), lab(), oklch() i oklab().

Obsługa przeglądarek

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 113.
  • Safari: 15.

Źródło

Więcej informacji o tych przestrzeniach kolorów znajdziesz w przewodniku po kolorach w CSS w wysokiej rozdzielczości.

Funkcja color-mix()

Oprócz nowych przestrzeni barw wszystkie silniki obsługują teraz funkcję color-mix(). Ta funkcja umożliwia mieszanie jednego koloru z innym w dowolnej przestrzeni barw. W tym kodzie CSS kolor biały jest mieszany z 25% niebieskiego w przestrzeni barw sRGB.

.example {
  background-color: color-mix(in srgb, blue 25%, white);
}

Obsługa przeglądarek

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 113.
  • Safari: 16.2.

Źródło

color-mix() – więcej informacji

Te nowe funkcje i przestrzenie barw obiecują przynieść żywe kolory HD do sieci. Aby zaczerpnąć inspiracji, zacznij od tworzenia pięknych gradientów za pomocą generatora gradientów HD na stronie gradient.style.