Element bazowy 2023

Rachel Andrew

Subskrypcja Baseline będzie wkrótce dostępna na stronie caniuse.com. Z tego posta dowiesz się, nad integracją oraz odkryć funkcje, które stały się częścią Punkt odniesienia w 2023 r.

Zgodnie z nową definicją punktu odniesienia to 2 etapy w cyklu życia funkcji: gdy staje się ona nowo dostępna gdy po 30 miesiącach staną się powszechnie dostępne. Cecha staje się częścią bazowej nowo dostępnej, gdy stanie się interoperacyjna w następujących przeglądarki:

• Safari (macOS i iOS)
• Firefox (na komputery i urządzenia z Androidem)
• Chrome (na komputery i urządzenia z Androidem)
• Edge (na komputery)

Punkt odniesienia dociera do kategorii Can I Use

Następnym krokiem do określenia dostępności funkcji jest Punkt odniesienia, trafiasz na stronę Can I Use od dzisiaj. Na niektórych stronach w sekcji „Mogę używać” zobaczysz plakietkę z informacją, czy funkcja jest powszechnie dostępna w ramach punktu odniesienia.

Funkcje, które są obecnie w wersji Baseline, również będą miały plakietkę, roku, w którym stały się dostępne. Wszystko, co zaczęło współdziałać zestaw podstawowych przeglądarek jest w tym roku częścią Baseline 2023.

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ą Punkt odniesienia 2023 – już dostępny.

Określanie rozmiaru zapytań dotyczących kontenerów i jednostek zapytań w kontenerach

Rozmiar zapytań dotyczących kontenera pozwalają wysyłać zapytania o rozmiar elementu w taki sam sposób, jak zapytania o media pozwalając określić rozmiar widocznego obszaru. Tworzy komponenty wielokrotnego użytku możesz tworzyć komponenty, które dostosowują się do wielkości obszaru. w których są umieszczone.

Obsługa przeglądarek

• 105
• 105
• 110
• 16

Źródło

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

Nowe przestrzenie kolorów 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 (o wysokiej rozdzielczości) korzystających z kolorów z HD

Nowe modele kolorystyczne

W przypadku punktu odniesienia funkcje kolorów: lch(), lab(), oklch() i oklab() przyznają dostęp do modeli kolorów LCH, Lab, OKLCH i OKLab.

Obsługa przeglądarek

• 111
• 111
• 113
• 15

Źródło

Wypróbuj nowe przestrzenie kolorów, korzystając z pliku gradient.style.

Funkcja color-mix()

Ponadto nowe funkcje kolorów stały się częścią punktu odniesienia. color-mix() umożliwia połączenie różnych kolorów w dowolnej przestrzeni barw. W poniższym CSS 25% niebieskiego koloru jest mieszane w biały w przestrzeni kolorów srgb.

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

Obsługa przeglądarek

• 111
• 111
• 113
• 15

Źródło

Więcej informacji o color-mix()

Funkcja color()

color() tej funkcji można użyć dla dowolnej przestrzeni kolorów, która określa kolory z użyciem R, G i B kanałów. Funkcja color() pobiera najpierw parametr przestrzeni kolorów, a potem ciąg dla RGB i opcjonalnie niektórych kanałów alfa. Możesz użyć następujących: 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);
}

Przewodnik po kolorach wysokiej rozdzielczości CSS znajdziesz o wiele więcej przykładów nowych przestrzeni i funkcji kolorów. i informacjami o tym, którego użyć w danym czasie.

Strumienie kompresji

Compression Streams API. to interfejs API JavaScript służący do kompresowania i dekompresowania strumieni danych. aplikacji; przy użyciu tej wbudowanej kompresji nie trzeba już dodawać biblioteki kompresji.

Obsługa przeglądarek

• 80
• 80
• 113
• 16,4

Źródło

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

Obszar roboczy poza ekranem

Przed użyciem funkcji OffscreenCanvas możliwości rysowania płótna były powiązane z <canvas> co oznacza, że bazuje bezpośrednio na modelu DOM. Oddzielne obiekty Poza ekranem DOM z interfejsu Canvas API, przenosząc obszar roboczy poza ekran.

To odłączenie powoduje całkowite odłączenie renderowania obiektu OffscreenCanvas od DOM, dlatego szybkość jest zwiększona w porównaniu ze zwykłym obszarem roboczym, brak synchronizacji między nimi. Można go również wykorzystać do przenoszenia nawet jeśli nie ma dostępnego modelu DOM, w wątku głównym i sprawiając, że aplikacja będzie bardziej elastyczna.

Obsługa przeglądarek

• 69
• 79
• 105
• 16,4

Źródło

Więcej informacji znajdziesz w artykule OffscreenCanvas – przyspieszysz operacje na płótnie dzięki skryptowi internetowemu

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 analizuje i skompiluje, a następnie umieszcza wyniki na mapie modułu do wykonania.

Obsługa przeglądarek

• 66
• ≤79
• 115
• 17

Źródło

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

Funkcje trygonometryczne w CSS

W 2023 r. funkcje trygonometryczne z Wartości CSS i Jednostek poziomu 4 specyfikacja przestała działać. Oznacza to, że funkcje sin(), cos(), tan(), asin(), acos(), atan() i atan2() są częścią punktu odniesienia 2023.

Obsługa przeglądarek

• 111
• 111
• 108
• 15,4

Źródło

Ta wersja demonstracyjna wykorzystuje funkcje trygonometryczne do przenoszenia elementów po okrągłej ścieżce wokół punktu środkowego.

Dowiedz się, jak korzystać z tych funkcji, i zapoznaj się z przykładami zastosowania w tych materiałach: Funkcje trigonometryczne w CSS.

Atrybut inert

Gdy oznaczysz element DOM jako inert, usuniesz ruch lub interakcję z tych elementów . Atrybut bezczynny powoduje, że przeglądarka ignoruje element:

• Zdarzenie click nie uruchomi się, gdy użytkownik kliknie element.
• Element nie uzyska ostrości.
• Element i jego zawartość zostaną wykluczone z drzewa ułatwień dostępu.

Obsługa przeglądarek

• 102
• 102
• 112
• 15,5

Źródło

Dodaj ten atrybut do elementów, które są poza ekranem lub w inny sposób ukryte. Więcej więcej informacji znajdziesz w artykule o atrybucie bezwładności.

Podsiatka w układzie siatki CSS

Wartość subgrid w polach grid-template-columns i grid-template-rows pozwala używasz ścieżek zdefiniowanych w siatce nadrzędnej w siatkach zagnieżdżonych. Oznacza to, że możesz: wyrównać elementy w oddzielnych zagnieżdżonych siatkach względem siebie.

Obsługa przeglądarek

• 117
• 117
• 71
• 16

Źródło

W podsiatce CSS znajdziesz przykłady i linki do wiele innych postów i przykładów wyróżniających zastosowanie podsiatki.

NumberFormat (wersja 3)

Intl.NumberFormat V3 to zestaw nowych funkcji Intl.NumberFormat, które zostały w ramach punktu odniesienia. Dodatkowe funkcje to:

• 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 znaków jako ułamki dziesiętne
• Tryby zaokrąglania
• Oznacz jako negatywną w sieci reklamowej

Obsługa przeglądarek

• 106
• 106
• 116
• 15,4

Źródło

Propozycja dotycząca formatu NumberFormat V3 o każdej z tych nowych funkcji.

Pełnoekranowy interfejs API

Pełnoekranowy interfejs API pozwala umieścić element taki jak <video> w trybie pełnoekranowym przez wywołanie metody requestFullscreen(). Udostępnia też metody wykrywania, czy element jest w trybie pełnoekranowym oraz czy dokument który umożliwia włączenie trybu pełnoekranowego.

Obsługa przeglądarek

• 71
• 79
• 64
• 16,4

Źródło

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

Selektor arkusza CSS :has()

W wersji Baseline 2023 dostępny jest selektor :has(), który znajdziesz w Firefoksie 121, 19 grudnia. Pełni on między innymi funkcję selektor nadrzędny, który umożliwia wybieranie elementu na podstawie elementów wewnątrz . Możesz na przykład stosować różne style CSS w zależności od tego, czy występują obrazu wewnątrz elementu.

Obsługa przeglądarek

• 105
• 105
• 121
• 15,4

Źródło

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

Więcej funkcji, które w tym roku dołączyły do grupy Baseline

Inne funkcje, które w tym roku stały się częścią programu Baseline, to m.in.:

• Arkusze stylów do budowania
• Złożone selektory n-tego elementu podrzędnego w CSS
• Składnia zakresu zapytań o media
• Importowanie map
• Wiele wartości w przypadku reklam displayowych w usłudze porównywania cen
• @counter-style,
• Właściwość CSS counter-set
• Funkcja wygładzania linear()
• Origin Private File System (OPFS)
• Zagnieżdżanie w CSS, łącznie ze zmianą, która dodaje analizę łagodną.
• Selektor pseudoklasy CSS :dir()
• Jednostka długości CSS cap
• Maskowanie CSS
• Obsługa zapytań o multimedia w przypadku elementów <source> wideo HTML
• Element HTML <search>
• Leniwe ładowanie elementów <iframe> (miejsce docelowe w przeglądarce Firefox 121 19 grudnia)
• Jednostki wysokości wiersza CSS lh i rlh

Wiele z tych funkcji osiągnęło interoperacyjność dzięki współpracy w raporcie Interop 2023. Ciekawe, jak funkcje można przenieść do bazy danych jako nowo dostępny, co oznacza, że staną się one powszechnie dostępne. Powoduje to utworzenie jaśniejsza ścieżka przy podejmowaniu decyzji o tym, kiedy wdrożyć funkcje we własnych projektach.