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 przewijania można teraz domyślnie zaznaczyć za pomocą klawiatury.
  • I to nie wszystko .

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

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ą znormalizowane w obu czcionkach

Wraz z uruchomieniem font-size-adjust w Chrome ta funkcja staje się dostępna w wersji podstawowej. Szczegółowe informacje znajdziesz w artykule CSS font-size-adjust jest teraz dostępne w wersji podstawowej.

Dokumentacja funkcji obrazu w obrazie: rozpowszechnianie aktywacji użytkownika

Interfejs Document Picture-in-Picture API przenosi teraz informacje o aktywacji użytkowników między oknem obrazu w obrazie dokumentu a jego oknem otwierającym.

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 ramach modułu eventów w oknie dokumentu Picture-in-Picture odbywa się w kontekście otwierania, więc ten kontekst 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>.

sekcji z przewijaniem, które można zaznaczyć za pomocą klawiatury;

Możliwość zaznaczenia kontenera za pomocą klawiatury jest ważna, ponieważ pozwala na łatwiejszy dostęp do paska przewijania i treści w nim 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 dzieje się tak tylko wtedy, gdy przewijak 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 ułatwień dostępu zalecają, aby wszystkie funkcje były dostępne za pomocą klawiatury. Elementy przewijane, które można zaznaczyć za pomocą klawiatury, ułatwiają użytkownikowi korzystanie z sekwencyjnego nawigowania po ekranie, aby uzyskać dostęp do elementów przewijających.

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. W związku z tym niektórzy użytkownicy mogą zobaczyć tę funkcję dopiero po wersji 130 lub nowszej.

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

I inne funkcje

Oczywiście istnieje też znacznie więcej możliwości.

  • Dostępne są teraz równoczesne przejścia między widokami tego samego dokumentu w ramce głównej i elementach iframe w ramce o tym samym pochodzeniu.

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

  • Panel wydajności DevTools rejestruje teraz zdarzenia wiadomości WebSocket i wyświetla je w zrzucie danych o wydajności.

Przeczytaj pełne informacje o wersji

Więcej informacji

Obejmuje to 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.