Baru di Chrome 112

Adriana Jara

Berikut hal yang perlu Anda ketahui:

Saya Adriana Jara. Mari selami dan lihat hal-hal baru untuk developer di Chrome 112.

Dukungan CSS untuk penyusunan bertingkat.

Salah satu fitur praprosesor CSS favorit kami kini sudah terintegrasi ke dalam bahasa: aturan gaya bertingkat.

Sebelum membuat tingkatan, setiap pemilih harus dideklarasikan secara eksplisit, secara terpisah satu sama lain. Hal ini menyebabkan pengulangan, jumlah stylesheet dalam jumlah besar, dan pengalaman penulisan yang tersebar.

Sebelum
.nesting {
  color: hotpink;
}

.nesting > .is {
  color: rebeccapurple;
}

.nesting > .is > .awesome {
  color: deeppink;
}

Setelah bertingkat, pemilih dapat dilanjutkan dan aturan gaya yang terkait dengannya dapat dikelompokkan di dalamnya.

Setelah
.nesting {
  color: hotpink;

  > .is {
    color: rebeccapurple;

    > .awesome {
      color: deeppink;
    }
  }
}

Penyusunan bertingkat membantu developer mengurangi kebutuhan untuk mengulangi pemilih sekaligus menemukan aturan gaya di lokasi yang sama untuk elemen terkait. Hal ini juga dapat membantu gaya mencocokkan dengan HTML yang ditargetkannya.

Jika komponen .nesting dalam contoh 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 guna mengetahui tips memaksimalkan penggunaan CSS bertingkat dan Anda dapat menemukan dukungan untuk menyesuaikan letaknya 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 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 semacam 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 diperbarui.

Mulai sekarang:

Langkah-langkah yang berfokus pada dialog melihat elemen yang dapat difokuskan keyboard, bukan elemen yang dapat difokuskan Elemen <dialog> itu sendiri mendapatkan fokus jika memiliki kumpulan atribut fokus otomatis

Elemen <dialog> 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 pengoperasian pekerja layanan.

Mulai Chrome 112, mulainya pekerja layanan 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.

Handler pengambilan adalah salah satu persyaratan PWA agar aplikasi web dapat diinstal. Kami menduga hal tersebut mungkin menjadi alasan beberapa situs pada dasarnya memiliki pengendali pengambilan yang kosong. Namun, untuk memulai pekerja layanan dan menjalankan pemroses tanpa pengoperasian, hanya akan menimbulkan overhead, tanpa memberikan manfaat apa pun yang dapat diimplementasikan dengan pekerja layanan yang tepat, seperti kemampuan caching 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 di devtools dapat merekam dengan pemilih menembus.

Bacaan lebih lanjut

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

Langganan

Untuk terus mengikuti 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 ada di sini untuk memberi tahu Anda apa yang baru di Chrome!