Nowości na platformie internetowej w marcu

Poznaj kilka interesujących funkcji, które trafiły do przeglądarek w stabilnej i wersji beta w marcu 2024 r.

Rachel Andrew

stabilne wersje przeglądarek,

W marcu 2024 r. stały się stabilne wersje Firefox 124, Safari 17.4 i Chrome 123. W tym poście omawiamy nowe funkcje dodane do platformy internetowej.

Dostosuj schematy kolorów za pomocą funkcji light-dark()

Funkcja kolorów light-dark() została wprowadzona w Chrome 123 i ułatwia dostosowanie schematów kolorów do preferencji użytkownika. W tym przykładzie parametr color-scheme ma wartość light dark w kontekście root. Właściwości niestandardowe używają funkcji koloru light-dark() do ustawiania kolorów, które będą przełączane w zależności od preferencji użytkownika dotyczących trybu jasnego lub ciemnego.

:root {
  color-scheme: light dark;
  --primary-color: light-dark(#333, #fafafa);
  --primary-background: light-dark(#e4e4e4, #121212);
  --highlight-color: light-dark(hotpink, lime);
}

Więcej przykładów i informacji znajdziesz w opisie kolorów zależnych od CSS color-scheme za pomocą atrybutu light-dark()

Obsługa przeglądarek

  • Chrome: 123.
  • Edge: 123.
  • Firefox: 120.
  • Safari: 17.5.

Źródło

Lepsza kontrola danych wejściowych dzięki field-sizing

W Chrome 123 właściwość field-sizing umożliwia automatyczne powiększanie pól tekstowych.

Obsługa przeglądarek

  • Chrome: 123.
  • Edge: 123.
  • Firefox: nieobsługiwane.
  • Safari: nieobsługiwane.

Źródło

Kerning przy interpunkcji CJK z text-spacing-trim

W Chrome 123 właściwość text-spacing-trim stosuje kerning do znaków interpunkcyjnych w językach chińskim, japońskim i koreańskim (CJK), aby dostosować nadmierne odstępy. Więcej informacji znajdziesz w artykule Przedstawiamy 4 nowe międzynarodowe funkcje CSS.

Obsługa przeglądarek

  • Chrome: 123.
  • Edge: 123.
  • Firefox: nieobsługiwane.
  • Safari: nieobsługiwane.

Źródło

Reguła CSS @scope

Safari 17.4 zawiera @scope, dzięki któremu możesz wybierać elementy w określonych poddrzewach DOM, precyzyjnie kierować na elementy bez pisania zbyt szczegółowych selektorów, które trudno jest zastąpić, oraz bez zbytniego łączenia selektorów ze strukturą DOM.

Więcej informacji znajdziesz w artykule Ograniczanie zasięgu selektorów za pomocą reguły at-rule w arkuszu CSS @scope.

Obsługa przeglądarek

  • Chrome: 118.
  • Edge: 118.
  • Firefox: za pomocą flagi.
  • Safari: 17.4.

Źródło

Ulepszenia obrazu w obrazie

Chrome 123 zawiera 2 funkcje poprawiające działanie obrazu w obrazie. Pierwszą jest tryb wyświetlania CSS picture-in-picture. Dzięki temu możesz napisać konkretne reguły CSS, które będą stosowane tylko wtedy, gdy aplikacja internetowa (będąca jej częścią) wyświetla się w trybie obrazu w obrazie.

Druga funkcja umożliwia użycie opener.focusz okna obrazu w obrazie dokumentu, aby przenieść fokus na poziomie systemu na kartę, która jest właścicielem okna obrazu w obrazie dokumentu.

Dzięki temu w razie potrzeby możesz przywrócić pierwotną kartę na pierwszym planie. Na przykład wtedy, gdy użytkownik chce uzyskać dostęp do interfejsu, który nie mieści się w mniejszym oknie obrazu w obrazie.

Obsługa align-content w układzie blokowym i tabelarnym

Chrome 123 i Safari 17.4 obsługują obsługę align-content w układzie blokowym i tabeli. Dowiedz się więcej o zmianach w usłudze align-content.

Interfejs API routingu statycznego Service Worker

W Chrome 123 dostępny jest interfejs API routingu statycznego Service Worker. Ten interfejs API pozwala deklaratywnie określić sposób pobierania określonych ścieżek zasobów. Oznacza to, że przeglądarka nie musi uruchamiać skryptu service worker tylko w celu pobrania odpowiedzi z pamięci podręcznej lub bezpośrednio z sieci.

Więcej informacji znajdziesz w artykule o używaniu interfejsu Service Worker Static Routing API do pomijania skryptu service worker na określonych ścieżkach.

Long Animation Frames API

Chrome 123 zawiera też interfejs Long Animation Frames API, który jest aktualizacją interfejsu Long Tasks API. Ma on na celu ułatwienie zrozumienia wolnych aktualizacji interfejsu użytkownika. Może to być przydatne do wykrywania klatek animacji, które są wolne i mogą wpływać na podstawowy wskaźnik internetowy Interakcja do kolejnego wyrenderowania (INP), który mierzy responsywność, lub innych problemów z płynnością interfejsu.

Obsługa przeglądarek

  • Chrome: 123.
  • Edge: 123.
  • Firefox: nieobsługiwane.
  • Safari: nieobsługiwane.

Źródło

Właściwość content-visibility

Wersja 124 przeglądarki Firefox obsługuje właściwość CSS content-visibility. Ta właściwość określa, czy element ma w ogóle renderować swoje treści. Pozwala przeglądarkom pominąć renderowanie treści do czasu, gdy będą potrzebne.

Obsługa przeglądarek

  • Chrome: 85.
  • Edge: 85.
  • Firefox: 125.
  • Safari: 18.

Źródło

Dodatki do ArrayBuffer i grupowania tablic

W Safari 17.4 JavaScript zyskuje nowe funkcje dzięki obsłudze właściwości detached oraz metod transfer() i transferToFixedLength() obiektu ArrayBuffer.

Obsługa przeglądarek

  • Chrome: 114.
  • Edge: 114.
  • Firefox: 122.
  • Safari: 17.4.

Źródło

Safari 17.4 zawiera też metody grupowania tablic Object.groupBy i Map.groupBy. Więcej informacji o grupowaniu tablic znajdziesz w artykule JavaScript dostaje metody grupowania tablic.

Obsługa przeglądarek

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 119.
  • Safari: 17.4.

Źródło

Te funkcje są teraz kompatybilne i zostały dodane do listy Nowo dostępne.

setHTMLUnsafe i parseHTMLUnsafe

Metody setHTMLUnsafe i parseHTMLUnsafe dostępne w Safari 17.4 umożliwiają używanie deklaratywnego Shadow DOM z JavaScriptu. Te metody oferują też łatwiejszy sposób na imperatywne parsowanie kodu HTML do DOM w porównaniu z metodami innerHTML lub DOMParser.

Wersje beta przeglądarek

Przeglądarki w wersji beta dają podgląd funkcji, które zostaną wprowadzone w następnej stabilnej wersji przeglądarki. To świetny czas na przetestowanie nowych funkcji lub zmian, które mogą mieć wpływ na Twoją witrynę, zanim zostaną udostępnione publicznie. Nowe wersje beta to Firefox 125 i Chrome 124. Te wersje wprowadzają na platformę wiele przydatnych funkcji. Szczegóły znajdziesz w notatkach do wersji. Oto kilka najważniejszych informacji.

Firefox 125 zapowiada się na ekscytującą wersję. Obejmuje to align-content na blokach, co umożliwia współpracę z innymi funkcjami. W pakiecie, który jako część usługi Baseline Newly available, dodaliśmy też interfejs Popover API. Obsługiwana będzie też właściwość transition-behavior. Popover i transition-behavior są częścią Interop 2024.

Wersja Chrome 124 zawiera metody setHTMLUnsafe i parseHTMLUnsafe, które umożliwiają używanie deklaratywnego Shadow DOM w JavaScriptzie, dzięki czemu te funkcje są ze sobą współdziałalne. Dostępny jest też interfejs WebSocketStream API oraz atrybut writingsuggestions.