Nowości na platformie internetowej w lipcu

Poznaj kilka ciekawych funkcji, które w lipcu 2024 r. trafiły do stabilnych i beta wersji przeglądarek internetowych.

Rachel Andrew

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. Następujący CSS zmniejsza nasycenie koloru indigo o połowę przy użyciu hsl().

.desaturate-by-half {
  background: hsl(from indigo h calc(s / 2) l);
}

Więcej przykładów znajdziesz w poście na blogu Względna składnia koloró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.

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 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ównoległe 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 na temat przewijania, które można zaznaczyć za pomocą 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 poniższym przykładzie właściwość niestandardowa może przyjmować tylko wartość <color>, nie może być dziedziczona i ma wartość początkową hotpink.

@property --myColor {
  syntax: '<color>';
  inherits: false;
  initial-value: hotpink;
}

Reguła @property jest teraz częścią nowych dostępnych reguł podstawowych. Więcej informacji znajdziesz w artykule @property: nowe generacje zmiennych CSS z uniwersalną obsługą w przeglądarkach.

Możliwość zmiany rozmiaru ArrayBuffer i rozszerzania 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 kopiowania do niego danych. Te usługi są też dostępne w ramach usługi Baseline Newly Available.

słowo kluczowe safe w właściwościach flexbox;

Safari 17.6 to głównie wersja poprawek istniejących funkcji, zawiera jednak również słowo kluczowe safe odpowiadające właściwościom wyrównania Flexbox. Dzięki temu słowo kluczowe safe będzie działać we wszystkich przeglądarkach.

Słowo kluczowe safe zapobiega wyświetlaniu treści poza obszarem widocznym z powodu wybranego wyrównania. Poniższy kod CodePen pokazuje, jak to działa w przypadku elementów wyśrodkowanych. Jeśli wyrównanie center powoduje utratę danych, zamiast niego używane jest wyrównanie start.

Wersje przeglądarek (beta)

Wersje beta przeglądarki umożliwiają wgląd w funkcje, które pojawią się w następnej wersji stabilnej. To świetna okazja, by przetestować nowe funkcje lub usunięcia, które mogą mieć wpływ na Twoją witrynę jeszcze przed udostępnieniem ich wszystkim użytkownikom. Nowe wersje beta to: Firefox 129 i Chrome 128. Wersja Safari 18 w wersji beta jest nadal w toku. Te wersje wprowadzają na platformie wiele świetnych funkcji. Szczegóły znajdziesz w notatkach do wersji. Oto niektóre z nich.

Chrome 128 zawiera właściwość CSS ruby-align, a także wprowadziliśmy zmiany umożliwiające podział wierszy w elementach z atrybutem display: ruby. Zaktualizowaliśmy też właściwość zoom, by była zgodna 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. Po wydaniu wersji stabilnej Firefoxa 129 te właściwości staną się częścią usługi Baseline „Nowo dostępność”.