Nowości w Chrome 127

Oto, co musisz wiedzieć na ten temat:

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

Usługa porównywania cen: font-size-adjust

Czytelność witryny może się zmniejszyć, jeśli rodzina czcionek pierwszego wyboru jest niedostępna, a czcionka zastępcza ma znacznie inne wartości aspektu.

Ilustracja poniżej przedstawia różnicę między czcionkami Verdana i Times, mimo że tekst ma ten sam rozmiar.

Wiersze tekstu: „W tym tekście użyto czcionki verdana (14 piks.), która zawiera stosunkowo duże małe litery”. i „To jest czcionka Times (14 pikseli), która jest nieczytelna w małym rozmiarze”.

Jeśli na Twojej stronie zostanie użyta czcionka Times, jej czytanie będzie znacznie trudniejsze.

Właściwość CSS font-size-adjust pomaga dostosować rozmiar czcionki zastępczej czcionki, by zachować spójność wartości aspektu (wysokość małych liter podzielona przez rozmiar czcionki), dzięki czemu tekst wygląda podobnie niezależnie od użytej czcionki.

Na poniższym obrazie zastosowano czytelność czcionki Verdana i Times.

   font-size-adjust: 0.545;

Wiersze tekstu: „Ten tekst wykorzystuje czcionkę verdana (14 pikseli), która zawiera stosunkowo duże małe litery, „This text is a verdana font (14px), that has been been been foto of trasly mely”, „This is the Times Font (14px), and by the verdanaly (14px), „This text using a verdana font (14px), that has been been has been fotorespondly me” (To wykorzystuje czcionkę Times (14 piks.), która jest trudna do odczytania w małym rozmiarze). oraz „Ten tekst zapisany czcionką 14px Times ma taką samą wartość co w przypadku czcionki Verdana, więc małe czcionki są normalizowane w obu tych czcionkach.

Po wprowadzeniu w Chrome interfejsu font-size-adjust ta funkcja staje się obecnie wersją bazową. Więcej informacji znajdziesz w sekcji CSS font-size-customize jest teraz w trybie Baseline.

Obraz w obrazie dokumentu: propagowanie aktywacji użytkowników

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

Otwórz prezentację dotyczącą propagacji aktywacji gestami przez użytkownika i zobacz, jak zmienia się kolor tła strony po wykryciu aktywacji użytkownika. Gest użytkownika jest stosowany w obu kontekstach i zmienia tło w obu oknach.

Dzięki temu aktywacje użytkowników w oknie obrazu w obrazie dokumentu mogą być używane w oknie otwierającym i odwrotnie. Dzięki tej zmianie korzystanie z interfejsów API zablokowanych przez użytkownika stanie się bardziej ergonomiczne, ponieważ moduły obsługi zdarzeń w oknie obrazu w obrazie dokumentu są w rzeczywistości uruchamiane w kontekście elementu otwierającego, więc kontekst osoby otwierającej wymaga dostępu do gestu użytkownika.

Odwiedź stronę Obraz w obrazie dla każdego elementu, nie tylko elementu <video>, aby dowiedzieć się więcej.

Kontenery przewijania możliwe do zaznaczenia za pomocą klawiatury.

Kontenery przewijania, które można zaznaczyć za pomocą klawiatury, są bardziej dostępne dla wszystkich użytkowników.

Od tej pory elementy przewijane można domyślnie zaznaczać kliknięciem oraz automatycznie. Wcześniej element przewijania mógł być zaznaczony tylko wtedy, gdy parametr tabindex był wyraźnie ustawiony na wartość 0 lub większą.

Pamiętaj, że dzieje się tak tylko wtedy, gdy element przewijania nie ma elementów podrzędnych, które można zaznaczyć. Jeśli na przykład pasek przewijania zawiera już przycisk, zaznaczenie klawisza Tab pominie go i przejdzie bezpośrednio na przycisk.

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.

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

I inne funkcje

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

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

  • 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

To tylko niektóre z najważniejszych informacji. Sprawdź te linki: dodatkowych zmian w Chrome 127.

Subskrybuj

Aby być na bieżąco, zasubskrybuj Kanał Chrome Developers w YouTube, a gdy będziemy mogli opublikować nowy film, otrzymasz e-maila z powiadomieniem.

Adriana Jara! Gdy tylko Chrome 127 się ukaże, od razu opowiem, co nowego w Chrome.