Keadaan switch css

CSS belum mempunyai peraturan suis atau bersyarat jika, selain daripada sifat tertentu @media pertanyaan dan beberapa penipuan yang mendalam dengan sifat adat CSS. Mari kita lihat mengapa ia berguna jika kita melakukannya, dan melihat helah yang boleh digunakan hari ini untuk menariknya.

Perbualan baru -baru ini mengenai kemungkinan

Walaupun tidak ada perkara yang boleh digunakan hari ini, terdapat banyak perbualan mengenai konsep CSS bersyarat generik pada tahun lepas:

• Brian Kardell mencadangkan pernyataan suis () dan tab Atkins riff di atasnya.
• Jonathan Neal mencadangkan variasi pertanyaan media untuk nilai bersyarat yang mencetuskan banyak perbualan.
• Lea Verou mencadangkan "sifat tersuai tahap yang lebih tinggi" (inilah melihat mereka dari Bramus van Damme) yang kelihatan sangat berguna.

Jadi, ya. Permintaan untuk CS bersyarat ada di sana.

Bayangkan mengapa CS bersyarat berguna

Mungkin perubahan visual selepas menatal tertentu. Perubahan visual selepas input angka berada dalam julat tertentu. Komponen dengan segelintir negeri.

Terdapat keseluruhan genre perpustakaan JavaScript yang sangat popular untuk UI (misalnya React, Vue, dan lain -lain) yang pada asasnya membina UI berdasarkan keadaan. Jelas ini adalah keperluan pemaju. Sekiranya kita dapat menggerakkan gaya berasaskan negara ke CSS, itu semua JavaScript yang kurang kita perlukan-dan mungkin pemisahan kebimbangan yang lebih baik.

Tema yang sama

Kami sudah mempunyai sifat tersuai dalam CSS, dan kami boleh mendasarkan logik perubahan keadaan pada mereka, menukar blok gaya sebagai kesan sampingan harta tersuai yang berubah kepada nilai-nilai tertentu.

Memang benar bahawa kita mempunyai mekanisme untuk menukar blok gaya sudah. Kita boleh menukar kelas melalui JavaScript, dan kelas itu boleh menggunakan apa sahaja yang kita suka dalam CSS. Tetapi itu tidak bermakna gaya berasaskan negara dalam CSS tidak akan berguna. Kami tidak selalu mempunyai keupayaan atau mungkin tidak mahu menulis mana -mana JavaScript untuk ini, dan sebaliknya menukar sifat tersuai dengan cara lain (contohnya pertanyaan media, perubahan HTML, dll). Melakukannya dalam CSS bermakna membantu logik logik perniagaan dan logik gaya visual.

Trik! Menggunakan @keyframes untuk negeri

CSS @KeyFrames boleh digunakan untuk menukar perubahan tertentu. Melalui kuasa harta animasi, kemungkinan terbuka untuk memilih dengan tepat bingkai mana yang akan ditunjukkan, dan ia berhenti sejenak pada bingkai itu, dengan berkesan meniru pernyataan switch-case atau gaya berasaskan negara.

Mari lihat lihat ini dalam tindakan dengan bermain dengan harta animasi-kelewatan:

Inilah yang berlaku dalam pen itu:

• Animasi-Delay: Nilai kelewatan negatif memaksa bingkai tertentu (atau antara) untuk berkuat kuasa (nilai positif tidak berfungsi dengan cara itu). Kami akan menggunakan helah ini untuk memaksa negara.
• Animasi-Play-State: Jeda: Kami tidak benar-benar menghidupkan apa-apa, jadi animasi akan terus dijeda.
• Animasi-Pemulihan: Tempoh sebenar tidak penting, ia hanya memerlukan satu sehingga ada jangka masa untuk memegang kerangka utama yang berbeza. Kami akan menjadikannya nilai seperti 100.001s supaya jika kita melambatkan 100 -an, kerangka utama terakhir masih akan berfungsi. Tempoh perlu lebih lama daripada nilai kelewatan.

Input julat pertama mengubah kelewatan animasi antara julat -100 dan 0s.

Kes penggunaan dunia nyata

Sebelum kita melompat terus ke dalam contoh kerja, patut dibincangkan dengan lebih terperinci ini kerana terdapat beberapa nuansa yang patut anda ketahui.

Mula -mula, silap mata hanya berfungsi dengan nilai angka. Oleh itu, nilai atau rentetan warna kerana ia melakukan matematik dengan ketat.

Kedua, ada helah Boolean. Pertimbangkan pembolehubah -nilai: 10 yang boleh mengambil apa -apa nilai angka antara 0 dan 100. Kami mahu memohon warna jika nilai di atas 5. Bagaimana kita tahu jika nilai itu lebih dari atau di bawah 5? Dan walaupun kita tahu, bagaimanakah bantuan itu benar -benar membantu kita?

 --is-Above-5: Clamp (0, var (-nilai)-5, 1)

pengapit () adalah seperti calc yang lebih bijak (), kerana ia membolehkan kita untuk mengurung nilai yang dikira dengan ketat semasa mengisytiharkan nilai yang ideal. Julat itu adalah semua yang diperlukan untuk mencapai pemboleh ubah Boolean.

Tulis mana -mana matematik dalam parameter kedua pengapit () dan yang akan output 0 (atau ke bawah) atau 1 (atau ke atas). Pastikan tidak menulis sebarang matematik yang mungkin menghasilkan nombor antara 0 dan 1.

Inilah cara yang berfungsi:

Kerja hanya input pelbagai adalah untuk "menyiarkan" nilainya dengan menentukan nilai untuk -nilai, - -min dan - -max, kemudian mengubah suai -nilai menggunakan acara onInput. Itulah perkara yang paling minimum yang boleh dilakukan mendapatkan tingkah laku seperti negara dalam CSS. Tiada JavaScript diperlukan.

Menggunakan fungsi matematik CSS, adalah mungkin untuk menyimpulkan peratusan "selesai" bar kemajuan dari pembolehubah yang sama:

 -lengkap: calc ((var (-nilai)-var (-min)) / (var (-max)-var (-min)) * 100);

Sekarang, kita tahu sama ada nilai itu melebihi peratusan tertentu, memberikan kita satu lagi cara untuk membuat perubahan mengikut keadaan:

 --Over-30: clamp (0, var (-siap)-30, 1);
--Over-70: clamp (0, var (-siap)-70, 1);
/ * ... dan sebagainya ... */

Ok, hebat, tetapi bagaimana kita boleh menggunakannya untuk memilih kerangka utama tertentu? Dengan menggunakan fungsi max ():

 -Frame: Max ( 
    calc (1-var (-over-30)), 
    var (-over-30) * 2, 
    var (-over-70) * 3, 
    var (-IS-100) * 4 
);

Perkara dengan CSS Booleans adalah terdapat banyak cara untuk menggunakannya untuk mencapai matlamat tertentu, dan seseorang mesti kreatif, mencari formula yang pendek dan boleh dibaca.

Dalam formula di atas, booleans akan "bertukar" nombor bingkai jika boolean mempunyai nilai 1. Oleh kerana kita menggunakan fungsi maksimum, nombor bingkai yang terbesar akan menjadi nilai yang dikira -Frame.

Perhatikan bahawa perubahan warna mempunyai peralihan sedikit. Kita boleh melakukan ini dengan latar belakang: CurrentColor; Di kawasan mengisi, yang mewarisi warna dari ibu bapa, tetapi saya memilih untuk menggunakan CSS Houdini untuk menggambarkan kuasa memberikan peralihan kepada pembolehubah CSS dengan mengisytiharkan jenisnya.

Contohnya dari Trik Boolean CSS yang banyak digunakan dapat dilihat di pena di bawah, yang merupakan komponen CSS sahaja dengan banyak pembolehubah yang membolehkan pelbagai penyesuaian:

Saya pasti terdapat banyak kes penggunaan lain untuk helah kecil ini dan saya teruja untuk melihat apa lagi yang dapat dicapai oleh kreativiti masyarakat.

Atas ialah kandungan terperinci Keadaan switch css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!