Poznaj kilka ciekawych funkcji, które w maju 2024 roku trafiły do stabilnych i beta wersji przeglądarek internetowych.
stabilne wersje przeglądarek,
W maju 2024 r. stały się stabilne wersje Firefox 126, Safari 17.5 i Chrome 125. W tym poście omawiamy nowe funkcje dodane do platformy internetowej.
Umieszczenie kotwicy w kodzie CSS
Chrome 125 zawiera pozycjonowanie kotwicy CSS. Dzięki temu możesz w sposób deklaratywny, bez użycia JavaScriptu, przypiąć element umieszczony w pozycji bezwzględnej do co najmniej jednego innego elementu na stronie (kotwic). Umieszczenie kotwic działa skutecznie, gdy kotwicy można przewijać. Typowym zastosowaniem jest umieszczenie wyskakującego okienka, np. etykiety, obok elementu, który je wywołał, lub menu wyboru z listą opcji wyskakującego okienka.
Więcej informacji znajdziesz w artykule [EN] Wprowadzenie do interfejsu CSS anchor positioning API.
Funkcje wartości skokowej CSS: round()
, mod()
i rem()
mod()
i rem()
Chrome 125 zawiera też funkcje wartości krokowych, co oznacza, że te funkcje są teraz dostępne w wersji podstawowej. Funkcja wartości stopniowej round()
, mod()
i rem()
przekształca daną wartość zgodnie z inną „wartością kroku”.
Więcej informacji znajdziesz w artykule Funkcje matematyczne wartości stopniowych w CSS są teraz dostępne w wersji bazowej 2024.
Funkcja light-dark()
Do grupy Nowo dostępne dołączyła też funkcja koloru CSS light-dark()
, która jest dostępna w Safari 17.5.
light-dark()
to funkcja, która przyjmuje 2 argumenty, z których oba muszą być typu <color>
. Jeden z nich jest wybierany w zależności od użytego schematu kolorów.
- Jeśli użyty schemat kolorów to
light
lub jest nieznany, zwracana jest obliczona wartość pierwszej wartości. - Jeśli użyty 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 za pomocą funkcji light-dark() .
Interfejs API Screen Wake Lock
W Firefox 126 udostępniliśmy interfejs Screen Wake Lock API, który jest kolejną funkcją wchodzącą w skład Nowo dostępnych funkcji bazowych. Interfejs API umożliwia zapobieganie przyciemnianiu i blokowaniu ekranu urządzenia.
Dowiedz się, jak korzystać z tej funkcji w artykule Jak utrzymać ekran włączony za pomocą interfejsu Screen Wake Lock API.
Interfejs Compute Pressure API
Interfejs Compute Pressure API udostępnia stany wysokiego poziomu, które odzwierciedlają obciążenie procesora w systemie. Umożliwia to implementacji korzystanie z odpowiednich danych o sprzęcie, aby użytkownicy mogli korzystać z całej dostępnej mocy obliczeniowej, dopóki system nie będzie narażony na niekontrolowany stres.
Ta funkcja jest dostępna w Chrome 125. Firma Intel kierowała pracami nad projektem i wdrożeniem tego interfejsu API, który pozwoli aplikacjom do rozmów wideo na dynamiczne dostosowanie 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 at-rule umożliwia zastosowanie stylu, który przeglądarka może sprawdzić, zanim element zostanie otwarty na stronie, co jest potrzebne do animacji wejścia.
Reguła @starting-style
to jedna z funkcji opisanych w artykule Cztery nowe funkcje CSS zapewniające płynne animacje otwierania i zamykania.
Wersje beta przeglądarek
Wersje beta przeglądarki umożliwiają przeglądanie funkcji, które pojawią się w następnej wersji stabilnej 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 127 i Chrome 126. Te wersje wprowadzają na platformę wiele przydatnych funkcji. Szczegóły znajdziesz w notatkach do wersji. Oto kilka najważniejszych informacji.
Chrome 126 zawiera przejścia między widokami dokumentów w przypadku nawigacji w ramach tej samej witryny. Wcześniej, aby korzystać z interfejsu View Transitions API, trzeba było przeprojektować witrynę na aplikację SPA. Już tak nie jest. Przejścia między widokami są teraz domyślnie włączone w przypadku nawigacji w ramach tego samego źródła. Możesz utworzyć przejście między 2 dokumentami z tego samego źródła.
Firefox 127 zawiera dodatkowe metody JavaScript Set: intersection()
, union()
, difference()
, symmetricDifference()
, isSubsetOf()
, isSupersetOf()
i isDisjointFrom()
.