Nowości na platformie internetowej w lipcu

Poznaj kilka ciekawych funkcji, które obecnie są dostępne w wersji stabilnej i beta. przeglądarek w lipcu 2024 r.

Rachel Andrew

Wersje stabilne przeglądarki

W lipcu 2024 r. Firefox 128 Safari 17.6 oraz Wersja Chrome 127 stała się stabilna. W tym poście omawiamy nowe funkcje dodane do platformy internetowej.

Składnia CSS związana z kolorami względnymi

Firefox 128 zawiera względną składnię kolorów CSS, Pozwala to utworzyć kolor odpowiadający kolorowi źródłowemu. 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);
}

Obsługa przeglądarek

  • 119
  • 119
  • 128
  • 16.4

Więcej przykładów znajdziesz w poście na blogu Względna składnia kolorów CSS. Składnia względnych kolorów jest jednym z głównych obszarów, na których koncentrujemy się w roku 2024. więc ta aktualizacja pomaga poprawić wynik dla stabilnej wersji Firefoksa.

Tekst alternatywny właściwości content

Firefox 128 obsługuje tekst alternatywny dla właściwości CSS content, gdy zawiera 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.

Obsługa przeglądarek

  • 77
  • 79
  • 128
  • 17,4

Aktualizacja w Chrome 127 sprawi, że przeglądarka będzie akceptować dowolną liczbę elementów zamiast pojedynczego ciągu, dzięki czemu możesz korzystać z funkcji attr() funkcji wyszukiwania.

Właściwość font-size-adjust

Chrome 127 zawiera interfejs font-size-adjust, który również koncentruje się na usłudze Interop w 2024 roku. Przydaje się ona, gdy może wystąpić kreacja zastępcza czcionki. ponieważ pomaga to dopasować rozmiar czcionki zastępczej do czcionki pierwszego wyboru.

Obsługa przeglądarek

  • 127
  • 127
  • 3
  • 16.4

Źródło

W tej wersji Chrome właściwość font-size-adjust staje się częścią Grupa bazowa – nowa dostępność.

Obsługa interfejsu View Migrate API w elementach iframe

W Chrome 127 dostępne będą równoczesne przejścia między widokiem tego samego dokumentu w ramce głównej a elementem iframe z tego samego źródła.

Wcześniej uruchomienie przejścia z użyciem parametru document.startViewMigrate w elemencie iframe z tej samej domeny nie działało, jeśli w tym samym czasie wykonywano przejście w ramce głównej. Przejście elementu iframe zostanie automatycznie pominięte. Teraz zostaną wykonane oba przejścia.

Kontenery przewijania możliwe do zaznaczenia za pomocą klawiatury

W Chrome 127 przewijają treści można kliknąć i automatycznie ustawić ostrość. domyślnie. Domyślnie przewijanie bez elementów podrzędnych, które można zaznaczyć, można zaznaczyć przy użyciu klawiatury.

Więcej informacji o tej zmianie znajdziesz w tym poście Elementy przewijające, które można zaznaczyć za pomocą klawiatury

Reguła @property

Firefox w wersji 128 obsługuje regułę @property i powiązany język JavaScript API. Oznacza to, że możesz tworzyć właściwości niestandardowe CSS, które definiują składnię, i wartość początkową.

Obsługa przeglądarek

  • 85
  • 85
  • 128
  • 16.4

Źródło

W poniższym przykładzie właściwość niestandardowa jest zdefiniowana w taki sposób, aby akceptuje <color> bez dziedziczenia i mieć wartość początkową hotpink.

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

Reguła @property jest teraz częścią grupy bazowej „nowo dostępne”. Więcej informacji znajdziesz w @property: nowa generacja zmiennych CSS z obsługą uniwersalnej przeglądarki.

ArrayBuffer z możliwością zmiany rozmiaru i SharedArrayBuffer z możliwością rozwoju

Z możliwością zmiany rozmiaru ArrayBuffer i możliwości rozwoju SharedArrayBuffer są teraz obsługiwane w przeglądarce Firefox 128, co pozwala na zmianę rozmiaru buforów bez konieczności przydzielania nowy bufor i skopiować do niego dane. Te usługi też dołączyły do grupy bazowej z nowością dostępną.

Obsługa przeglądarek

  • 111
  • 111
  • 128
  • 16.4

Źródło

Słowo kluczowe safe we właściwościach Flexbox

Safari 17.6 to głównie aktualizacja istniejących funkcji, ale zawiera też słowo kluczowe safe z właściwościami wyrównania Flexbox. Dzięki temu słowo kluczowe safe będzie współdziałać w różnych przeglądarkach.

Obsługa przeglądarek

  • 115
  • 115
  • 63
  • 18

Słowo kluczowe safe zapobiega wyświetlaniu treści poza do obszaru wyświetlania. Poniższy kod CodePen pokazuje, jak to działa z elementami wyśrodkowanymi. Jeśli dopasowanie center powoduje utratę danych, Zamiast niego używana jest wartość start.

Wersje przeglądarek (beta)

Przeglądarki w wersji beta dają podgląd funkcji, które pojawią się w następnej kolejności wersji stabilnej. To świetny moment, aby przetestować nowe funkcje lub usunięcia treści, które mogą mieć wpływ na Twoją witrynę, zanim trafią one na cały świat. Nowość wersji beta są Firefox 129 i Chrome 128 Safari 18 testów beta jest wciąż w toku. Te wersje wprowadzają na platformie wiele świetnych funkcji. Poznaj wydanie zawierające wszystkie szczegóły. Oto niektóre z nich.

Chrome 128 zawiera właściwość CSS ruby-align, a także zmiany w umożliwiaj podział wiersza w obrębie elementów, które mają display: ruby, parametry Zaktualizowano też właściwość zoom, aby była zgodna ze specyfikacją. Jest aktualizację do interfejsu API AudioContext w celu dodania wywołania zwrotnego przypisanego do AudiContext.onerror, który zgłasza błędy tworzenia i renderowania treści AudioContext.

Firefox 129 zawiera regułę @starting-style i transition-behavior usłudze. Te usługi staną się częścią grupy bazowej, która jest nowo dostępna Przeglądarka Firefox 129 została wydana w wersji stabilnej.