Cadangan untuk CSS @When

Bidang CSS telah berkembang pesat baru -baru ini. Saya mendengar sesuatu yang baru yang saya tidak pernah lihat sebelum ini, dan saya juga belajar melalui Miriam: pernyataan bersyarat CSS.

? Ini adalah cadangan: https://www.php.cn/link/2d3bd60a2d899b49827efa1d74476809

- Mia, pada bass (@terriblemia) 15 September 2021

Logik sudah ada dalam pertanyaan media. Malah, pertanyaan media adalah sejenis logik dalam diri mereka.

 <code>@media (min-width: 600px) { /* 当此媒体查询为真时，执行这些样式。 */ }</code>

Jika anda mahukan gaya eksklusif yang saling eksklusif, anda perlu menulis dua pertanyaan media:

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

Ini sedikit ... rumit. Tatabahasa dalam cadangan baru lebih mudah:

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

Nampaknya anda boleh membuat timbunan logik cascading dengan menggunakan dan menggunakan pelbagai syarat, menggunakan beberapa pernyataan @else, dan bukan hanya menggunakan @media, tetapi juga menggunakan @Supports.

 <code>@when media(width >= 400px) and media(pointer: fine) and supports(display: flex) { /* A */ } @else supports(caret-color: pink) and supports(background: double-rainbow()) { /* B */ } @else { /* C */ }</code>

Pada pendapat saya, ini sangat logik dan mudah!

Saya melihat hujah kecil mengenai penamaan. @if juga boleh menjadi nama logik. Tetapi Sass menggunakan @if, yang akan sangat menjengkelkan untuk sebilangan besar pemaju jika mereka perlu refactor semua logik SASS menjadi sesuatu yang baru, atau jika itu berlaku. Sekiranya CSS memberi kepada mana -mana preprocessor? Tidak, tetapi Sass telah lama wujud dan sangat popular dan mempunyai alternatif yang sangat baik, jadi mengapa menyebabkan sakit? Dalam perbincangan itu, ia bukan hanya mengenai Sass - sesetengah orang berfikir @When adalah nama yang lebih baik dalam dirinya sendiri.

Atas ialah kandungan terperinci Cadangan untuk CSS @When. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!