美文网首页
CSS 支持三角函数

CSS 支持三角函数

作者: grain先森 | 来源:发表于2019-03-13 07:02 被阅读94次

    2 月底万维网联盟(W3C)CSS 工作组会议宣布了一项决议,批准在 CSS 标准中加入一批新函数,其中包括:

    • 正弦函数 - sin()
    • 余弦函数 - cos()
    • 正切函数 - tan()
    • 反余弦函数 - acos()
    • 反正弦函数 - asin()
    • 反正切函数 - atan()
    • 使用两个参数 x 和 y 的反正切函数 - atan2()
    • 平方根函数 - sqrt()
    • 参数平方和的平方根函数 - hypot()
    • 开方 - pow()

    2001 年 CSS 的升级版本 CSS 3 发布以来,Web 开发人员对 CSS 的利用变得越来越自由多变,不再局限于简单地布局网页,CSS 3 带来的新变化主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块,大大丰富了开发者的想象力与创造力。

    比如 CSS 现在能够编写复杂的动画,并支持像 Adobe Photoshop 中那样高级的图像滤镜。虽然目前 CSS 标准已经支持以下数学函数:

    • 计算基本表达式 - calc()
    • 返回最小值 - min()
    • 返回最大值 - max()
    • 获取上限和下限之间的中间值 - clamp()

    但是这远远不够,开发者一直需要它拥有处理图形角度并执行一些更高级数学运算的能力,以往这些需要从 JavaScript 层或预处理器去处理,但显然开发者更希望使用原生 CSS 语法去做这些事情,这样可以更加简单的方法处理角度并同步复杂的动画序列,而无需编写自定义 JavaScript 代码或加载庞大的动画库或游戏引擎。

    在开发者强烈的要求下,W3C CSS 工作组终于正式宣布批准在 CSS 标准中加入了一系列数学运算函数。

    看到这样的消息,不少开发者都沸腾了。在 Reddit 上他们展开了热烈的讨论,戳这里看讨论。

    有人认为这很自然,下一步显然是复数支持,然后是向量/矩阵,在能够使用 CSS 直接做出一款怪兽级别的项目之前,他们便不会满意;楼下就有人抛出了一个几周前发布的项目,并指出虽然谈不上怪兽级,但是它完全采用 CSS 实现了 3D 效果。

    CSS FPS

    项目地址

    反对派则表示:为什么 CSS 要这样搞?我认为 CSS 是用于将样式应用于 HTML 文档的东西,计算等操作应该在 JS 中完成。 他认为 CSS 应该轻量级,孤立的 Chrome 实例意味着不同的视图不能共享内存,所以必须复制一大堆东西,这样会导致内存冗余。

    有人回复他:

    • 一些 CSS 动画可以使用 GPU 的资源来执行,从而释放 CPU 以用于其它事情。
    • JavaScript 是单线程的,CSS 动画可以放弃对转换的精细控制,以释放主线程。

    还有一些人抛出一个观点,认为这直接变成了 CSS 的 TensorFlow binding:Tensorflow.css。

    此外还有人认为官方是想让 Sass 中的所有内容成为 CSS 中的标准,也有人顺手吐槽了一把 Firefox:RIP my Firefox。

    新的 CSS 三角函数还需要一段时间过渡,但是可以在以下网站上查看自己使用的浏览器是否已经支持。点这里。

    对于CSS的新功能,你们怎么看呢?欢迎留言区讨论,留言有福利哦。
    福利详情:截至2019年3月14号下午8点整,我会从评论区留言中选取两位高质量留言的小伙伴,分别送出5个简书贝,中奖的小伙伴我会通过简信通知你,简书贝最迟会在2019年3月15号中午12点整送出。欢迎大家积极参与讨论。

    看完文章留完言,还还还有福利拿,往下看👇👇👇
    感兴趣的小伙伴可以在公号【grain先森】后台回复【190313】获取HTML5详解、CSS3详解和Vue详解及实战项目,可以转发朋友圈和你的朋友分享哦。

    相关文章

      网友评论

          本文标题:CSS 支持三角函数

          本文链接:https://www.haomeiwen.com/subject/cuvopqtx.html