Proposal for CSS @when

The CSS field has been developing rapidly recently. I heard of something new that I had never seen before, and I also learned through Miriam: CSS conditional statements.

? The CSS Working Group has just decided to include @tabatkins' when/else proposal into the next level of CSS conditional statements. This is the proposal: https://www.php.cn/link/2d3bd60a2d899b49827efa1d74476809

— Mia, on Bass (@TerribleMia) September 15, 2021

Logic already exists in media queries. In fact, media queries are a kind of logic in themselves.

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

If you want a mutually exclusive style, you need to write two media queries:

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

This is a bit... cumbersome. The grammar in the new proposal is much simpler:

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

It looks like you can create a cascading logic stack by using and using multiple conditions, using multiple @else statements, and not only using @media, but also using @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>

In my opinion, this is very logical and convenient!

I saw a small argument about naming. @if may also be a logical name. But Sass uses @if, which will be very annoying for a large number of developers if they have to refactor all of the Sass logic into something new, or if that happens anyway. Should CSS give in to any preprocessor? No, but Sass has been around for a long time and is very popular and has a very good alternative, so why cause pain? In that discussion, it wasn't just about Sass - some people think @when is a better name in itself.

The above is the detailed content of Proposal for CSS @when. For more information, please follow other related articles on the PHP Chinese website!