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 stały się dostępne w ramach programu Baseline w 2023 r.

W ramach nowej definicji punktu odniesienia w cyklu życia funkcji wyróżniamy 2 etapy. Po pierwsze, gdy stanie się nowo dostępny, a potem, gdy stanie się powszechnie dostępna po 30 miesiącach. Funkcja staje się częścią pakietu Baseline po wprowadzeniu zmian 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śnienia dostępności funkcji jest dodanie funkcji Baseline w wersji Can I Use. Odwiedzając niektóre strony w trybie Can I Use, zobaczysz plakietkę informującą, czy dana funkcja jest powszechnie dostępna.

Plakietka, która jest dostępna w wersji podstawowej, będzie również oznaczona rokiem dostępności. Dlatego 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 – są już dostępne.

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

Zapytania dotyczące kontenera określające rozmiar 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. Znacznie ułatwiają one tworzenie komponentów wielokrotnego użytku, ponieważ możesz tworzyć komponenty, 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 możesz obsługiwać wyświetlacze HD (wysoka rozdzielczość) w kolorach zgodnych z gatunkami HD.

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 z kanałów R, G i B. color() przyjmuje najpierw parametr przestrzeni kolorów, a potem serię wartości kanałów dla RGB i opcjonalnie niektóre alfa. Możesz użyć dowolnego z tych formató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 z nich używać.

Strumienie kompresji

Compression Streams API to interfejs API JavaScript do kompresowania i dekompresji strumieni danych. Dzięki tej wbudowanej funkcji kompresji aplikacje 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 działanie było bezpośrednio zależne od DOM. OffscreenCanvas, jak sugeruje to nazwa, oddziela DOM od interfejsu Canvas API, przenosząc go poza ekran.

Dzięki temu rozwiązaniu renderowanie obiektu OffscreenCanvas jest całkowicie oddzielone od DOM, co zapewnia pewną szybkość przyspieszenia w porównaniu ze zwykłym obszarem roboczym ze względu na brak synchronizacji między nimi. Co więcej, można go użyć do przeniesienia renderowania do instancji Web Worker, mimo że nie jest dostępny model DOM, co pozwala 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 rel="modulepreload" do elementu link odwołującego się do modułu JavaScript, a przeglądarka pobierze moduł, przeanalizuje go i skompiluje, a następnie umieszcza wyniki w mapie modułu gotowe do wykonania.

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

Funkcje trygonometryczne w CSS

W 2023 r. funkcje trygonometryczne pochodzące ze specyfikacji CSS Value i Unite Level 4 stały się interoperacyjnością. Oznacza to, że funkcje sin(), cos(), tan(), asin(), acos(), atan() i atan2() są częścią punktu odniesienia w 2023 r.

Dowiedz się, jak korzystać z tych funkcji, i poznaj niektóre ich zastosowania w artykule Funkcje trygonometryczne w CSS.

Atrybut inert

Bezczynność oznacza brak możliwości poruszania się, więc oznaczenie elementu bezwładnego powoduje usunięcie ruchu lub interakcji z tych elementów DOM. Atrybut inert powoduje, że przeglądarka ignoruje element.

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

Ten atrybut należy dodawać 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 umożliwia korzystanie ze ścieżek zdefiniowanych w siatce nadrzędnej w zagnieżdżonych siatkach. Oznacza to, że możesz wyrównywać ze sobą elementy wewnątrz tych zagnieżdżonych siatek.

W artykule Podsiatka CSS znajdziesz przykłady i linki do wielu innych postów oraz przykładów z wyróżnionymi siatkami podrzędnych.

Format liczb wer. 3

Intl.NumberFormat V3 to zestaw nowych funkcji Intl.NumberFormat, które w 2023 r. stały 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 nowych funkcji znajdziesz w ofercie pakietowej NumberFormat V3.

Pełnoekranowy interfejs API

Pełnoekranowy interfejs API umożliwia umieszczenie elementu, np. <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 atrybutu 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 elementów, które się w nim znajdują. Na przykład możesz zastosować różne kody CSS w zależności od tego, czy obraz znajduje się w elemencie, czy nie.

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

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

W tym poście przedstawiamy najważniejsze funkcje, które w tym roku wprowadziliśmy w programie Baseline.

• 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 zmianę, 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. Bardzo ekscytujące jest to, jak można wprowadzić funkcje w tym procesie. Trafiają one w grę Baseline jako niedawno dostępne, co sprawia, że staje się ona powszechnie dostępna. Ułatwia to podejmowanie decyzji o tym, kiedy wdrożyć funkcje we własnych projektach.