Membuat tema warna dengan sifat tersuai, HSL, dan sedikit calc ()

Sebelum CSS Custom Properties (sering dipanggil "pembolehubah"), menguruskan pelbagai skema warna di laman web tunggal yang memerlukan stylesheets berasingan -pendekatan yang rumit. Sekarang, kita boleh menentukan pembolehubah dalam satu stylesheet tunggal dan biarkan CSS mengendalikan variasi.

Walaupun tanpa tema yang ditentukan oleh pengguna, peringatan di seluruh tapak adalah berharga. Sebagai contoh, bahagian yang berbeza mungkin menggunakan palet warna yang berbeza.

Mari kita bina contoh: Contoh kami menggunakan cahaya yang konsisten di seluruh bahagian, hanya bervariasi warna. Palet mudah untuk satu warna kelihatan seperti ini: [Palet contoh yang ditinggalkan untuk keringkasan, kerana ia diwakili secara visual pada asal]. Pelbagai warna akan mengembangkan ini, dengan mudah diuruskan dengan HSL di mana hanya satu perubahan nilai.

Memanfaatkan sifat tersuai

Dihendaki secara meluas dan mudah dipenuhi untuk penyemak imbas yang lebih tua, sifat tersuai menawarkan sintaks mudah yang serupa dengan CSS standard. Penggunaan asas ditunjukkan di bawah: [Contoh penggunaan asas yang ditinggalkan untuk keringkasan, seperti yang dijelaskan secara konseptual pada asal]. Pembolehubah biasanya ditakrifkan pada :root pseudo-elemen tetapi boleh disalurkan kepada unsur-unsur tertentu menggunakan atribut seperti atribut data.

Mengintegrasikan calc()

Sifat tersuai tidak terhad kepada nilai tetap. Fungsi calc() membolehkan pengiraan nilai dinamik dalam corak yang konsisten: [Contoh menggunakan calc () yang ditinggalkan untuk keringkasan, seperti yang dijelaskan secara konseptual dalam asal]. Walaupun CSS tidak mempunyai gelung, preprocessors boleh membantu dalam menjana bahagian kod (tetapi ingat: pembolehubah CSS berbeza daripada pembolehubah SASS).

Melaksanakan pembolehubah CSS dalam amalan

Matlamat kami adalah untuk menukar warna komponen di bahagian halaman yang berbeza. Kami akan menggunakan tiga bahagian dengan ID: #food , #lifestyle , dan #travel , masing -masing dikaitkan dengan warna yang berbeza. Atribut data-theme pada .wrapper Div menentukan warna aktif. Apabila #travel aktif, --first-hue (contohnya, 180 ° untuk teal) ditugaskan ke --hue .

<div data-theme="travel">
  
</div>

<style>
.wrapper[data-theme="travel"] {
  --hue: var(--first-hue); /* = 180° = teal */
}
</style>

Coretan JavaScript kecil mengemas kini atribut data-theme berdasarkan klik tab, mengeluarkan hash ( # ). Ini memanfaatkan keupayaan JavaScript untuk memanipulasi CSS, tidak seperti pembolehubah preprocessor yang statik selepas penyusunan.

Peningkatan progresif

Untuk memastikan kebolehcapaian untuk pengguna dengan JavaScript dilumpuhkan, kami menambah peningkatan progresif:

 // Peningkatan Progresif:
// Tanpa JavaScript Semua bahagian dipaparkan, tema hanya ditetapkan apabila halaman dimuat
wrapper.dataset.theme = wrapper.queryselector ('seksyen'). id;

Ini memastikan fungsi asas walaupun tanpa JavaScript.

Walaupun pendekatan satu halaman digunakan di sini, melayani bahagian-bahagian sebagai halaman berasingan dengan tetapan data-theme -side juga boleh dilaksanakan.

Pendekatan alternatif

Jika nilai warna tidak berubah secara linear, kita boleh memisahkan stylesheets: [Contoh yang ditinggalkan untuk keringkasan, seperti yang dijelaskan secara konseptual dalam asal].

Menyokong komponen web

Komponen Web Theming memerlukan :host-context() Pseudo-Selektor: [Contoh yang ditinggalkan untuk keringkasan, seperti yang dijelaskan secara konseptual dalam asal].

Kesimpulan

CSS Custom Properties Memudahkan laman web mereka, menawarkan peningkatan, prestasi, dan integrasi yang lebih baik dengan JavaScript. Digabungkan dengan HSL dan calc() , mereka membuka kunci keupayaan bertemakan yang kuat, melangkaui perubahan warna mudah ke tema terkawal pengguna.

Atas ialah kandungan terperinci Membuat tema warna dengan sifat tersuai, HSL, dan sedikit calc (). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!