Poznaj kilka ciekawych funkcji, które w lipcu 2024 r. trafiły do stabilnych i beta wersji przeglądarek internetowych.
stabilne wersje przeglądarek,
W lipcu 2024 r. stały się stabilne wersje Firefox 128, Safari 17.6 i Chrome 127. W tym poście omawiamy nowe funkcje dodane do platformy internetowej.
Składnia kolorów względnych w CSS
Firefox 128 zawiera składnię koloru względnego w CSS, która umożliwia tworzenie koloru względem koloru źródłowego.
Ten kod CSS powoduje zmniejszenie nasycenia koloru indigo
o połowę za pomocą wartości hsl()
.
.desaturate-by-half {
background: hsl(from indigo h calc(s / 2) l);
}
Browser Support
Więcej przykładów znajdziesz w poście na blogu Składnia kolorów względnych w CSS. Składnia kolorów względnych jest jednym z obszarów, na których skupia się projekt Interop 2024, więc ta aktualizacja pomoże poprawić wynik stabilnej wersji Firefoxa.
Tekst alternatywny właściwości content
Firefox 128 obsługuje tekst alternatywny dla właściwości CSS content
, gdy zawiera ona obraz. Tekst alternatywny jest widoczny w drzewie ułatwień dostępu.
Oznacza to, że tekst alternatywny jest teraz obsługiwany we wszystkich przeglądarkach w przypadku content
.
Browser Support
Aktualizacja w Chrome 127 sprawia, że Chrome akceptuje dowolną liczbę elementów, a nie tylko jeden ciąg znaków, co umożliwia na przykład użycie funkcji attr()
.
Właściwość font-size-adjust
Chrome 127 zawiera font-size-adjust
, który jest też obszarem zainteresowania na konferencji Interop 2024.
Ta właściwość jest przydatna w sytuacjach, gdy może wystąpić czcionka zastępcza, ponieważ pomaga dopasować rozmiar czcionki zastępczej do czcionki pierwszego wyboru.
W tej wersji Chrome właściwość font-size-adjust
staje się częścią wartości domyślnej Nowo dostępne.
Obsługa interfejsu View Transition API w ramkach iframe
W Chrome 127 będą dostępne równoczesne przejścia między widokami tego samego dokumentu w głównym elemencie iframe i elemencie iframe z tej samej domeny.
Wcześniej uruchamianie przejścia widoku za pomocą document.startViewTransition w ramce iframe z tym samym źródłem nie działało, jeśli w ramce głównej miało miejsce przejście w tym samym czasie. Przejście w ramce iframe zostanie automatycznie pominięte. Teraz oba przejścia zostaną wykonane.
Kontenery z paskami przewijania, które można zaznaczyć za pomocą klawiatury
Od wersji 127 Chrome suwaki są domyślnie możliwe do zaznaczenia przez kliknięcie lub programowo. Suwaki bez elementów podrzędnych, które można zaznaczyć, są domyślnie możliwe do zaznaczenia za pomocą klawiatury.
Więcej informacji o tej zmianie znajdziesz w poście Scrollery z możliwością użycia klawiatury.
Reguła @property
Firefox 128 obsługuje regułę @property
i powiązane interfejsy API JavaScript. Oznacza to, że możesz tworzyć właściwości niestandardowe CSS, które definiują składnię, dziedziczenie i wartość początkową.
W tym przykładzie właściwość niestandardowa jest zdefiniowana tak, aby przyjmować tylko wartość <color>
, nie dziedziczyć i mieć wartość początkową hotpink
.
@property --myColor {
syntax: '<color>';
inherits: false;
initial-value: hotpink;
}
Reguła @property
jest teraz częścią dostępnych nowych wartości domyślnych. Więcej informacji znajdziesz w artykule @property: nowe generacje zmiennych CSS z uniwersalną obsługą w przeglądarkach.
Możliwość zmiany rozmiaru ArrayBuffer
i rozwijania SharedArrayBuffer
W Firefox 128 obsługiwane są teraz tablice ArrayBuffer o zmiennej wielkości i SharedArrayBuffer o zmiennej wielkości, co umożliwia zmianę rozmiaru buforów bez konieczności przydzielenia nowego bufora i przekopiowania do niego danych. Te usługi są też dostępne w ramach usługi podstawowej.
słowo kluczowe safe
w właściwościach flexbox;
Safari 17.6 to głównie wersja z poprawkami do dotychczasowych funkcji, ale zawiera też słowo kluczowe safe
do właściwości wyrównania flexbox.
Dzięki temu słowo kluczowe safe
będzie działać we wszystkich przeglądarkach.
Browser Support
Słowo kluczowe safe
zapobiega wyświetlaniu treści poza obszarem widocznym z powodu wybranego wyrównania. Ten CodePen pokazuje, jak działa to w przypadku elementów wyrównanych do środka. Jeśli wyrównanie center
powoduje utratę danych, zamiast niego używane jest wyrównanie start
.
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 129 i Chrome 128. Wersja beta Safari 18 jest nadal dostępna. Te wersje wprowadzają na platformę wiele przydatnych funkcji. Szczegóły znajdziesz w notatkach do wersji. Oto kilka najważniejszych informacji.
Chrome 128 zawiera właściwość CSS ruby-align
, a także zmiany umożliwiające stosowanie znaków końca wiersza w elementach z atrybutem display: ruby
. Właściwość zoom
została również zaktualizowana zgodnie ze specyfikacją. Wprowadziliśmy aktualizację interfejsu API AudioContext
, która dodaje funkcję wywołania zwrotnego przypisaną do AudiContext.onerror
, aby zgłaszała błędy tworzenia i renderowania AudioContext.
Firefox 129 zawiera regułę @starting-style
i właściwość transition-behavior
. Te właściwości staną się częścią dostępnych na stałe wartości domyślnych, gdy Firefox 129 zostanie wydany jako stabilna wersja.