Bisakah Anda menggunakan kondisi if / else di CSS?

120

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?

Haim Evgi
sumber
Apa sih yang Anda coba lakukan yang membutuhkan persyaratan CSS?
Sapphire_Brick

Jawaban:

138

Tidak dalam pengertian tradisional, tetapi Anda dapat menggunakan kelas untuk ini, jika Anda memiliki akses ke HTML. Pertimbangkan ini:

<p class="normal">Text</p>

<p class="active">Text</p>

dan di file CSS Anda:

p.normal {
  background-position : 150px 8px;
}
p.active {
  background-position : 4px 8px;
}

Itulah cara CSS untuk melakukannya.


Lalu ada praprosesor CSS seperti Sass . Anda dapat menggunakan kondisional di sana, yang akan terlihat seperti ini:

$type: monster;
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}

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:

:root {
  --main-bg-color: brown;
}

.one {
  background-color: var(--main-bg-color);
}

.two {
  background-color: black;
}

Terakhir, Anda dapat memproses lembar gaya Anda dengan bahasa sisi server favorit Anda. Jika Anda menggunakan PHP, sajikan style.css.phpfile, yang terlihat seperti ini:

p {
  background-position: <?php echo (@$_GET['foo'] == 'bar')? "150" : "4"; ?>px 8px;
}

Dalam kasus ini, Anda akan mendapatkan dampak kinerja, karena menyimpan file gaya seperti itu akan sulit dilakukan.

Boldewyn
sumber
11
Jawaban yang bagus, saya hanya ingin menambahkan satu poin tentang caching: Karena browser cache stylesheet dan biasanya tidak mendownload ulang mereka untuk setiap halaman, sulit untuk mengandalkan stylesheet "dinamis" yang dihasilkan oleh PHP / [bahasa-pemrograman-pilihan-pilihan] . Seharusnya ini bukan cara kerjanya. Jika Anda perlu mengubah CSS, Anda dapat menyematkannya di halaman tentu saja, tetapi itu mulai bertentangan dengan pemisahan konten / presentasi.
menipu
3
Berkenaan dengan apa yang dikatakan penipuan, itu tidak berarti Anda tidak dapat memiliki situs web yang berubah secara dinamis. Stylesheet dapat tetap statis, dan Anda dapat mengubah kelas elemen menggunakan javascript dengan atau tanpa jquery atau PHP sehingga gaya elemen dapat berubah.
csga5000
dan, bagaimana jika Anda ingin mengubah gaya scrollbar? (Anda tidak dapat menemukan :: - webkit-scrollbar-button di html)
Jerry
Um iya? Bagaimana dengan itu? Sass, variabel CSS, dan pemrosesan di sisi server tidak bergantung pada HTML. Atau apakah saya melewatkan sesuatu di sini?
Boldewyn
15

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:

/*[if IE]*/ 
body {height:100%;} 
/*[endif]*/

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):

<div id="myid" class="<?php echo $this->cssClass; ?>">content</div>
markus
sumber
14
Terkejut tidak ada yang menunjukkan bahwa sintaksis bersyarat tidak ada di CSS. Komentar bersyarat hanya ada di HTML.
BoltClock
12

Anda dapat menggunakan calc()kombinasi dengan var()untuk mengurutkan mimic conditionals:

:root {
--var-eq-two: 0;
}

.var-eq-two {
    --var-eq-two: 1;
}

.block {
    background-position: calc(
        150px * var(--var-eq-two) +
        4px * (1 - var(--var-eq-two))
    ) 8px;
}

konsep

yeedle
sumber
8

Anda dapat membuat dua lembar gaya terpisah dan memasukkan salah satunya berdasarkan hasil perbandingan

Di salah satu Anda bisa meletakkan

background-position : 150px 8px;

Yang lainnya

background-position : 4px 8px;

Menurut saya, satu-satunya pemeriksaan yang dapat Anda lakukan di CSS adalah pengenalan browser:

Conditional-CSS

RaYell
sumber
8

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:

  • : aktif - Apakah elemen diklik?
  • : diperiksa - Apakah radio / kotak centang / opsi dicentang? (Ini memungkinkan untuk gaya bersyarat melalui penggunaan kotak centang!)
  • : kosong - Apakah elemennya kosong?
  • : layar penuh - Apakah dokumen dalam mode layar penuh?
  • : focus - Apakah elemen memiliki fokus keyboard?
  • : focus-inside - Apakah elemen, atau turunannya, memiliki fokus keyboard?
  • : has ([selector]) - Apakah elemen berisi anak yang cocok dengan [selector]? (Sayangnya, tidak didukung oleh browser utama mana pun.)
  • : hover - Apakah mouse mengarahkan kursor ke elemen ini?
  • : in-range /: out-of-range - Apakah nilai input antara / di luar batas min dan maks?
  • : tidak valid /: valid - Apakah elemen formulir memiliki konten yang tidak valid / valid?
  • : link - Apakah ini link yang belum dikunjungi?
  • : not () - Balikkan selektor.
  • : target - Apakah elemen ini target fragmen URL?
  • : dikunjungi - Apakah pengguna pernah mengunjungi tautan ini sebelumnya?

Contoh:

div { color: white; background: red }
input:checked + div { background: green }
<input type=checkbox>Click me!
<div>Red or green?</div>

Peter
sumber
6

Atur server untuk mengurai file css sebagai PHP dan kemudian tentukan variabel variabel dengan pernyataan PHP sederhana.

Tentu saja ini mengasumsikan Anda menggunakan PHP ...

beggs
sumber
2
Anda dapat mengganti "PHP" dengan "Bahasa pemrograman atau template pilihan Anda"
Quentin
1
Masalahnya adalah, jika CSS Anda 50kb, dan Anda hanya mengubah beberapa nilai, bukankah lebih baik statis dan di-cache?
alex
2
ya, tetapi Anda dapat mengekstrak bagian yang membutuhkan dinamika dan memasukkannya kembali melalui @import url('dynamic.css.php').
Boldewyn
Itu tergantung pada apa kondisinya. Jika stabil untuk setiap pengguna, Anda dapat mengeluarkan header kontrol cache biasa.
Quentin
5

Anda dapat menggunakan bukan jika suka

.Container *:not(a)
{
    color: #fff;
}
Kurkula
sumber
3

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.

hadi teo
sumber
3

Namun opsi lain (berdasarkan apakah Anda ingin pernyataan if dievaluasi secara dinamis atau tidak) adalah menggunakan praprosesor C, seperti yang dijelaskan di sini .

Michiel Buddingh
sumber
3

(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

josteinaj
sumber
3

Ini sedikit info tambahan untuk jawaban Boldewyn di atas.

Tambahkan beberapa kode php untuk melakukan if / else

if($x==1){
  print "<p class=\"normal\">Text</p>\n";
} else {
  print "<p class=\"active\">Text</p>\n";
}
Johan
sumber
3

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 ...)

<!--container div-->
<div class="true-value">
   <!-- your content -->
   <p>my content</p>
   <p>my content</p>
   <p>my content</p>
</div>

Sekarang Anda dapat menggunakan kelas penampung sebagai variabel global untuk semua elemen di div menggunakan pemilih bertingkat, tanpa menambahkan kelas ke setiap elemen.

.true-value p{
   background-color:green;
}
.false-value p{
   background-color:red;
}
amichai
sumber
2

Anda dapat menggunakan javascript untuk tujuan ini, dengan cara ini:

  1. pertama Anda mengatur CSS untuk kelas 'normal' dan untuk kelas 'aktif'
  2. lalu Anda memberi elemen Anda id 'MyElement'
  3. dan sekarang Anda membuat kondisi Anda dalam JavaScript, seperti contoh di bawah ... (Anda dapat menjalankannya, ubah nilai myVar menjadi 5 dan Anda akan melihat cara kerjanya)

var myVar = 4;

if(myVar == 5){
  document.getElementById("MyElement").className = "active";
}
else{
  document.getElementById("MyElement").className = "normal";
}
.active{
  background-position : 150px 8px;
  background-color: black;
}
.normal{
  background-position : 4px 8px; 
  background-color: green;
}
div{
  width: 100px;
  height: 100px;
  }
<div id="MyElement">
  
  </div>

SeReGa
sumber
2

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:

var myVar = 4;
document.body.className = (myVar == 5 ? "active" : "normal");
body.active .menuItem {
  background-position : 150px 8px;
  background-color: black;
}
body.normal .menuItem {
  background-position : 4px 8px; 
  background-color: green;
}
<body>
<div class="menuItem"></div>
</body>

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)

var chosenCategory = 15;
document.body.className = "category" + chosenCategory;
<#list categories as cat >
    body.category${cat.id} .menuItem { font-weight: bold; }
</#list>
<body>
<div class="menuItem"></div>
</body>

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:

.myList {
   /* Default list formatting */
}
.myList.count0 {
   /* Hide the list when there is no item. */
   display: none;
}
.myList.count1 {
   /* Special treatment if there is just 1 item */
   color: gray;
}
<ul class="myList count${items.size()}">
<!-- Iterate list's items here -->
<li>Something...</div>
</ul>

Ondra Žižka
sumber
1

Jika Anda terbuka untuk menggunakan jquery, Anda dapat menyetel pernyataan bersyarat menggunakan javascript di dalam html:

$('.class').css("color",((Variable > 0) ? "#009933":"#000"));

Ini akan mengubah warna teks .classmenjadi hijau jika nilai Variabel lebih besar dari 0.

Kyle Lillie
sumber
-1

lakukan saja ini di html menggunakan operator terner bukan jika lain

class = "{{condition? 'class1': 'class2'}}"

atau

[ngClass] = "kondisi? 'class1': 'class2'"

Gaurav Panwar
sumber
-2

Anda dapat menggunakan php jika Anda menulis css di Tag

<style>
    section {
        position: fixed;
        top: <?php if ($test == $tset) { echo '10px' }; ?>;
    }
</style
Tom
sumber