Menggunakan If/Else di CSS

Menggunakan If/Else di CSS -Seperti yang kita ketahui, tidak ada pernyataan bersyarat dalam CSS, tetapi ini mungkin akan segera berubah dengan operator @when dan @else yang baru

Saat ini, satu-satunya cara untuk melakukan pernyataan bersyarat adalah dengan menggunakan kueri media seperti ini:

@media (min-width: 600px) {
  /* ... */ 
}
@media (max-width: 599px) {
  /* ... */}

Ini bekerja dengan sempurna, tetapi dalam proposal baru itu terlihat jauh lebih bersih dan sangat mirip dengan banyak bahasa pemrograman.

@when media(min-width: 600px) {
  /* ... */ 
}
@else {
  /* ... */ 
}

Kita dapat melakukan beberapa kondisi juga dengan menggunakan beberapa pernyataan @else, dan tidak hanya menggunakan @media, tetapi juga @support.

@when media(width >= 600px) and media(pointer: fine) and supports(display: grid) {
  /* A */} @else supports(caret-color: red) and supports(background: double-rainbow()) {
  /* B */} @else {
  /* C */}

Mungkin ada pertanyaan seputar penamaan fitur baru ini. Beberapa orang berpikir bahwa @if akan menjadi nama yang lebih baik daripada @when, alasan di balik penamaan ini mungkin karena Sass sudah menggunakan @if, dan akan mengganggu banyak pengembang jika mereka harus memperbaiki logika Sass mereka.

Terimakasih telah membaca artikel Menggunakan If/Else di CSS, semoga bermanfaat. Ikuti kami di instagram @jasawebsundakreatif