Diselesaikan oleh CSS: Donuts Scopes

Bayangkan anda mempunyai komponen web yang boleh menunjukkan banyak kandungan yang berbeza. Ia mungkin mempunyai slot di mana komponen lain boleh disuntik. Komponen induk juga mempunyai gaya tersendiri yang tidak berkaitan dengan gaya komponen kandungan yang mungkin dipegangnya.

Ini menjadikan keadaan yang mencabar:

bagaimana kita dapat menghalang gaya komponen induk dari bocor ke dalam?

Ini bukan masalah baru - Nicole Sullivan menggambarkannya kembali pada tahun 2011! Masalah utama ialah menulis CSS supaya ia tidak menjejaskan kandungan, dan dia mencipta dengan tepat sebagai

scoping donat .

"Kami memerlukan cara untuk mengatakan, bukan hanya di mana skop bermula, tetapi di mana ia berakhir. Oleh itu, donat skop ".

Walaupun scoping donat adalah isu kuno dalam tahun -tahun web, jika anda melakukan carian cepat pada "Skop Donat CSS" dalam enjin carian pilihan anda, anda mungkin melihat dua perkara:

Kebanyakan mereka bercakap tentang @scope at-rule yang masih baru-baru ini.
Hampir setiap hasil adalah dari 2021 dan seterusnya.

Kami mendapat hasil yang sama walaupun dengan pertanyaan "CSS Donut Scope -@Skop" yang bijak, dan pergi tahun demi tahun nampaknya tidak membawa apa -apa yang baru ke Jadual . Nampaknya skop donat tinggal di belakang minda kita sebagai satu lagi sakit kepala skop global CSS sehingga @scope. dan (spoiler!), Walaupun @Scope at-rule membawa jalan yang lebih mudah untuk scoping donat, saya rasa ada lebih banyak penyelesaian percubaan selama bertahun-tahun. Kami akan meneroka setiap mereka, membuat perhentian terakhir pada penyelesaian hari ini, @scope. Ini latihan yang bagus dalam sejarah CSS!

ambil, sebagai contoh, skrin permainan berikut. Kami mempunyai elemen yang bersesuaian dengan set tab dan slot. Sekiranya kita menukar warna yang sesuai, maka begitu juga warna di dalam. Kandungan.

bagaimana kita boleh menghentikan ini daripada berlaku? Saya mahu menghalang teks di dalam. Konkelompok dari mewarisi warna Parent.

hanya mengabaikannya!

Penyelesaian pertama tidak ada penyelesaian sama sekali! Mari kita lebih nyata di sini, ia bukan hanya dengan jelas mengabaikannya, tetapi menerima skop global dan gaya penulisan CSS dengan itu. Kembali ke contoh pertama kami, kami menganggap kami tidak dapat menghentikan gaya ibu bapa dari bocor ke dalam komponen kandungan, jadi kami menulis gaya ibu bapa kami dengan kurang spesifik, supaya mereka dapat ditindih oleh gaya kandungan.

body {
  color: blue;
}

.parent {
  color: orange; /* Initial background */
}

.content {
  color: blue; /* Overrides parent's background */
}

Walaupun pendekatan ini mencukupi untuk sekarang, menguruskan gaya hanya dengan kekhususan mereka sebagai projek yang semakin besar menjadi membosankan, paling baik, dan huru -hara paling teruk. Komponen mungkin berkelakuan berbeza bergantung kepada di mana mereka diletakkan dan mengubah CSS atau HTML kami dapat memecahkan gaya lain dengan cara yang tidak dijangka.

Dua sifat CSS berjalan ke bar. Barstool di bar yang sama sekali berbeza jatuh.

Thomas Fuchs

anda dapat melihat bagaimana dalam contoh kecil ini kita perlu mengatasi gaya dua kali:

skop donat cetek dengan: tidak ()

Matlamat kami maka hanya untuk skop. Parent, meninggalkan apa sahaja yang boleh dimasukkan ke dalam slot. Jadi, bukan. Konktasi tetapi selebihnya. Dengan cara ini gaya. Content tidak akan diganggu oleh gaya yang ditakrifkan dalam .paren mereka:

body {
  color: blue;
}

.parent > :not(.content) {
  color: orange;
}

anda dapat melihat perbezaan yang besar apabila kita membuka DevTools untuk setiap contoh:

sebaik penambahbaikan, contoh terakhir mempunyai jangkauan cetek. Oleh itu, jika terdapat satu lagi slot yang bersarang lebih dalam, kita tidak akan dapat mencapainya kecuali kita tahu terlebih dahulu di mana ia akan diturunkan.

Ini kerana kita menggunakan pemilih keturunan langsung (& gt;), tetapi saya tidak dapat mencari jalan untuk membuatnya berfungsi tanpa ia. Malah menggunakan gabungan pemilih kompleks di dalam: tidak () nampaknya tidak membawa di mana -mana sahaja. Sebagai contoh, kembali pada tahun 2021, Dr. Lea Verou menyebut scoping donat dengan: tidak () menggunakan koktail pemilih berikut:

Walau bagaimanapun, coretan ini kelihatan sepadan dengan kelas.

sehingga semua pelayar moden kini menyokong pemilih kompleks dalam: tidak ()! Ujian ujian: httpsJardvsWWWWsWWWWsWWshy, (@Leaverou) 28 Januari 2021

.container:not(.content *) {
  /* Donut Scoped styles (?) */
}

donat scoping dengan @scope



Jadi langkah terakhir kami untuk penyempurnaan scoping donat dapat melampaui satu lapisan DOM. Nasib baik, tahun lepas kami berbakat @scope at-rule (anda boleh membaca lebih lanjut mengenainya dalam entri Almanac). Ringkasnya, ia membolehkan kita memilih subtree di dom di mana gaya kita akan dilengkapkan, jadi tidak ada lagi skop global!

Apa yang lebih baik, kita boleh meninggalkan slot di dalam subtree yang kita pilih (biasanya dipanggil akar skop). Dalam kes ini, kita mahu gaya elemen yang tidak sesuai tanpa scoping .Content:

body {
  color: blue;
}

.parent {
  color: orange; /* Initial background */
}

.content {
  color: blue; /* Overrides parent's background */
}

Dan apa yang lebih baik, ia mengesan setiap elemen. Jadi kita tidak perlu bimbang tentang di mana kita menulis slot kita. Dalam contoh terakhir, kita boleh menulis gaya berikut untuk menukar warna teks elemen dalam .paren tanpa menyentuh.

body {
  color: blue;
}

.parent > :not(.content) {
  color: orange;
}

Walaupun ia mungkin kelihatan tidak selesa untuk menyenaraikan semua elemen yang akan kita ubah, kita tidak boleh menggunakan sesuatu seperti pemilih sejagat (*) kerana ia akan merosakkan slot bersarang. Dalam contoh ini, ia akan meninggalkan. Oleh kerana harta warna mewarisi, yang bersarang. Kandungan akan mengubah warna tanpa mengira!

dan voilà! Kedua -dua. Slot Konten berada di dalam lubang donat kami:

scoping cetek masih boleh dilakukan dengan kaedah ini, kita hanya perlu menulis semula pemilih slot kita supaya hanya langsung. Keturunan. Parent ditinggalkan dari skop. Walau bagaimanapun, kita perlu menggunakan: pemilih skop, yang merujuk kembali kepada akar scoping, atau .paren dalam kes ini:

.container:not(.content *) {
  /* Donut Scoped styles (?) */
}

kita boleh menggunakan pemilih sejagat dalam contoh ini kerana ia adalah cetek cetek.

Kesimpulan

Donut Scoping, ciri wannabe yang dicipta pada tahun 2011 akhirnya telah dibawa ke kehidupan pada tahun 2024. Walau bagaimanapun, tidak adil, untuk mengatakan bahawa ia berada di bawah radar semua orang sejak CSSWG (orang-orang di belakang menulis spec untuk ciri-ciri CSS baru) dengan jelas mempunyai niat untuk mengatasinya ketika menulis spec untuk @scope at-rule.

Apa pun yang mungkin, saya bersyukur kita boleh mempunyai scoping donat yang benar di CSS kami. Untuk beberapa tahap, kita masih perlu menunggu Firefox untuk menyokongnya. ?

Data sokongan penyemak imbas ini adalah dari Caniuse, yang mempunyai lebih terperinci. Nombor menunjukkan bahawa penyemak imbas menyokong ciri pada versi itu dan ke atas.

Atas ialah kandungan terperinci Diselesaikan oleh CSS: Donuts Scopes. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!