Odkryj ciekawe funkcje, które zostały udostępnione w wersjach stabilnych i beta w przeglądarkach internetowych w maju 2024 r.
Stabilne wersje przeglądarek
W maju 2024 r. Firefox 126, Safari 17.5 i Chrome 125 stały się stabilne. W tym poście omawiamy nowe funkcje dodane do platformy internetowej.
Pozycjonowanie zakotwiczenia CSS
Chrome 125 obejmuje pozycjonowanie zakotwiczenia CSS. Umożliwia to powiązanie absolutnie umieszczonego elementu w jednym lub wielu innych elementach strony (kotwicach) w sposób deklaratywny, bez używania JavaScriptu. Pozycjonowanie zakotwiczenia działa wydajnie, gdy można je przewijać. Typowym przypadkiem użycia jest umieszczenie wyskakującego okienka, np. etykietki, obok elementu, który go wywołał, lub menu wyboru i jego listy opcji w wyskakującym okienku.
Więcej informacji znajdziesz w artykule Przedstawiamy interfejs API pozycjonowania zakotwiczenia CSS.
Funkcje wartości krokowe CSS – round(), mod() i rem()
Chrome 125 zawiera również schodkowe funkcje wartości, co oznacza, że są one teraz dostępne jako podstawowa wersja. Funkcje wartości krokowej (round(), mod() i rem()) przekształcają daną wartość zgodnie z inną „wartością kroków”.
Dowiedz się więcej z artykułu Funkcje matematyczne oparte na wartościach krokowych CSS są teraz dostępne w programie Baseline w 2024 r.
Funkcja light-dark()
Oprócz tego wprowadziliśmy w programie Baseline Newly available funkcję CSS „color” light-dark() w przeglądarce Safari 17.5.
light-dark() to funkcja, która przyjmuje 2 argumenty, z których oba muszą być typu <color>. Jedna z nich jest wybierana w zależności od użytego schematu kolorów.
- Jeśli używany schemat kolorów to
lightlub nieznany, zwracana jest obliczona wartość pierwszej wartości. - Jeśli używany schemat kolorów to
dark, zwracana jest obliczona wartość drugiego koloru.
Więcej informacji znajdziesz w artykule Kolory zależne od schematu kolorów CSS z użyciem funkcji light-dark() .
Interfejs API funkcji Screen Wake Lock API
W przeglądarce Firefox w wersji 126 pojawia się interfejs Screen Wake Lock API, który jest teraz częścią pakietu Baseline Newly available. Ten interfejs API uniemożliwia urządzeniu przyciemnienie i zablokowanie ekranu.
Informacje o tym, jak używać tej funkcji, znajdziesz w artykule Nie usypiaj z użyciem interfejsu Screen Wake Lock API.
Compute Pressure API
Interfejs Compute Pressure API udostępnia stany wysokiego poziomu, które odzwierciedlają obciążenie procesora w systemie. Umożliwia implementację z użyciem odpowiednich podstawowych parametrów sprzętowych, aby użytkownicy mogli korzystać z całej dostępnej mocy obliczeniowej, o ile system nie jest podatny na stres.
Ta funkcja jest dostępna w Chrome 125. Za projektowaniem i wdrażaniem tego interfejsu API odpowiadała firma Intel, która umożliwia aplikacjom do rozmów wideo dynamiczne zrównoważenie funkcji i wydajności.
Przeczytaj dokumentację interfejsu Compute Pressure API.
Reguła @starting-style
Safari 17.5 zawiera regułę @starting-style. Ta reguła CSS umożliwia zastosowanie stylu, który przeglądarka może wyszukać przed otwarciem elementu na stronie, zgodnie z potrzebami animacji wpisów.
Reguła @starting-style jest jedną z funkcji omawianych w 4 nowych funkcjach CSS zapewniających płynne animacje wejścia i wyjścia.
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 127 i Chrome 126. Wprowadziliśmy w nich wiele świetnych funkcji. Wszystkie szczegóły znajdziesz w informacjach o wersji. Oto kilka najważniejszych informacji.
Chrome 126 umożliwia przełączanie widoku między dokumentami w przypadku nawigowania w tym samym źródle. Do tej pory korzystanie z interfejsu View Transitions API wymagało zmiany architektury witryny na SPA. Już tak nie jest. Przenoszenie widoków jest teraz domyślnie włączone w przypadku nawigacji w tej samej domenie. Możesz utworzyć przejście między widokami 2 różnych dokumentów tego samego pochodzenia.
W przeglądarce Firefox 127 dostępne są dodatkowe metody ustawiania kodu JavaScript – intersection(), union(), difference(), symmetricDifference(), isSubsetOf(), isSupersetOf() i isDisjointFrom().