Element bazowy 2023

Baseline będzie wkrótce dostępne na caniuse.com. Z tego posta dowiesz się więcej o integracji i o niektórych funkcjach, które w 2023 r. zaczęły być dostępne w ramach funkcji Baseline.

W przypadku nowej definicji punktu odniesienia na cyklu życia funkcji składają się 2 etapy: gdy staje się ona odnowiona oraz gdy po 30 miesiącach stanie się powszechnie dostępna. Funkcja staje się częścią nowego pakietu Baseline, gdy zacznie działać w tych przeglądarkach:

• Safari (macOS i iOS)
• Firefox (na komputerze i Androidzie)
• Chrome (na komputerze i Androidzie)
• Edge (komputer)

Element bazowy znajduje się na planecie Can I Use

Kolejnym krokiem do wyjaśniania dostępności funkcji jest od dziś usługa Baseline będzie mogła używać. Odwiedzając niektóre strony w programie Can I Use, zobaczysz plakietkę informującą, czy dana funkcja jest powszechnie dostępna.

Funkcje, które pojawią się w nowej wersji podstawowej, będą również oznaczone plakietką wraz z rokem ich udostępnienia. Wszystkie elementy, które w tym roku zaczęły działać w podstawowym zestawie przeglądarek, wchodzą w skład Baseline 2023.

Z dalszej części tego posta dowiesz się więcej o funkcjach, które osiągnęły ten kamień milowy w 2023 roku. Wszystkie te funkcje są w wersji Baseline 2023.

Dopasuj rozmiar zapytań dotyczących kontenerów i jednostek zapytań dotyczących kontenerów

Zapytania o kontenery dotyczące rozmiaru umożliwiają wysyłanie zapytań o rozmiar elementu w ten sam sposób, w jaki zapytania o multimedia umożliwiają zapytania o rozmiar widocznego obszaru. Ułatwiają one tworzenie komponentów wielokrotnego użytku, które dostosowują się do rozmiaru obszaru, w którym są umieszczone.

Projekt tej karty zmienia się w zależności od szerokości komponentu. Więcej informacji znajdziesz w artykule Zapytania o kontenery trafiają do przeglądarek stabilnych.

Nowe przestrzenie kolorów i funkcje

CSS obsługuje teraz przestrzenie kolorów, dzięki którym możesz uzyskać dostęp do kolorów spoza zakresu sRGB. Oznacza to, że wyświetlacze HD (HD) mogą być wyświetlane w kolorach zgodnych z HD gamut.

Nowe modele kolorów

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

Funkcja color-mix()

Ponadto w ramach funkcji Baseline pojawiły się nowe funkcje związane z kolorami. Funkcja color-mix() umożliwia mieszanie 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()

Funkcja color()

Funkcji color() można używać w przypadku dowolnej przestrzeni kolorów, która określa kolory za pomocą kanałów R, G i B. color() najpierw przyjmuje parametr przestrzeni kolorów, a następnie serię wartości kanałów dla RGB i opcjonalnie część alfa. Możesz użyć tych identyfikatorów: srgb, srgb-linear, display-p3, a98-rgb, prophoto-rgb, rec2020, xyz, xyz-d50 i xyz-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);
}

W przewodniku po kolorach wysokiej rozdzielczości CSS znajdziesz więcej przykładów nowych przestrzeni kolorów i funkcji, a także informacje o tym, których używać w odpowiednim czasie.

Strumienie kompresji

Compression Streams API to interfejs JavaScript API służący do kompresowania i dekompresji strumieni danych. Aplikacje korzystające z tej wbudowanej kompresji nie muszą już zawierać biblioteki kompresji.

Więcej informacji znajdziesz w artykule Strumienie kompresji są teraz obsługiwane we wszystkich przeglądarkach.

Obszar roboczy poza ekranem

Wcześniej możliwości rysowania na płótnie były powiązane z elementem <canvas>, co oznaczało, że zależało bezpośrednio od DOM. OffscreenCanvas odłącza DOM od interfejsu Canvas API, przesuwając obszar roboczy poza ekran.

Dzięki temu rozwiązaniu renderowanie obiektów OffscreenCanvas jest w pełni odłączone od DOM, dzięki czemu można przyspieszyć pracę w porównaniu ze zwykłym obszarem roboczym, ponieważ nie ma między nimi synchronizacji. Można go też wykorzystać do przeniesienia zadań renderowania do instancji Web Worker, mimo że nie jest dostępny model DOM, co pozwoli zwolnić wątek główny i sprawić, że aplikacja będzie bardziej responsywna.

Więcej informacji znajdziesz w artykule OffscreenCanvas – przyspiesz operacje na kanwach dzięki narzędziu Web Worker

Wstępne wczytywanie modułu

Wstępne wczytywanie modułów może skrócić czas pobierania i przetwarzania. Dodaj tag rel="modulepreload" do elementu link odwołującego się do modułu JavaScript, a przeglądarka pobiera ten moduł, analizuje i kompiluje go, a potem umieszcza wyniki w mapie modułu gotowej do wykonania.

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

Funkcje trygonometryczne w CSS

W 2023 r. funkcje trygonometryczne ze specyfikacji wartości CSS i jednostki poziomu 4 zaczęły współdziałać. Oznacza to, że funkcje sin(), cos(), tan(), asin(), acos(), atan() i atan2() są częścią punktu odniesienia w 2023 r.

Naucz się używać tych funkcji i poznaj ich przykłady w artykule Funkcje trygonometryczne w CSS.

Atrybut inert

Oznaczenie elementu DOM jako inert usuwa z niego ruch lub interakcję. Atrybut inert powoduje, że przeglądarka ignoruje element:

• Zdarzenie click nie uruchomi się, gdy użytkownik kliknie element.
• Element nie zostanie zaznaczony.
• Element i jego zawartość zostały wykluczone z drzewa ułatwień dostępu.

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

Podsiatka w układzie siatki CSS

Wartość subgrid dla grid-template-columns i grid-template-rows pozwala używać ścieżek zdefiniowanych w siatce nadrzędnej w zagnieżdżonych siatkach. Oznacza to, że możesz wyrównywać ze sobą elementy w oddzielnych zagnieżdżonych siatkach.

W podsiatce CSS znajdziesz przykłady i linki do wielu innych postów oraz przykłady zastosowań.

Format liczb wer. 3

Intl.NumberFormat V3 to zestaw nowych funkcji Intl.NumberFormat, który w 2023 r. stał się częścią programu Baseline. Dodatkowe funkcje:

• Trzy nowe funkcje do formatowania zakresów liczb: formatRange, formatRangeToParts i selectRange
• Wyliczenie grupowania
• Nowe opcje zaokrąglania i precyzji
• Priorytet zaokrąglania
• Zinterpretuj ciągi tekstowe jako ułamki dziesiętne
• Tryby zaokrąglania
• Podpisz na wyświetlaczu jako negatyw

Szczegółowe informacje o każdej z tych nowych funkcji znajdziesz w propozycji dotyczącej NumberFormat V3.

Pełnoekranowy interfejs API

Pełnoekranowy interfejs API umożliwia umieszczenie elementu takiego jak <video> w trybie pełnoekranowym przez wywołanie metody requestFullscreen(). Udostępnia też metody wykrywania, czy element jest w trybie pełnoekranowym i czy dokument jest w stanie umożliwiającym żądanie trybu pełnoekranowego.

Więcej informacji znajdziesz w tym przewodniku po pełnoekranowym interfejsie API w MDN.

Selektor arkusza CSS :has()

Wybieram tylko selektor :has() w wersji Baseline 2023, który 19 grudnia pojawi się w przeglądarce Firefox 121. Ten selektor służy między innymi jako selektor nadrzędny, który umożliwia wybieranie elementu na podstawie jego zawartości. Na przykład można stosować różne kody CSS w zależności od tego, czy w elemencie znajduje się obraz.

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

Więcej funkcji, które pojawiły się w programie Baseline w tym roku

Inne funkcje, które wprowadziliśmy w programie bazowym w tym roku, to między innymi:

• Konstruktywne arkusze stylów
• Złożone selektory typu n-te podrzędne w kodzie CSS
• Składnia zakresu w zapytaniach o multimedia
• Importowanie Map
• Wiele wartości w przypadku kreacji displayowej CSS
• @counter-style
• Właściwość CSS counter-set
• Funkcja wygładzania linear()
• Prywatny system plików źródła (OPFS)
• Zagnieżdżanie arkusza CSS – w tym zmiana, która dodałaby analizę swobodną.
• pseudoklasa CSS :dir()
• Jednostka długości CSS cap
• Maskowanie CSS
• Obsługa zapytań o multimedia w przypadku elementów wideo HTML <source>
• Element HTML <search>
• Leniwe ładowanie elementów <iframe> (strona w przeglądarce Firefox 121 19 grudnia)
• Jednostki wysokości wiersza poleceń lh i rlh

Wiele z tych funkcji osiągnęło interoperacyjność w ramach wspólnej pracy nad Interopem 2023. Ciekawe jest to, jak można wprowadzić funkcje w tym procesie i trafić w tryb Baseline jako od niedawna, aby stały się one powszechnie dostępne. Ułatwia to podejmowanie decyzji o tym, kiedy wdrożyć funkcje we własnych projektach.