Saya ingin menggunakan kondisi di CSS saya.
Idenya adalah saya memiliki variabel yang saya ganti ketika situs dijalankan untuk menghasilkan style-sheet yang tepat.
Saya menginginkannya sehingga menurut variabel ini style-sheet berubah!
Sepertinya:
[if {var} eq 2 ]
background-position : 150px 8px;
[else]
background-position : 4px 8px;
Bisakah ini dilakukan? Bagaimana kamu melakukan ini?
css
stylesheet
conditional-statements
Haim Evgi
sumber
sumber
Jawaban:
Tidak dalam pengertian tradisional, tetapi Anda dapat menggunakan kelas untuk ini, jika Anda memiliki akses ke HTML. Pertimbangkan ini:
dan di file CSS Anda:
Itulah cara CSS untuk melakukannya.
Lalu ada praprosesor CSS seperti Sass . Anda dapat menggunakan kondisional di sana, yang akan terlihat seperti ini:
Kekurangannya adalah, Anda terikat untuk melakukan praproses pada stylesheet Anda, dan kondisi tersebut dievaluasi pada waktu kompilasi, bukan waktu proses.
Fitur CSS yang lebih baru adalah properti khusus (alias variabel CSS). Mereka dievaluasi pada waktu berjalan (di browser yang mendukungnya).
Dengan mereka Anda dapat melakukan sesuatu di sepanjang jalur:
Terakhir, Anda dapat memproses lembar gaya Anda dengan bahasa sisi server favorit Anda. Jika Anda menggunakan PHP, sajikan
style.css.php
file, yang terlihat seperti ini:Dalam kasus ini, Anda akan mendapatkan dampak kinerja, karena menyimpan file gaya seperti itu akan sulit dilakukan.
sumber
Di bawah ini adalah jawaban lama saya yang masih valid tetapi saya memiliki pendekatan yang lebih beropini hari ini:
Salah satu alasan mengapa CSS sangat menyebalkan adalah karena CSS tidak memiliki sintaksis bersyarat. CSS benar-benar tidak dapat digunakan dalam tumpukan web modern. Gunakan SASS hanya sebentar dan Anda akan tahu mengapa saya mengatakan itu. SASS memiliki sintaksis bersyarat ... dan BANYAK keunggulan lain dibandingkan CSS primitif juga.
Jawaban lama (masih valid):
Itu tidak bisa dilakukan di CSS secara umum!
Anda memiliki persyaratan browser seperti:
Tetapi tidak ada yang melarang Anda menggunakan Javascript untuk mengubah DOM atau menetapkan kelas secara dinamis atau bahkan menggabungkan gaya dalam bahasa pemrograman Anda masing-masing.
Saya terkadang mengirim kelas css sebagai string ke tampilan dan menggemakannya ke dalam kode seperti itu (php):
sumber
Anda dapat menggunakan
calc()
kombinasi denganvar()
untuk mengurutkan mimic conditionals:konsep
sumber
Anda dapat membuat dua lembar gaya terpisah dan memasukkan salah satunya berdasarkan hasil perbandingan
Di salah satu Anda bisa meletakkan
Yang lainnya
Menurut saya, satu-satunya pemeriksaan yang dapat Anda lakukan di CSS adalah pengenalan browser:
Conditional-CSS
sumber
Saya terkejut bahwa tidak ada yang menyebutkan kelas pseudo CSS, yang juga merupakan semacam persyaratan dalam CSS. Anda dapat melakukan beberapa hal yang cukup canggih dengan ini, tanpa satu baris JavaScript.
Beberapa pseudo-class:
Contoh:
sumber
Atur server untuk mengurai file css sebagai PHP dan kemudian tentukan variabel variabel dengan pernyataan PHP sederhana.
Tentu saja ini mengasumsikan Anda menggunakan PHP ...
sumber
@import url('dynamic.css.php')
.Anda dapat menggunakan bukan jika suka
sumber
Sejauh yang saya tahu, tidak ada if / then / else di css. Alternatifnya, Anda dapat menggunakan fungsi javascript untuk mengubah properti background-position dari sebuah elemen.
sumber
Namun opsi lain (berdasarkan apakah Anda ingin pernyataan if dievaluasi secara dinamis atau tidak) adalah menggunakan praprosesor C, seperti yang dijelaskan di sini .
sumber
(Ya, untaian lama. Tapi itu muncul di atas pencarian Google sehingga orang lain mungkin tertarik juga)
Saya kira logika if / else-bisa dilakukan dengan javascript, yang pada gilirannya dapat memuat / membongkar stylesheet secara dinamis. Saya belum menguji ini di browser, dll. Tetapi seharusnya berfungsi. Ini akan membantu Anda memulai:
http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml
sumber
Ini sedikit info tambahan untuk jawaban Boldewyn di atas.
Tambahkan beberapa kode php untuk melakukan if / else
sumber
Anda dapat menambahkan div kontainer untuk semua cakupan kondisi Anda.
Tambahkan nilai kondisi sebagai kelas ke div penampung. (Anda dapat mengaturnya dengan pemrograman sisi server - php / asp ...)
Sekarang Anda dapat menggunakan kelas penampung sebagai variabel global untuk semua elemen di div menggunakan pemilih bertingkat, tanpa menambahkan kelas ke setiap elemen.
sumber
Anda dapat menggunakan javascript untuk tujuan ini, dengan cara ini:
sumber
CSS adalah paradigma yang dirancang dengan baik, dan banyak fiturnya tidak banyak digunakan.
Jika yang Anda maksud dengan kondisi dan variabel adalah mekanisme untuk mendistribusikan perubahan beberapa nilai ke seluruh dokumen, atau di bawah cakupan beberapa elemen, maka berikut adalah cara melakukannya:
Dengan cara ini, Anda mendistribusikan pengaruh variabel ke seluruh gaya CSS. Ini mirip dengan apa yang @amichai dan @SeReGa usulkan, tetapi lebih serbaguna.
Trik serupa lainnya adalah dengan mendistribusikan ID dari beberapa item aktif ke seluruh dokumen, misalnya lagi saat menyorot menu: (sintaks Freemarker digunakan)
Tentu, ini hanya praktis dengan serangkaian item terbatas, seperti kategori atau status, dan bukan set yang tidak terbatas seperti barang e-shop, jika tidak, CSS yang dihasilkan akan terlalu besar. Tetapi sangat nyaman saat membuat dokumen offline statis.
Satu lagi trik untuk melakukan "kondisi" dengan CSS yang dikombinasikan dengan platform penghasil adalah ini:
sumber
Jika Anda terbuka untuk menggunakan jquery, Anda dapat menyetel pernyataan bersyarat menggunakan javascript di dalam html:
Ini akan mengubah warna teks
.class
menjadi hijau jika nilai Variabel lebih besar dari0
.sumber
lakukan saja ini di html menggunakan operator terner bukan jika lain
class = "{{condition? 'class1': 'class2'}}"
atau
[ngClass] = "kondisi? 'class1': 'class2'"
sumber
Anda dapat menggunakan php jika Anda menulis css di Tag
sumber