Bisakah Anda menggunakan kondisi if / else di CSS?

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?

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.

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>

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

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

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>

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

Tentu saja ini mengasumsikan Anda menggunakan PHP ...

Anda dapat menggunakan bukan jika suka

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

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.

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

(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

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";
}

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;
}

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>

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>

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.

lakukan saja ini di html menggunakan operator terner bukan jika lain

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

atau

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

Anda dapat menggunakan php jika Anda menulis css di Tag

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