Baru di Chrome 112

Adriana Jara

Berikut hal yang perlu Anda ketahui:

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.

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

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

Lihat artikel ini untuk mendapatkan tips guna memaksimalkan tingkatan CSS dan Anda dapat menemukan dukungan untuk tingkatan di devtools di sini.

Pembaruan 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-aplikasi, yang perlu ditampilkan di atas semua konten lainnya 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 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 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 kini tidak digunakan lagi.
  • Ada uji coba origin untuk penghentian penggunaan X-Requested-With header di WebView
  • Perekam suara di devtools kini dapat merekam dengan pemilih tombol.

Bacaan lebih lanjut

Bagian ini hanya membahas beberapa sorotan utama. Periksa link di bawah untuk perubahan tambahan di Chrome 112.

Langganan

Untuk mendapatkan info terbaru, subscribe ke 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 langsung memberi tahu Anda tentang yang baru di Chrome.