SEE Conf 2021!  支付宝体验科技大会

Houdini

CSS Paint API给CSS的扩展带来了曙光

2020年底@Una KravetsCDS(Chrome Developer Summit 2020)分享了使用Houdini扩展CSS的话题,同时推出了 Houdini.how。让我们可以使用CSS Houdini的Paint API进行创作,并通过 CSS Paint Polyfill 让不支持CSS Houdini的Paint API的现代浏览器也能运行Paint API扩展的CSS能力。你或许和我一样,对此感到好奇是吧?如果是的话,请继续往下阅读。

CSS Houdini: @property注册自定义属性

@property是CSS中新增的一个@规则的属性,是CSS HoudiniCSS属性和值 API Level 1 (CSS Properties and Values API Level 1)一个属性,可以用来自定义CSS属性,也被称为CSS的变量。为了能很好的区分CSS自定义属性,我更喜欢将其称为CSS Houdini的自定义属性(或变量)。你可能会好奇,它和原生的CSS自定义属性有何不同,又有何独特的特性,可以用来做什么?如果你感兴趣的话,请继续往下阅读。

CSS Houdini:深入理解CSS自定义属性

这几天一直在折腾CSS自定义属性,在《图解CSS:CSS自定义属性》和《CSS 自定义属性在Web组件中的应用》都在聊CSS自定义属性。但这个CSS自定义属性和今天要聊和CSS的自定义属性还是有所不同的。他们隶属于两个不同的规范,前者是CSS Custom Properties for Cascading Variables Module Level 1,后者是CSS Properties and Values API Level 1。虽然都是W3C规范中的内容,但还是有较大差异的。而今天要和大家聊的是后者,即CSS Houdini中的CSS自定义属性。

CSS Paint API

CSS Paint API是一个令人非常兴奋的东西,也是令人激动人心的时刻,它将开启CSS新的旅程。接下来让我们一起来看看它是什么,为什么会有它以及如何开始使用它。

用CSS Houdini画一片星空

要问2018最让人兴奋的CSS技术是什么,CSS Houdini当之无愧,甚至可以去掉2018这个限定。其实这个技术在2016年就出来了,但是在今年3月发布的Chrome 65才正式支持。CSS Houdini可以做些什么?谷歌开发者文档列了几个Demo,我们先来看一下这几个Demo。

CSS如何实现内凹角效果

记得@Lea Verou的《CSS Secrets》一书和前几天@Chris Coyier刚发的帖子都介绍了CSS怎么实现元素斜切口的效果。我也尝试着借助Vue的能力,把这种效果构建成一个Vue组件。我把这种效果定义为外切口。而今天将要聊的是与其刚好相反的一个效果:CSS如何实现内凹角的效果

CSS Houdini和CSS Paint API

很长时间以来,我都没有对浏览器新的技术感到兴奋。Houdini是一个强大的项目,它给开发者提供了比以往任何时候都还要更强大的CSS能力。这个项目的第一部分是CSS Paint API。这篇文章将解释为什么Houdini会如此令人兴奋,然后再告诉你如何开始使用CSS Paint API。

CSS Paint API

CSS Paint API是W3C规范中之一,目前的版本是Level1。它也被称为CSS Custom Paint或者Houdini's Paint Worklet。对于开发者而言,有一个值得高兴的是,Chrome65将会支持该API。也就是说,可以使用CSS Paint API提供的registerPaint(name, paintCtor)做一些事情。那么CSS Paint API是什么?你能用它做什么?它又是如何工作的呢?带着一系列的为什么,我们开启对CSS Paint API的初探。

使用CSS Houdini制作平滑的圆角

最近,我在Twitter分享了一篇关于用户界面的文章。我喜欢Illusions,但这对我来说是一个新的东西:一个修正的圆比几何图形看起来更圆!圆角矩形也是这样。令人惊讶的是,我还发现,自iOS7以来,苹果一直在使用这个技巧。在数学上,它被称为Lamé Curve or Superellipse

CSS魔术师Houdini API介绍

今天想继续 CSS 的议题,常常会觉得学 CSS 的新技术不太划算,因为每次看到新的 Feature 出现,都只能当下兴奋几分钟,然后就会认命接受可能还要再等个五年才能真正使用的可能性…如果你有跟我一样的感受,那今天这篇文章或许可以带给你一丝丝希望。

页面

返回顶部