Nowości na platformie internetowej w marcu

Odkryj ciekawe funkcje, które zostały udostępnione w przeglądarkach stabilnych i beta w marcu 2024 r.

Stabilne wersje przeglądarek

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

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

Funkcja kolorów light-dark() została udostępniona w Chrome 123 i ułatwia dostosowywanie schematów kolorów do preferencji użytkownika. W tym przykładzie color-scheme ma wartość light dark w root. Właściwości niestandardowe używają funkcji kolorów light-dark() do ustawiania kolorów, które będą się przełączać w zależności od preferencji użytkownika dotyczących trybu jasnego i 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 szczegółów znajdziesz w przypadku kolorów zależnych od CSS color-scheme za pomocą atrybutu light-dark()

Lepsza kontrola nad danymi wejściowymi dzięki aplikacji field-sizing

Ponadto w Chrome 123 właściwość field-sizing umożliwia automatycznie rosnące pola do wprowadzania tekstu.

Stosowanie funkcji kerning do znaków interpunkcyjnych CJK z text-spacing-trim

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

Reguła CSS @scope

Safari 17.4 umożliwia @scope wybieranie elementów w konkretnych poddrzewach DOM, precyzyjne kierowanie na elementy bez tworzenia zbyt szczegółowych selektorów, które trudno jest zastąpić, oraz zbyt ścisłego łączenia selektorów ze strukturą DOM.

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

Ulepszenia funkcji obraz w obrazie

Chrome 123 zawiera 2 funkcje poprawiające komfort korzystania z obrazu w obrazie. Pierwszym z nich jest picture-in-picture tryb wyświetlania CSS. W ten sposób możesz utworzyć określone reguły CSS, które będą stosowane tylko wtedy, gdy aplikacja internetowa (częściowo) jest wyświetlana w trybie obrazu w obrazie.

Druga funkcja pozwala używać opener.focus z poziomu okna obrazu w obrazie dokumentu, aby przenieść ostrość z poziomu systemu na kartę, do której należy okno obrazu w obrazie dokumentu.

Dzięki temu w razie potrzeby możesz przywrócić oryginalną kartę na pierwszy plan. Na przykład gdy użytkownik potrzebuje dostępu do interfejsu, który nie mieści się w mniejszym oknie obrazu w obrazie.

Obsługa align-content w układzie bloku i tabeli

Chrome 123 i Safari 17.4 obsługują język align-content w układzie bloku i tabeli. Przeczytaj informacje o zmianie dotyczącej obsługi align-content.

Interfejs API routingu statycznego Service Worker

Od Chrome 123 dostępny jest interfejs Service Worker Static Routing API. Ten interfejs API umożliwia deklaratywne określanie sposobu pobierania określonych ścieżek zasobów, co oznacza, ż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 w przypadku określonych ścieżek.

Interfejs API Long Animation Frames

Chrome 123 zawiera też interfejs Long Animation Frames API, który jest aktualizacją interfejsu Long Tasks API, która pozwala lepiej zrozumieć powolne aktualizacje interfejsu użytkownika. Może to być przydatne do identyfikowania powolnych klatek animacji, które prawdopodobnie wpłyną na podstawowy wskaźnik interakcji z następnym wyrenderowaniem (INP), który mierzy czas reagowania, lub do zidentyfikowania innych zacięć interfejsu, które wpływają na płynność.

Właściwość content-visibility

Firefox w wersji 124 obsługuje właściwość CSS content-visibility. Ta właściwość określa, czy element w ogóle renderuje swoją zawartość, co pozwala przeglądarkom pominąć renderowanie treści do momentu, gdy będzie to potrzebne.

Dodanie do funkcji ArrayBuffer i grupowania tablic

W Safari 17.4 JavaScript otrzymuje nowe funkcje z obsługą właściwości detached oraz metod transfer() i transferToFixedLength() elementów ArrayBuffer.

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

Te funkcje są teraz ze sobą współpracować i dlatego dołączają do wersji Baseline Newly available.

setHTMLUnsafe i parseHTMLUnsafe

Metody setHTMLUnsafe i parseHTMLUnsafe dostarczane w Safari w wersji 17.4 pozwalają na używanie deklaracja DOM Shadow DOM z JavaScriptu. Te metody są też łatwiejszym sposobem na imperatywną analizę kodu HTML w modelu DOM w porównaniu z metodami innerHTML czy DOMParser.

Wersje przeglądarki (beta)

Wersje beta zawierają podgląd funkcji, które pojawią się w następnej stabilnej wersji przeglądarki. To doskonała okazja do przetestowania nowych funkcji lub usunięcia, które mogą wpłynąć na Twoją witrynę, zanim udostępnimy ją użytkownikom na całym świecie. Nowe wersje beta to Firefox 125 i Chrome 124. Wprowadziliśmy w nich wiele świetnych funkcji. Wszystkie szczegóły znajdziesz w informacjach o wersji. Oto kilka najważniejszych informacji.

Firefox 125 to ekscytująca wersja. Zawiera align-content bloków, dzięki czemu ta funkcja działa interaktywnie. Wśród nich znalazł się też interfejs Baseline Newly available, w skład którego wchodzi interfejs Popover API. Obsługiwana będzie też właściwość transition-behavior. Popover i transition-behavior są częścią Interop 2024.

Chrome 124 zawiera metody setHTMLUnsafe i parseHTMLUnsafe, które umożliwiają korzystanie z deklaratywnego modelu Shadow DOM w JavaScript. Dzięki temu te funkcje współdziałają ze sobą. Obejmuje też WebSocketStream API i atrybut writingsuggestions.