CSS,我可以写 if/else 语法了?

更新日期: 2021-10-28阅读: 1.6k标签: 语法

在 2011 年开始写css的时候,从来没有怀疑过这种语言会发生多大的变化。我还记得使用PIE.htc 让 border-radius 适配所有浏览器,我的同事做了一个php脚本,生成一个PNG来圆角。

然而,在过去的几年中出现了大量的CSS新特性。其中一些语句也可以被视为if语句,比如@supports样式:

@supports (border-radius: 50%) {
  // don't use PIE.htc! {}
}

还有一个经典的媒体查询,已经存在了十多年:

@media (max-width: 1000px) {
  //maybe a mobile sized device? {}
}

还有一个新的 camp(),有点不同 :

width: clamp(1000px, 50%, 10vw);

但像这样的行为:

width: clamp(1000px >= (50% >= 10vw));

看得头疼。但这些都可以说只是 if 语句。如果我们想要一个 if/else 语句,我们需要做这样的事情。

@media (max-width: 1000px) and (prefers-color-scheme: dark) {
   //maybe a mobile device in dark mode {}
}
@media (max-width: 1000px) and (prefers-color-scheme: light) {
   //maybe a mobile device in light mode {}
}

这很烦人。但好消息是 在新提议的 @When 特性可以解决我们的烦恼。它这么用:

@when media(max-width: 1000px) {
   // 做点什么
}

这很酷,但更酷的是还有 else:

@when media(max-width: 1000px) {
   // 移动
} @else {
   // 平板
}

机智的你可能也想到了,那肯定还有 else if 了,没错还真有:

@when media(max-width: 1000px) {
   // 平板
} @else media(max-width: 700px) { {
   // 移动 
} @else {
   // PC
}

我们也有可能可以这样做:

@when media(max-width: 700px) {
   @when (prefers-color-scheme: dark) {
      //dark mode on mobile device
   } @else {
      //light mode on mobile device 
   }
}

我说 "可能" 是因为该特性还在提案中,但我相信最终会出来的(没出来我把头发染绿)。

目前(20211023),浏览器的支持情况是怎样的?零。少到连 Can I Use 都没有。但随着新的CSS样式不断推出,我相信我们很快就会看到它。

原文:https://kentondejong.medium.com/css-is-finally-getting-if-else-statements-3fabcec72a1f


链接: https://fly63.com/article/detial/10766

30-seconds-code:总结了大量的使用ES6语法实现的代码块

30-seconds-code这个项目是一个非常优秀的JavaScript项目,这里总结了大量的使用ES6语法实现的代码块,项目的设计目标就是更简洁,更高效,更快速的实现基础代码模块。

如何让Node.js支持ES6的语法【转载】

不同版本的Node.js对Babel有不同的支持力度。为了让Node.js支持所需的ES6语法,可以加入Babel的支持。

JavaScript 语法流派现状调查

我们通常会有意无意的把JavaScript和其他编程语言区分开,有一个重要因素是……由于它的特性本身(太灵活了吧),它似乎不仅仅是一种语言,而更像是一帮老司机在矫情造作之下乱伦出来的生态系统。

js基本语法

JavaScript是一种轻量性脚本语言 ,其语句以;结束,语句块用{...},js应许末尾不加,浏览器Js引擎会自动在每个语句的结尾补上,js功能主要是:动态修改html页面内容,包括创建、删除html页面元素、修改html页面元素的内容

带@的css语法,你知道多少?

css的顶层样式表由两种规则组成的规则列表构成,一种称为at—rule规则,也就是at规则,另一种是qualified rule,也就是普通规则。今天就学习一下at规则

es6 Module语法

export用于定义要输出的变量(let、var、const、function、class),定义的变量与值是动态绑定关系。匿名定义本质上是采用 default 为名称,与上面2个的区别是在加载时可以不用写大括号还能自定义名称。

es6中的语法_面试es6常用语法整理

箭头函数;扩展运算符 ...的一个通用的用法就是把对象展开;变量声明es6中不建议继续使用var来声明变量,推荐使用let和const声明,以此避免var声明存在的弊端

常见的JavaScript“陷阱”

随着ES6标准的普及,JavaScript已经拥有许多新的语法糖,这让我们编写可读的,高质量的代码变得更加方便,但即使这样仍然会遇到一些潜在的陷阱。

.htaccess文件RewriteRule语法规则

.htaccess文件是运行Apache Web Server的Web服务器的配置文件,对配置和重定向Apache Web Server文件系统很有用。在这里,我将讨论.htaccess文件RewriteRule语法规则。

什么是抽象语法树?「译」

AST 是抽象语法树的缩写词,表示编程语言的语句和表达式中生成的 token。有了 AST,解释器或编译器就可以生成机器码或者对一条指令求值。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!