Element bazowy 2023

Punkt odniesienia pojawi się na stronie caniuse.com. Z tego artykułu dowiesz się więcej o tej integracji oraz o niektórych funkcjach, które zostały dodane do Baseline w 2023 r.

Zgodnie z nową definicją wartości docelowej cykl życia funkcji składa się z 2 etapów: wprowadzenia i upowszechnienia po 30 miesięcy. Funkcja staje się częścią Bazy danych, gdy staje się interoperacyjna w tych przeglądarkach:

  • Safari (macOS i iOS)
  • Firefox (na komputerach i urządzeniach z Androidem)
  • Chrome (na komputerach i urządzeniach z Androidem)
  • Edge (na komputerze)

Podstawa docelowa: „Czy mogę używać”

Kolejnym krokiem w określaniu dostępności funkcji jest wyświetlanie informacji o podstawowych wymaganiach w sekcji „Czy mogę używać”. Podczas odwiedzania niektórych stron w witrynie Can I Use zobaczysz plakietkę informującą, czy dana funkcja jest powszechnie dostępna w ramach funkcji domyślnych.

Zrzut ekranu z plakietką „Can I Use” (Można użyć) w ramach komponentu CSS Grid Layout.

Funkcje, które są nowo dostępne w wersji podstawowej, będą również wyróżnione plakietką z rokiem, w którym zostały udostępnione. Wszystko, co w tym roku stało się interoperacyjne w głównym zestawie przeglądarek, jest częścią Baseline 2023.

Zrzut ekranu z kartą „Can I Use” (Czy mogę użyć) z nowo dostępną plakietką w sekcji Zapytania dotyczące kontenera

W dalszej części tego posta znajdziesz informacje o funkcjach, które osiągnęły ten kamień milowy w 2023 r. Wszystkie te funkcje są dostępne w ramach punktu odniesienia 2023 – nowości.

Zapytania dotyczące rozmiaru kontenera i jednostki zapytań dotyczących kontenera

Zapytania o rozmiar kontenera umożliwiają zapytanie o rozmiar elementu w podobny sposób, w jaki zapytania o multimedia umożliwiają zapytanie o rozmiar widocznego obszaru. Ułatwiają tworzenie komponentów wielokrotnego użytku, ponieważ pozwalają tworzyć komponenty, które reagują na rozmiar obszaru, w którym są umieszczone.

Browser Support

  • Chrome: 105.
  • Edge: 105.
  • Firefox: 110.
  • Safari: 16.

Source

Projekt tej karty zmienia się w zależności od szerokości komponentu. Więcej informacji znajdziesz w artykule Zapytania dotyczące kontenerów w stabilnych przeglądarkach.

Nowe przestrzenie barw i funkcje

CSS obsługuje teraz przestrzenie kolorów, które umożliwiają dostęp do kolorów spoza zakresu sRGB. Oznacza to, że możesz obsługiwać wyświetlacze HD (wysokiej rozdzielczości) przy użyciu kolorów z gamy HD.

Nowe modele kolorów

Teraz w wersji podstawowej funkcje kolorów lch(), lab(), oklch()oklab() zapewniają dostęp do modeli kolorów LCH, Lab, OKLCH i OKLab.

Browser Support

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

Source

Zrzut ekranu pokazujący edytor gradient.style z żywym gradientem od różu do błękitu.
Wypróbuj nowe przestrzenie barw za pomocą atrybutu gradient.style.

Funkcja color-mix()

Dodatkowo do Podstawy dodano nowe funkcje kolorów. Funkcja color-mix() umożliwia mieszanie jednego koloru z innym w dowolnej przestrzeni barw. W tym kodzie CSS 25% niebieskiego jest mieszane z białym w przestrzeni barw sRGB.

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

Browser Support

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

Source

Więcej informacji o color-mix()

Funkcja color()

Funkcji color() można używać w przypadku dowolnej przestrzeni barw, która określa kolory za pomocą kanałów R, G i B. color() najpierw przyjmuje parametr przestrzeni kolorów, a potem serię wartości kanałów RGB i opcjonalnie kanał alfa. Możesz użyć dowolnej z tych zasad: srgb, srgb-linear, display-p3, a98-rgb, prophoto-rgb, rec2020, xyz, xyz-d50xyz-d65. Na przykład:

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

Przewodnik po kolorach w CSS w wysokiej rozdzielczości zawiera wiele przykładów nowych przestrzeni kolorów i funkcji, a także informacje o tym, kiedy ich używać.

strumienie kompresji,

Interfejs Compression Streams API to interfejs JavaScript API do kompresowania i dekompresowania strumieni danych. Aplikacje korzystające z tej wbudowanej kompresji nie muszą już zawierać biblioteki kompresji.

Browser Support

  • Chrome: 80.
  • Edge: 80.
  • Firefox: 113.
  • Safari: 16.4.

Source

Więcej informacji znajdziesz w artykule Obsługa strumieni z kompresją we wszystkich przeglądarkach.

Obszar roboczy poza ekranem

Przed wprowadzeniem OffscreenCanvas możliwości rysowania na płótnie były powiązane z elementem <canvas>, co oznaczało, że zależały bezpośrednio od DOM. Interfejs OffscreenCanvas odłącza DOM od interfejsu Canvas API, przenosząc kanwę poza ekran.

Dzięki temu oddzieleniu renderowanie OffscreenCanvas jest całkowicie niezależne od DOM, co zapewnia pewne przyspieszenie w porównaniu z zwykłym obszarem roboczym, ponieważ nie ma między nimi synchronizacji. Można go też użyć do przeniesienia zadań związanych z renderowaniem do Web Workera, nawet jeśli nie ma dostępnego DOM, co powoduje uwolnienie wątku głównego i zwiększenie szybkości reakcji aplikacji.

Browser Support

  • Chrome: 69.
  • Edge: 79.
  • Firefox: 105.
  • Safari: 16.4.

Source

Więcej informacji znajdziesz w artykule OffscreenCanvas – przyspieszanie operacji na płótnie za pomocą web workera.

Wczytywanie modułu z wyprzedzeniem

Wstępne wczytywanie modułów może skrócić czas pobierania i przetwarzania. Dodaj rel="modulepreload" do elementu linku odwołującego się do modułu JavaScript. Przeglądarka pobiera moduł, analizuje go i skompilowuje, a potem umieszcza wyniki w mapie modułu, aby go wykonać.

Browser Support

  • Chrome: 66.
  • Edge: ≤79.
  • Firefox: 115.
  • Safari: 17.

Source

Więcej informacji znajdziesz w sekcji Wstępne wczytywanie modułów.

Funkcje trygonometryczne w CSS

W 2023 r. funkcje trygonometryczne ze specyfikacji Wartości i jednostki w CSS na poziomie 4 stały się interoperacyjne. Oznacza to, że funkcje sin(), cos(), tan(), asin(), acos(), atan()atan2() są częścią wartości domyślnej z 2023 r.

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 108.
  • Safari: 15.4.

Source

W tym pokazie funkcje trygonometryczne służą do przemieszczania elementów po ścieżce okrężnej wokół punktu centralnego.

Dowiedz się, jak używać tych funkcji i poznaj przypadki ich użycia w artykule Funkcje trygonometryczne w CSS.

Atrybut inert

Oznaczając element DOM jako inert, usuwasz jego ruch lub interakcję. Atrybut inert powoduje, że przeglądarka ignoruje element:

  • Zdarzenie click nie jest wywoływane, gdy użytkownik kliknie element.
  • Element nie będzie miał ustawionej ostrości.
  • Element i jego zawartość są wykluczone z drzewa ułatwień dostępu.

Browser Support

  • Chrome: 102.
  • Edge: 102.
  • Firefox: 112.
  • Safari: 15.5.

Source

Dodaj ten atrybut do elementów, które są poza ekranem lub w inny sposób ukryte. Więcej informacji znajdziesz w sekcji Atrybut inert.

Subgrid w układzie siatki CSS

Wartość subgrid w przypadku grid-template-columnsgrid-template-rows umożliwia korzystanie z ścieżek zdefiniowanych w siatce nadrzędnej w siatkach zagnieżdżonych. Oznacza to, że możesz dopasowywać elementy w oddzielnych zagnieżdżonych siatkach.

Browser Support

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 71.
  • Safari: 16.

Source

W artykule CSS subgrid znajdziesz kilka przykładów i linki do wielu innych postów i przykładów, które pokazują zastosowania subgridu.

NumberFormat V3

Intl.NumberFormat V3 to zestaw nowych funkcji Intl.NumberFormat, które w 2023 roku stały się częścią podstawowej wersji. Dodatkowe funkcje to:

  • 3 nowe funkcje do formatowania zakresów liczb: formatRange, formatRangeToParts i selectRange
  • Grupowanie typu wyliczeniowego
  • Nowe opcje zaokrąglania i dokładności
  • Priorytet zaokrągleń
  • interpretowanie ciągów znaków jako liczb dziesiętnych,
  • Tryby zaokrąglania
  • Wyświetlanie znaku w wersji negatywnej

Browser Support

  • Chrome: 106.
  • Edge: 106.
  • Firefox: 116.
  • Safari: 15.4.

Source

W propozycji dotyczącej wersji 3 funkcji NumberFormat znajdziesz szczegółowe informacje o tych nowych funkcjach.

Interfejs Fullscreen API

Interfejs Fullscreen API umożliwia umieszczenie elementu, takiego jak <video>, w trybie pełnoekranowym przez wywołanie metody requestFullscreen(). Zawiera też metody wykrywania, czy element jest w trybie pełnoekranowym i czy dokument jest w stanie, który umożliwia Ci wysłanie żądania trybu pełnoekranowego.

Browser Support

  • Chrome: 71.
  • Edge: 79.
  • Firefox: 64.
  • Safari: 16.4.

Source

Więcej informacji znajdziesz w przewodniku po interfejsie Fullscreen API na stronie MDN.

Selektor arkusza CSS :has()

Tylko podstawa 2023 to selektor :has(), który 19 grudnia pojawi się w Firefox 121. Ten selektor może też pełnić funkcję selektora nadrzędnego, umożliwiając wybór elementu na podstawie elementów wewnątrz niego. Możesz na przykład zastosować różne style CSS w zależności od tego, czy w elemencie znajduje się obraz.

Browser Support

  • Chrome: 105.
  • Edge: 105.
  • Firefox: 121.
  • Safari: 15.4.

Source

Więcej informacji znajdziesz w artykule :has() – selektor rodziny.

Więcej funkcji dodanych do Baseline w tym roku

Inne funkcje, które w tym roku stały się częścią Podstawy:

Wiele z tych funkcji osiągnęło interoperacyjność dzięki współpracy w ramach Interop 2023. Cieszymy się, że funkcje mogą przechodzić przez ten proces i być dostępne w wersji podstawowej jako nowe, co uruchamia odliczanie do ich udostępnienia szerokiej publiczności. Dzięki temu łatwiej będzie Ci podejmować decyzje o tym, kiedy stosować funkcje w swoich projektach.