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
