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.

Zrzut ekranu pokazujący, czy mogę używać z powszechnie dostępną plakietką w układzie siatki CSS.

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.

Zrzut ekranu pokazujący, czy można używać z nową dostępną plakietką w przypadku zapytań o kontenerach.

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

  • Chrome: 105.
  • Edge: 105.
  • Firefox: 110
  • Safari: 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

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

Źródło

Zrzut ekranu przedstawiający edytor gradient.style z gradientem od różowego do niebieskiego.
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

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 113.
  • Safari: 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

  • Chrome: 80.
  • Edge: 80.
  • Firefox: 113.
  • Safari: 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

  • Chrome: 69.
  • Krawędź: 79.
  • Firefox: 105.
  • Safari: 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

  • Chrome: 66.
  • Krawędź: ≤ 79.
  • Firefox: 115.
  • Safari: 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

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 108.
  • Safari: 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

  • Chrome: 102.
  • Edge: 102.
  • Firefox: 112.
  • Safari: 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

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 71.
  • Safari: 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

  • Chrome: 106.
  • Edge: 106.
  • Firefox: 116.
  • Safari: 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

  • Chrome: 71.
  • Krawędź: 79.
  • Firefox: 64.
  • Safari: 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

  • Chrome: 105.
  • Edge: 105.
  • Firefox: 121.
  • Safari: 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.:

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.