Poznaj kilka interesujących funkcji, które trafiły do przeglądarek w stabilnej i wersji beta w marcu 2024 r.
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()
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.
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.
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
.
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.focus
z 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.
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.
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
.
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.
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
.