Temui `:has`, Pemilih Induk CSS Native

Alasan yang sering dikutip yang membuat kueri kontainer sulit atau tidak mungkin adalah hal-hal seperti loop tak terbatas—misalnya mengubah lebar elemen, membatalkan kueri kontainer, yang mengubah lebar lagi, yang membuat kueri kontainer berlaku, dll. Tapi itu diselesaikan dengan penahanan. Sebuah "pemilih induk", atau :has seperti yang sekarang telah resmi dijuluki (saya suka, begitulah cara jQuery digulung , meskipun Adrian menunjukkan tweet yang mencatat bahwa itu lebih fleksibel), secara tradisional memiliki masalah yang sama. Hal-hal seperti membutuhkan rendering "multiple pass" yang terlalu lambat untuk dapat diterima.

Brian Kardell berkata:

Terutama, bahkan tanpa :has() cukup sulit untuk memenuhi jaminan kinerja CSS, di mana semuanya terus dievaluasi dan dirender "langsung" pada 60fps. Jika Anda berpikir, secara matematis, tentang seberapa banyak pekerjaan yang secara konseptual terlibat dalam menerapkan ratusan atau ribuan aturan saat DOM berubah (termasuk saat diurai), itu adalah prestasi yang luar biasa.

Mesin telah menemukan cara untuk mengoptimalkan ini berdasarkan pola dan pengamatan cerdas yang menghindari pekerjaan yang secara konseptual diperlukan – dan banyak dari itu semacam didasarkan pada subjek invarian yang has() akan muncul untuk dibuang ke angin.

Fakta bahwa ada spesifikasi sekarang sangat menggembirakan, dan itu menarik perhatian Igalia. Rupanya, beberapa masalah kinerja telah diatasi atau, melalui pengujian, ditentukan untuk cukup diabaikan untuk tetap menjadi fitur yang dapat dikirim.

Adrian Bece menggali semuanya!

Tim di Igalia telah mengerjakan beberapa fitur mesin web yang terkenal seperti grid CSS dan kueri kontainer , jadi ada peluang bagi :has selector untuk melihat cahaya hari, tetapi jalan masih panjang.

Apa yang menjadikan pemilih relasional salah satu fitur yang paling banyak diminta dalam beberapa tahun terakhir dan bagaimana para pengembang mengatasi pemilih yang hilang? Dalam artikel ini, kita akan menjawab pertanyaan tersebut dan memeriksa spesifikasi awal dari :has selector dan melihat bagaimana seharusnya meningkatkan alur kerja penataan setelah dirilis.

Mari kita menyilangkan jari kita. Saya telah menonton ini selama 10 tahun dan mencoba mendokumentasikan kasus penggunaan .

Tautan Langsung ke ArtikelTautan Perma


Postingan Meet `:has`, A Native CSS Parent Selector muncul pertama kali di CSS-Tricks . Anda dapat mendukung Trik-CSS dengan menjadi Pendukung MVP .

July 13, 2021

codeorayo

Ampuh! Ini rahasia mengembangkan aplikasi secara instan, tinggal download dan kembangkan. Gabung sekarang juga! Premium Membership [PRIVATE] https://premium.codeorayo.com

Leave a Reply

Your email address will not be published. Required fields are marked *