Baru di Chrome 112

Adriana Jara

Berikut hal yang perlu Anda ketahui:

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.

Sebelum
.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.

Setelah
.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 memaksimalkan penyusunan bertingkat CSS 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 memiliki operasi.

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.

Peringatan di DevTools untuk pengendali pengambilan pekerja layanan kosong.

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.

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!