Nowości w Chrome 127

Oto, co musisz wiedzieć na ten temat:

  • font-size-adjust pomaga poprawić czytelność czcionek zastępczych.
  • Aktywacje użytkowników są teraz przenoszone między dokumentami z obrazu w obrazie a ich otwieraczem.
  • Kontenery z paskami przewijania są teraz domyślnie możliwe do zaznaczenia za pomocą klawiatury.
  • I to nie wszystko .

Nazywam się Adriana Jara. Zobacz, co nowego w Chrome 127 dla deweloperów.

CSS font-size-adjust

Czytelność witryny może się zmniejszyć, gdy preferowana rodzina czcionek jest niedostępna, a czcionka zapasowa ma znacznie inną wartość wymiaru.

Na poniższym obrazku widać różnicę między czcionkami Verdana i Times, mimo że tekst ma ten sam rozmiar.

Linie tekstu z tekstem „Ten tekst używa czcionki Verdana (14 pikseli), która ma stosunkowo duże małe litery” i „Ten tekst używa czcionki Times (14 pikseli), która jest trudna do odczytania w małych rozmiarach”.

Jeśli Twoja witryna przełączy się na Times, będzie znacznie trudniejsza do odczytania.

Właściwość CSS font-size-adjust pozwala dostosować rozmiar czcionki zastępczej, aby zachować spójność wartości współczynnika (wysokość małych liter podzielona przez rozmiar czcionki), co zapewnia, że tekst wygląda podobnie bez względu na używaną czcionkę.

Na poniższym obrazie użycie atrybutu font-size-adjust zapewnia czytelność czcionek Verdana i Times.

   font-size-adjust: 0.545;

Linie tekstu z tekstem „Ten tekst używa czcionki Verdana (14 px), która ma stosunkowo duże małe litery”, „Ten tekst używa czcionki Times (14 px), która jest trudna do odczytania w małych rozmiarach” oraz „Ten tekst w czcionce Times (14 px) jest dostosowany do tej samej wartości proporcji co czcionka Verdana, więc małe litery są normalizowane w obu czcionkach

Wraz z uruchomieniem font-size-adjust w Chrome ta funkcja staje się dostępna w ramach podstawowego zestawu funkcji. Szczegółowe informacje znajdziesz w artykule CSS font-size-adjust jest teraz dostępny w ramach podstawowego zestawu funkcji.

Dokumentacja funkcji obrazu w obrazie: rozpowszechnianie aktywacji użytkownika

Interfejs Document Picture-in-Picture API rozpowszechnia teraz aktywacje użytkownika między oknem dokumentu w okienku obrazu i jego otwieraczem.

Otwórz prezentację propagowania aktywacji za pomocą gestów użytkownika i obserwuj zmiany koloru tła strony po wykryciu aktywacji. Gest użytkownika jest propagowany w obu kontekstach, zmieniając tło w obu oknach.

Dzięki temu aktywacje użytkownika w oknie obrazu w obrazie dokumentu są dostępne w oknie otwierającym i odwrotnie. Ta zmiana czyni korzystanie z interfejsów API wymagających aktywacji przez użytkownika bardziej ergonomicznym, ponieważ często przetwarzanie w obiekcie obsługującym zdarzenie w oknie dokumentu w trybie obrazu w obrazie odbywa się w kontekście otwieracza, więc kontekst otwieracza musi mieć dostęp do gestów użytkownika.

Aby dowiedzieć się więcej, otwórz okno Picture-in-Picture dla dowolnego elementu, a nie tylko dla <video>.

Kontenery z paskami przewijania, które można zaznaczyć za pomocą klawiatury.

Możliwość zaznaczenia kontenera za pomocą klawiatury jest ważna, ponieważ ułatwia dostęp do pasków przewijania i treści w nich wszystkim użytkownikom.

Od teraz suwaki będą domyślnie możliwe do zaznaczenia programowo. Przed tą zmianą pasek przewijania można było zaznaczyć za pomocą klawiatury tylko wtedy, gdy atrybut tabindex ustawiono na wartość 0 lub wyższą.

Pamiętaj, że to zachowanie występuje tylko wtedy, gdy suwak nie ma elementów podrzędnych, które można zaznaczyć. Jeśli na przykład na pasku przewijania jest już przycisk, naciśnięcie klawisza Tab spowoduje pominięcie paska i wybranie przycisku.

Sprawdzone metody dotyczące ułatwień dostępu zalecają, aby wszystkie funkcje były dostępne za pomocą klawiatury. Paski przewijania możliwe do zaznaczenia za pomocą klawiatury ułatwiają użytkownikowi korzystanie z sekwencyjnej nawigacji za pomocą kursora.

Pamiętaj, że ta zmiana jest wprowadzana u użytkowników bardzo powoli, abyśmy mogli monitorować problemy, które mogą być z nią związane. Dlatego niektórzy użytkownicy mogą nie mieć dostępu do tej funkcji do wersji 130 lub nawet później.

Więcej informacji znajdziesz w artykule Paski przewijania, które można zaznaczyć za pomocą klawiatury.

I wiele więcej!

Oczywiście jest ich znacznie więcej.

  • Dostępne są teraz równoczesne przejścia między widokami tego samego dokumentu w głównym elemencie iframe i elemencie iframe z tej samej domeny.

  • Tekst alternatywny generowany z treści CSS obsługuje teraz wiele argumentów.

  • Panel Wydajność w DevTools rejestruje teraz zdarzenia związane z komunikatami WebSocket i wyświetla je w śladzie wydajności.

Przeczytaj pełne informacje o wersji

Więcej informacji

Ta lista zawiera tylko niektóre najważniejsze informacje. Aby dowiedzieć się więcej o dodatkowych zmianach w Chrome 127, kliknij te linki.

Subskrybuj

Aby być na bieżąco, zasubskrybuj kanał w YouTube dla programistów Chrome. Otrzymasz wtedy e-maila z powiadomieniem, gdy tylko opublikujemy nowy film.

Cześć, tu Adriana Jara. Gdy tylko pojawi się nowa wersja Chrome 127, opowiem Ci, co nowego w Chrome.