未来的CSS将引入新的媒体查询方式@when和@else-技术圈

点击上方前端Q，关注公众号

回复加群，加入前端Q技术交流群

英文 | https://levelup.gitconnected.com/future-css-a-first-look-at-when-and-else-statements-44e33deeb032

翻译 | 杨小爱

在 CSS 中，我们使用媒体查询来选择不同的设备。媒体查询为我们提供了一种基于多种条件选择设备的简单方法，例如屏幕尺寸、像素，格式：即打印或屏幕。

随着时间的推移，这逐渐变得更加复杂，现在，我们经常平衡许多有时相互冲突的条件。

因此，在新的 CSS 条件规则 5 规范试图通过引入两种新的媒体查询方式来解决这个问题——@when 和 @else。这些最终将允许我们直接在 vanilla CSS 中创建条件语句。让我们来看看它是如何工作的！

1、浏览器目前对@when/@else 的支持情况

目前，没有浏览器原生支持@when/@else，但是，这可能很快就会改变。对@when/@else 的完全支持如下所示。

2、在 CSS 中使用 @when/@else

假设我们有一组规则要应用于宽度小于 780 像素的屏幕尺寸，它支持 display: flex，而另一组规则应该适用于除此之外的任何东西。

以前，我们必须使用@media 查询来分别选择这两个东西。在选择多种不同的东西时，这变得有点混乱。

使用 @when 和 @else ，它看起来像这样：

@when screen and (max-width: 780px) and supports(display: flex) {    .my-element {        color: red;        display: flex;    }}@else {    .my-element {        display: block;    }}

我们还可以链接多个条件。

例如，假设我们有三个场景：最大宽度为 780px 的屏幕支持显示：flex，更大的屏幕支持显示：flex，以及其他所有内容。

在这种情况下，我们可以有多个条件：

@when screen and (max-width: 780px) and supports(display: flex) {    .my-element {        color: red;        display: flex;    }}@else screen and supports(display: flex) {    .my-element {        display: flex;    }}@else {    .my-element {        display: block;    }}