Bagaimana Anda Boleh Mencapai Penggayaan Bersyarat dalam CSS?

Penggayaan Bersyarat dalam CSS: Meneroka Alternatif

Secara tradisinya, jika syarat lain tidak disokong secara asli dalam CSS. Walau bagaimanapun, terdapat pelbagai pendekatan untuk mencapai penggayaan bersyarat.

Kelas CSS

Satu kaedah melibatkan penggunaan kelas CSS untuk menentukan gaya yang berbeza untuk keadaan yang berbeza. Sebagai contoh, anda boleh mencipta dua kelas:

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

Dan dalam fail CSS anda:

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

Pendekatan ini disokong secara meluas dan membenarkan penilaian masa jalan bagi keadaan.

Prapemproses CSS

Prapemproses CSS seperti Sass menyediakan pernyataan bersyarat yang membolehkan anda menulis kod seperti:

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

Walaupun ini memberikan fleksibiliti yang lebih besar, ia memerlukan pra-pemprosesan, yang boleh memberi kesan prestasi.

Sifat Tersuai (Pembolehubah CSS)

Sifat tersuai, disokong dalam penyemak imbas moden, membenarkan penilaian keadaan masa jalan. Anda boleh menentukan sifat tersuai seperti:

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

Dan kemudian gunakannya dalam CSS anda:

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

Prapemprosesan Bahagian Pelayan

Prapemproses bahagian pelayan boleh menjana CSS bersyarat berdasarkan nilai dinamik. Sebagai contoh, anda boleh menulis kod seperti:

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

Walau bagaimanapun, pendekatan ini boleh mempunyai implikasi prestasi disebabkan keperluan untuk pemaparan sebelah pelayan.

Teknik CSS Tulen

Akhir sekali, artikel Ahmad Shadeed menunjukkan pelbagai teknik CSS tulen untuk menangani senario UI bersyarat tanpa bergantung pada mekanisme luaran.

Atas ialah kandungan terperinci Bagaimana Anda Boleh Mencapai Penggayaan Bersyarat dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!