Berikut hal yang perlu Anda ketahui:
- CSS kini mendukung aturan bertingkat.
- Algoritma untuk menetapkan fokus awal pada elemen
<dialog>
telah diperbarui. - Pengendali
fetch()
tanpa operasi di pekerja layanan akan dilewati mulai sekarang untuk mempercepat navigasi. - Dan masih banyak lainnya.
Saya Adriana Jara. Mari kita pelajari dan lihat apa saja yang baru untuk developer di Chrome 112.
Dukungan CSS untuk pembuatan bertingkat.
Salah satu fitur preprocessor CSS favorit kami kini di-build ke dalam bahasa: aturan gaya bertingkat.
Sebelum menyusun bertingkat, setiap pemilih harus dideklarasikan secara eksplisit, secara terpisah dari satu sama lain. Hal ini menyebabkan pengulangan, bulk stylesheet, dan pengalaman penulisan yang tersebar.
.nesting { color: hotpink; } .nesting > .is { color: rebeccapurple; } .nesting > .is > .awesome { color: deeppink; }
Setelah penyematan, pemilih dapat dilanjutkan dan aturan gaya terkait dapat dikelompokkan di dalamnya.
.nesting { color: hotpink; > .is { color: rebeccapurple; > .awesome { color: deeppink; } } }
Penyusunan bertingkat membantu developer dengan mengurangi kebutuhan untuk mengulangi pemilih sekaligus menempatkan aturan gaya secara bersamaan untuk elemen terkait. Hal ini juga dapat membantu gaya cocok dengan HTML yang ditargetkan.
Jika komponen .nesting
dalam contoh dihapus dari project, Anda dapat menghapus seluruh grup, bukan menelusuri file untuk menemukan instance pemilih terkait.
Penyusunan bertingkat dapat membantu:
- Kerapian.
- Mengurangi ukuran file.
- Pemfaktoran ulang.
Lihat artikel ini untuk mendapatkan tips guna memaksimalkan tingkatan CSS dan Anda dapat menemukan dukungan untuk tingkatan di devtools di sini.
Update algoritma untuk fokus awal <dialog>
.
Elemen <dialog>
HTML adalah cara standar untuk merepresentasikan kotak dialog atau komponen interaktif lainnya, seperti notifikasi yang dapat ditutup atau sub-jendela, yang perlu ditampilkan di atas semua konten lainnya di halaman web.
Elemen HTML ini adalah cara yang direkomendasikan untuk membuat konten tersebut karena 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 diperbarui.
Mulai sekarang:
Langkah-langkah pemfokusan dialog melihat elemen yang dapat difokuskan keyboard, bukan elemen yang dapat difokuskan
Elemen <dialog>
itu sendiri mendapatkan fokus jika memiliki atribut fokus otomatis yang ditetapkan
Elemen <dialog>
itu sendiri mendapatkan fokus sebagai penggantian, bukan fokus yang "direset" ke elemen <body>
.
Baca dokumentasi untuk mengetahui detail selengkapnya tentang elemen <dialog>
.
Melewati pengendali pengambilan tanpa operasi pekerja layanan.
Mulai Chrome 112, awal layanan pekerja dan pengiriman pemroses dari jalur kritis 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 itu mungkin menjadi alasan beberapa situs pada dasarnya memiliki pengendali pengambilan yang kosong. Namun, memulai pekerja layanan dan menjalankan pemroses tanpa operasi hanya akan menimbulkan overhead, tanpa memberikan manfaat apa pun yang dapat diterapkan dengan pekerja layanan yang tepat seperti kemampuan cache atau offline. Jadi, Chrome sekarang 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
kini tidak digunakan lagi. - Ada uji coba origin untuk penghentian penggunaan
X-Requested-With header
di WebView - Perekam di devtools kini dapat merekam dengan pemilih pierce.
Bacaan lebih lanjut
Bagian ini hanya mencakup beberapa sorotan utama. Periksa link 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 terus mendapatkan info terbaru, subscribe ke channel YouTube Chrome Developers, dan Anda akan mendapatkan notifikasi email setiap kali kami meluncurkan video baru.
Saya Adriana Jara, dan segera setelah Chrome 113 dirilis, saya akan langsung memberi tahu Anda tentang yang baru di Chrome.