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