Baru di Chrome 127

Berikut hal yang perlu Anda ketahui:

  • font-size-adjust membantu Anda meningkatkan keterbacaan font pengganti.
  • Aktivasi pengguna kini disebarkan antara dokumen picture-in-picture dan pembuka.
  • Penampung scroll kini dapat difokuskan keyboard secara default.
  • Dan masih banyak lagi.

Saya Adriana Jara. Mari kita pelajari dan lihat apa yang baru untuk developer di Chrome 127.

font-size-adjust CSS

Keterbacaan situs Anda dapat menurun saat jenis font pilihan pertama tidak tersedia dan font penggantinya memiliki nilai aspek yang berbeda secara signifikan.

Gambar berikut menunjukkan perbedaan antara font Verdana dan Times meskipun teks memiliki ukuran yang sama.

Baris teks yang bertuliskan: 'Teks ini menggunakan font StreetView (14 piksel), yang memiliki huruf kecil yang relatif besar' dan 'Ini menggunakan font Times (14px), yang sulit dibaca dalam ukuran kecil'

Jika situs Anda kembali ke font Times, situs akan jauh lebih sulit dibaca.

Properti CSS font-size-adjust membantu Anda menyesuaikan ukuran font font penggantian agar nilai aspek (tinggi huruf kecil dibagi ukuran font) tetap konsisten, sehingga memastikan teks tampak serupa, terlepas dari font yang digunakan.

Pada gambar berikut, menggunakan font-size-customize mempertahankan keterbacaan antara font Verdana dan Times.

   font-size-adjust: 0.545;

Baris teks yang bertuliskan 'Teks ini menggunakan font telah dan 'Teks ini dalam font 14px Times disesuaikan dengan nilai aspek yang sama dengan font Verdana, sehingga font huruf kecil dinormalisasi di kedua font

Dengan diluncurkannya font-size-adjust di Chrome, fitur ini menjadi Dasar Pengukuran yang baru tersedia, baca detail di CSS font-size-customize kini di Dasar Pengukuran.

Picture-in-picture dokumen: menyebarkan aktivasi pengguna

Document Picture-in-Picture API sekarang menyebarkan aktivasi pengguna antara jendela picture-in-picture dokumen dan pembukanya.

Buka demo penerapan aktivasi gestur pengguna dan lihat perubahan pada warna latar belakang halaman saat aktivasi pengguna terdeteksi. Gestur pengguna disebarkan di kedua konteks, dengan mengubah latar belakang untuk kedua jendela.

Hal ini membuat aktivasi pengguna di jendela picture-in-picture dokumen dapat digunakan di dalam jendela pembuka, dan sebaliknya. Perubahan ini menjadikan penggunaan API yang dibatasi aktivasi pengguna lebih ergonomis, karena sering kali pengendali peristiwa di jendela picture-in-picture dokumen sebenarnya dijalankan dalam konteks pembuka, sehingga konteks pembuka memerlukan akses ke gestur pengguna.

Buka Picture-in-Picture untuk elemen apa pun, bukan hanya <video> untuk mengetahui detail selengkapnya.

Penampung scroll yang dapat difokuskan keyboard.

Penampung scroll yang dapat difokuskan keyboard penting agar scroller dan konten dalam scroller lebih mudah diakses oleh semua pengguna.

Mulai sekarang, scroller dapat difokuskan klik dan dapat difokuskan secara terprogram secara default. Sebelum perubahan ini, elemen scroller hanya dapat difokuskan tab jika tabindex ditetapkan secara eksplisit ke 0 atau lebih tinggi.

Perhatikan bahwa perilaku ini hanya terjadi jika scroller tidak memiliki turunan yang dapat difokuskan. Misalnya, jika scroller sudah berisi tombol, maka fokus tab akan melewati scroller dan berfokus langsung pada tombol.

Praktik terbaik aksesibilitas merekomendasikan agar semua fitur harus tersedia menggunakan keyboard. Scroller yang dapat difokuskan keyboard secara default memudahkan pengguna menggunakan navigasi fokus berurutan untuk mengakses scroller.

Lihat detail selengkapnya di Scroller yang dapat difokuskan keyboard

Dan banyak lagi!

Tentu saja masih banyak lagi.

  • Transisi tampilan dokumen yang sama serentak dalam frame utama dan iframe origin yang sama kini tersedia.

  • Teks alternatif yang dihasilkan dari konten CSS kini mendukung beberapa argumen.

  • Panel Performance DevTools kini merekam peristiwa pesan WebSocket dan menampilkannya di trace performa.

Baca catatan rilis lengkap.

Bacaan lebih lanjut

Artikel ini hanya mencakup beberapa sorotan utama. Periksa tautan berikut untuk perubahan tambahan di Chrome 127.

Langganan

Untuk mendapatkan info terbaru, berlangganan Channel YouTube Developer Chrome, dan Anda akan mendapatkan notifikasi email setiap kali kami meluncurkan video baru.

Halo Adriana Jara, dan segera setelah Chrome 127 dirilis, saya akan ada di sini untuk memberi tahu Anda apa saja yang baru di Chrome!