Menggunakan 'susunan' harta benda tersuai untuk menjinakkan lata

CSS Custom Properties: Cara Baru untuk Mengawal Cascading dan Warisan

Sejak kelahiran CSS pada tahun 1994, cascading dan warisan telah menentukan bagaimana kami merancang di laman web. Kedua -duanya adalah ciri -ciri yang kuat, tetapi sebagai pemaju, kami mempunyai kawalan yang sangat terhad mengenai bagaimana mereka berinteraksi. Kekhususan pemilih dan pesanan kod sumber menyediakan beberapa kawalan "hierarki" yang minimum, tetapi tidak mempunyai nuansa - dan warisan memerlukan garis keturunan yang tidak terputus . Sekarang, CSS Custom Ciri -ciri membolehkan kami mengurus dan mengawal cascading dan warisan dengan cara yang baru.

Artikel ini akan menunjukkan cara menggunakan "timbunan" harta tersuai untuk menyelesaikan beberapa masalah biasa dalam cascading: dari gaya komponen scoped ke hierarki niat yang lebih jelas.

Cepat belajar mengenai sifat tersuai

Pelayar menggunakan awalan vendor (seperti -webkit- atau -moz-) untuk menentukan sifat baru dengan cara yang sama, dan kita boleh menggunakan awalan "kosong" untuk menentukan sifat tersuai kita sendiri. Seperti pembolehubah dalam SASS atau JavaScript, kita boleh menggunakannya untuk menamakan, menyimpan, dan mengambil nilai -tetapi seperti sifat -sifat lain dalam CSS, mereka dilancarkan dan diwarisi dengan DOM.

 <code>/* 定义自定义属性*/ html { --brand-color: rebeccapurple; }</code>

Untuk mengakses nilai -nilai yang ditangkap ini, kami menggunakan fungsi VAR (). Ia mempunyai dua bahagian: pertama nama harta tersuai, dan kemudian nilai sandaran apabila harta itu tidak ditakrifkan:

 <code>button { /* 如果可用，则使用--brand-color，否则回退到deeppink */ background: var(--brand-color, deeppink); }</code>

Ini bukan sandaran sokongan daripada pelayar yang lebih tua. Jika penyemak imbas tidak memahami sifat tersuai, ia mengabaikan keseluruhan perisytiharan VAR (). Sebaliknya, ini adalah cara terbina dalam untuk menangani pembolehubah yang tidak ditentukan, sama seperti timbunan fon yang mentakrifkan keluarga fon sandaran apabila fon tidak tersedia. Jika kita tidak memberikan nilai sandaran, lalai tidak ditetapkan.

Bina pemboleh ubah "timbunan"

Keupayaan untuk menentukan nilai sandaran adalah serupa dengan "stack font" yang digunakan dalam harta keluarga font. Jika siri pertama tidak tersedia, siri kedua akan digunakan, dan sebagainya. Fungsi var () hanya menerima nilai sandaran tunggal, tetapi kita boleh sarang fungsi var () untuk membuat atribut adat "stack" dari sebarang saiz:

 <code>button { /* 尝试Consolas，然后是Menlo，然后是Monaco，最后是monospace */ font-family: Consolas, Menlo, Monaco, monospace; /* 尝试--state，然后是--button-color，然后是--brand-color，最后是deeppink */ background: var(--state, var(--button-color, var(--brand-color, deeppink))); }</code>

Jika sintaks bersarang untuk menyusun sifat kelihatan besar, anda boleh menggunakan preprocessor seperti SASS untuk menjadikannya lebih padat.

Had nilai sandaran tunggal diperlukan untuk menyokong nilai sandaran yang mengandungi koma -seperti susunan fon atau imej latar belakang hierarki:

 <code>html { /* 后备值为"Helvetica, Arial, sans-serif" */ font-family: var(--my-font, Helvetica, Arial, sans-serif); }</code>

Tentukan "Skop"

Pemilih CSS membolehkan kita menyelam ke dalam pokok dan elemen gaya HTML di mana sahaja di halaman atau elemen dalam konteks bersarang tertentu.

 <code>/* 所有链接*/ a { color: slateblue; } /* section 内的链接*/ section a { color: rebeccapurple; } /* article 内的链接*/ article a { color: deeppink; }</code>

Ini berguna, tetapi ia tidak menangkap realiti gaya "modular" yang berorientasikan objek atau berasaskan komponen. Kami mungkin mempunyai banyak artikel dan selain bersarang dalam pelbagai konfigurasi. Kami memerlukan cara untuk menjelaskan konteks atau skop mana yang perlu diutamakan apabila mereka bertindih.

Skop jarak

Katakan kita mempunyai tema lampu dan tema .dark. Kita boleh menggunakan kelas-kelas ini pada elemen akar untuk menentukan nilai lalai di seluruh halaman, tetapi kita juga boleh menggunakannya kepada komponen tertentu yang bersarang dalam pelbagai cara:

Setiap kali kita menggunakan salah satu kelas corak warna, latar belakang dan sifat warna ditetapkan semula dan kemudian diwarisi oleh tajuk dan perenggan bersarang. Dalam konteks utama kami, warna mewarisi dari kelas., Manakala tajuk dan perenggan bersarang mewarisi dari kelas .dark. Warisan didasarkan pada garis keturunan langsung, jadi nenek moyang terdekat dengan nilai yang ditetapkan akan menjadi keutamaan. Kami memanggilnya berdekatan .

Jarak adalah penting untuk warisan, tetapi ia tidak memberi kesan kepada pemilih, yang bergantung kepada kekhususan. Ini menjadi masalah jika kita mahu gaya sesuatu di dalam bekas gelap atau cahaya.

Di sini saya cuba menentukan variasi butang cahaya dan gelap. Butang mod cahaya mestilah rebeccapurple dengan teks putih supaya mereka menonjol, sementara butang mod gelap harus plum dengan teks hitam. Kami secara langsung memilih butang berdasarkan konteks cahaya dan gelap, tetapi ini tidak berfungsi:

Sesetengah butang berada dalam kedua -dua konteks, dengan nenek moyang dan .dark. Dalam kes ini, apa yang kita mahu adalah untuk mengambil topik baru -baru ini (mewarisi tingkah laku jarak dekat ), tetapi apa yang kita dapat ialah pemilih kedua yang mengatasi pemilih pertama (kelakuan cascade). Oleh kerana kedua -dua pemilih ini mempunyai kekhususan yang sama, urutan kod sumber menentukan pemenang.

Sifat tersuai dan jarak dekat

Kami memerlukan cara untuk mewarisi sifat -sifat ini dari topik ini, tetapi hanya memohon kepada unsur -unsur kanak -kanak tertentu, seperti butang kami. Sifat tersuai menjadikan ini mungkin! Kita boleh menentukan nilai -nilai pada bekas cahaya dan gelap, tetapi hanya menggunakan nilai -nilai yang diwarisi pada unsur -unsur bersarang seperti butang kita.

Kami akan terlebih dahulu menetapkan butang untuk menggunakan sifat tersuai dan menggunakan nilai "lalai" sandaran sekiranya sifat -sifat tersebut tidak ditentukan:

 <code>button { background: var(--btn-color, rebeccapurple); color: var(--btn-contrast, white); }</code>

Sekarang kita dapat menetapkan nilai -nilai ini berdasarkan konteksnya, mereka akan skop kepada nenek moyang yang sesuai mengikut jarak dan warisan:

 <code>.dark { --btn-color: plum; --btn-contrast: black; } .light { --btn-color: rebeccapurple; --btn-contrast: white; }</code>

Sebagai bonus tambahan, kami menggunakan kurang kod secara keseluruhan, serta definisi butang bersatu:

Saya fikir ini adalah API untuk membuat parameter yang tersedia untuk komponen butang. Kedua -dua Sara Soueidan dan Lea Verou telah menutupi artikel -artikel baru -baru ini.

Pemilikan komponen

Kadang -kadang kedekatan tidak mencukupi untuk menentukan skop. Apabila rangka kerja JavaScript menjana "gaya skop", mereka menubuhkan pemilikan unsur -unsur objek tertentu. Komponen susun atur tab mempunyai tab itu sendiri, tetapi tidak mempunyai kandungan di belakang setiap tab. Ini juga apa yang cuba dikatakan oleh konvensyen BEM di kompleks. Block__element Names.

Nicole Sullivan mencipta istilah "skop donat" pada tahun 2011 untuk membincangkan isu ini. Walaupun saya percaya dia telah mengemas kini idea mengenai isu ini, masalah asas tidak berubah. Pemilih dan kekhususan sangat bagus untuk menerangkan bagaimana kita membina gaya terperinci di atas corak yang luas, tetapi mereka tidak menyampaikan rasa pemilikan yang jelas.

Kami boleh menggunakan timbunan harta tersuai untuk membantu menyelesaikan masalah ini. Kami terlebih dahulu akan mencipta sifat "global" pada elemen, yang digunakan untuk warna lalai kami:

 <code>html { --background--global: white; --color--global: black; --btn-color--global: rebeccapurple; --btn-contrast--global: white; }</code>

Sekarang kita boleh menggunakannya di mana sahaja kita mahu merujuknya. Kami akan menggunakan harta tema data untuk memohon warna latar depan dan latar belakang kami. Kami mahu nilai global memberikan nilai sandaran lalai, tetapi kami juga mahu pilihan untuk menulis ganti dengan topik tertentu. Di sinilah "timbunan" masuk:

 <code>[data-theme] { /* 如果没有组件值，则使用全局值*/ background: var(--background--component, var(--background--global)); color: var(--color--component, var(--color--global)); }</code>

Sekarang kita dapat menentukan komponen terbalik dengan menetapkan *-harta komponen ke belakang harta global:

 <code>[data-theme='invert'] { --background--component: var(--color--global); --color--component: var(--background--global); }</code>

Tetapi kami tidak mahu tetapan ini mewarisi dari donat pemilikan, jadi kami menetapkan semula nilai -nilai ini kepada awal (tidak ditentukan) pada setiap topik. Kita perlu melakukan ini dalam kekhususan yang lebih rendah atau urutan kod sumber yang lebih awal supaya ia memberikan nilai lalai yang setiap topik dapat menimpa:

 <code>[data-theme] { --background--component: initial; --color--component: initial; }</code>

Kata kunci awal mempunyai makna yang istimewa apabila digunakan untuk sifat tersuai, membalikkannya ke keadaan yang terjamin. Ini bermakna ia tidak akan diluluskan untuk menetapkan latar belakang: permulaan atau warna: awal, harta tersuai akan menjadi tidak jelas, dan kami akan kembali kepada nilai seterusnya dalam timbunan, iaitu tetapan global.

Kita boleh melakukan perkara yang sama dengan butang dan kemudian pastikan bahawa tema data digunakan untuk setiap komponen. Jika tiada topik tertentu diberikan, setiap komponen akan gagal untuk topik global:

Tentukan "Sumber"

Cascade CSS adalah satu siri lapisan penapisan yang digunakan untuk menentukan nilai mana yang lebih disukai apabila menentukan pelbagai nilai pada harta yang sama. Kami paling sering berinteraksi dengan lapisan tertentu , atau hierarki akhir berdasarkan urutan kod sumber -tetapi lapisan pertama lata adalah "sumber" gaya. Sumber menerangkan sumber gaya -biasanya penyemak imbas (lalai), pengguna (keutamaan), atau pengarang (AS).

Secara lalai, gaya pengarang mengatasi keutamaan pengguna dan keutamaan pengguna mengatasi lalai penyemak imbas. Perubahan ini apabila ada !important terpakai !important Terdapat beberapa sumber lain, tetapi kami tidak akan pergi ke butiran di sini.

Apabila kita membuat "timbunan" harta tersuai, kita sedang membina tingkah laku yang sangat serupa. Jika kita mahu mewakili sumber sedia ada sebagai timbunan harta tersuai, ia akan kelihatan seperti ini:

 <code>.origins-as-custom-properties { color: var(--browser-important, var(--user-important, var(--author-important, var(--author, var(--user, var(--browser)))))); }</code>

Lapisan ini sudah wujud, jadi tidak ada sebab untuk mencipta semula mereka. Tetapi apabila kita meletakkan gaya "global" dan "komponen" kami di atas, kami melakukan sesuatu yang serupa - mewujudkan lapisan sumber "komponen" yang menimpa lapisan "global" kami. Kaedah yang sama boleh digunakan untuk menyelesaikan pelbagai masalah hierarki dalam CSS, yang tidak boleh selalu digambarkan dengan kekhususan:

• Mengatasi »Komponen» Tema »Nilai lalai
• Topik »Reka bentuk sistem atau kerangka
• Status »Jenis» Nilai lalai

Mari kita lihat beberapa butang lagi. Kami memerlukan gaya butang lalai, keadaan kurang upaya dan pelbagai jenis "butang" seperti bahaya, primer, dan menengah. Kami mahu keadaan kurang upaya sentiasa menimpa varian jenis, tetapi pemilih tidak dapat menangkap perbezaan ini:

Tetapi kita boleh menentukan timbunan yang menyediakan lapisan "Jenis" dan "Negeri" mengikut urutan yang kita mahu mengutamakan:

 <code>button { background: var(--btn-state, var(--btn-type, var(--btn-default))); }</code>

Sekarang, apabila kita menetapkan dua pembolehubah, negara akan selalu diutamakan:

Saya telah mencipta kerangka warna cascading menggunakan teknik ini yang membolehkan tetapan tema tersuai berdasarkan lapisan:

• Sifat topik yang telah ditetapkan dalam html
• Keutamaan warna pengguna
• Mod cahaya dan gelap
• Default Tema Global

Campurkan dan padan

Kaedah ini boleh menjadi melampau, tetapi kebanyakan kes penggunaan harian boleh diproses menggunakan dua atau tiga nilai dalam timbunan, biasanya menggunakan teknik di atas:

• Tentukan timbunan pemboleh ubah lapisan
• Warisan menetapkan mereka berdasarkan jarak dekat dan skop
• Gunakan nilai awal dengan teliti untuk menghapuskan elemen bersarang dari skop

Kami telah menggunakan sifat -sifat tersuai ini "timbunan" dalam projek Oddbird kami. Kami masih meneroka, tetapi mereka telah membantu kami menyelesaikan masalah yang sukar diselesaikan dengan hanya pemilih dan kekhususan. Dengan sifat tersuai, kita tidak perlu melawan cascade atau warisan. Kami boleh menangkap dan menggunakannya seperti yang diharapkan dan mempunyai kawalan yang lebih baik ke atas bagaimana ia digunakan dalam setiap contoh. Bagi saya, ini adalah kemenangan besar untuk CSS - terutamanya apabila membangunkan kerangka gaya, alat dan sistem .

Atas ialah kandungan terperinci Menggunakan 'susunan' harta benda tersuai untuk menjinakkan lata. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!