Berikut hal yang perlu Anda ketahui:
- CSS kini mendukung aturan bertingkat.
- Algoritme untuk menetapkan fokus awal pada elemen
<dialog>
telah diperbarui. - Mulai sekarang, pengendali
fetch()
tanpa pengoperasian pada pekerja layanan dilewati untuk mempercepat navigasi. - Masih ada banyak lagi.
Saya Adriana Jara. Mari kita pelajari lebih dalam dan lihat apa yang baru untuk developer di Chrome 112.
Dukungan CSS untuk pembuatan bertingkat.
Salah satu fitur praprosesor CSS favorit kami kini terintegrasi dalam bahasa: aturan gaya bertingkat.
Sebelum pembuatan bertingkat, setiap pemilih harus dideklarasikan secara eksplisit, secara terpisah dari satu sama lain. Hal ini menyebabkan pengulangan, stylesheet massal, dan penulisan yang tersebar pengalaman yang lancar bagi developer.
.nesting { color: hotpink; } .nesting > .is { color: rebeccapurple; } .nesting > .is > .awesome { color: deeppink; }
Setelah penyusunan, pemilih dapat aturan gaya yang berkelanjutan dan terkait dengannya dapat dikelompokkan di dalamnya.
.nesting { color: hotpink; > .is { color: rebeccapurple; > .awesome { color: deeppink; } } }
Penyusunan bertingkat membantu developer mengurangi kebutuhan pemilih berulang sekaligus menentukan lokasi bersama aturan gaya untuk elemen terkait. Hal ini juga dapat membantu gaya mencocokkan HTML yang ditargetkan.
Jika komponen .nesting
dalam contoh telah dihapus dari project, Anda dapat menghapus seluruh grup, bukan menelusuri file untuk instance pemilih terkait.
Penyusunan bertingkat dapat membantu:
- Kerapian.
- Mengurangi ukuran file.
- Pemfaktoran ulang.
Baca artikel ini untuk mendapatkan tips guna memanfaatkan penyusunan bertingkat CSS secara optimal dan Anda dapat menemukan dukungan untuk bersarang di devtools di sini.
Pembaruan algoritma untuk fokus awal <dialog>
.
Elemen <dialog>
HTML adalah cara standar untuk menampilkan kotak dialog atau komponen interaktif lainnya, seperti peringatan yang dapat ditutup atau subjendela, yang perlu ditampilkan di atas semua konten lain di halaman web.
Elemen HTML ini adalah cara yang direkomendasikan untuk membuat konten seperti itu karena fitur-fiturnya dibuat untuk memberikan kegunaan dan aksesibilitas yang lebih baik dan konsisten.
Salah satu fitur tersebut adalah menangani elemen mana yang difokuskan saat dialog dibuka, dalam versi ini algoritma yang memilih elemen tersebut telah diupdate.
Mulai sekarang:
Langkah-langkah yang berfokus pada dialog akan melihat elemen yang dapat difokuskan keyboard, bukan elemen yang dapat difokuskan
Elemen <dialog>
itu sendiri menjadi fokus jika atribut fokus otomatisnya disetel
Elemen <dialog>
itu sendiri mendapatkan fokus sebagai penggantian, bukan "reset" ke elemen <body>
.
Baca dokumentasi untuk mengetahui detail selengkapnya tentang elemen <dialog>
.
Melewati pengendali pengambilan tanpa pengoperasian pekerja layanan.
Mulai Chrome 112, pekerja layanan akan dimulai dan pengiriman pemroses dari jalur penting navigasi akan dihilangkan, jika agen pengguna mengidentifikasi bahwa semua pemroses pengambilan pekerja layanan tidak beroperasi.
Fitur ini membuat navigasi halaman tersebut lebih cepat.
Memiliki pengendali pengambilan adalah salah satu persyaratan PWA agar aplikasi web dapat diinstal. Kami menduga hal tersebut mungkin menjadi penyebab beberapa situs pada dasarnya memiliki pengendali pengambilan kosong. Namun, untuk memulai pekerja layanan dan mengeksekusi pemroses tanpa pengoperasian hanya akan menimbulkan overhead, tanpa memberikan manfaat apa pun yang dapat diterapkan dengan pekerja layanan yang tepat seperti kemampuan offline atau cache. Jadi, Chrome kini melewatinya untuk meningkatkan navigasi.
Sebagai bagian dari perubahan ini, Chrome akan menampilkan peringatan konsol jika semua pemroses pengambilan pekerja layanan tidak beroperasi, dan mendorong developer untuk menghapus pemroses pengambilan tersebut.
Dan banyak lagi!
Tentu saja masih banyak lagi.
- Penyetel untuk
document.domain
sekarang tidak digunakan lagi. - Ada uji coba origin untuk penghentian
X-Requested-With header
di WebView - Perekam suara di devtools kini dapat merekam dengan pemilih tombol.
Bacaan lebih lanjut
Artikel ini hanya mencakup beberapa sorotan utama. Periksa tautan di bawah untuk perubahan tambahan di Chrome 112.
- Yang baru di Chrome DevTools (112)
- Penghentian dan penghapusan Chrome 112
- Update ChromeStatus.com untuk Chrome 112
- Daftar perubahan repositori sumber Chromium
- Kalender rilis Chrome
Langganan
Untuk mendapatkan info terbaru, berlangganan Channel YouTube Developer Chrome, dan Anda akan mendapatkan notifikasi email setiap kali kami meluncurkan video baru.
Saya Adriana Jara, dan segera setelah Chrome 113 dirilis, saya akan segera memberi tahu Anda apa yang baru di Chrome!