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.
![Zrzut ekranu z edytorem gradient.style z żywym gradientem od różowego do niebieskiego.](https://web.developers.google.cn/static/blog/baseline2023/image/gradient-style.png?authuser=9&hl=pl)
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
iselectRange
- 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
irlh
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.