演讲者：Una Kravets作为IBM Design和Bluemix（两个 IBM 产品）的前端开发，还主持@toolsday和STEMinist两个播客，从创造性和实用性的设计方法到促进社区开源状态，在社区有很多积极的影响。
PS：PPT截图不全，建议大家直接观看视频。
Houdini-CSS的未来马上就要到来！该规范允许开发人员使用JavaScript语法编写Web worklet，并首次访问CSS对象模型。一切都会发生改变的！
在本次演讲中，我们将介绍通过使用Houdini及其各种即将推出的浏览器API来创建的一些视觉效果，并通过现场演示如何开始实践。了解如何使用Houdini以及它对Web应用程序样式的未来意味着什么。
正稿
大家好。我很高兴来到这里。谈到Houdini，有太多的我想给大家分享的东西，让我迫不及待地想立马就开始。我喜欢这个是有原因的。当我还是个小孩的时候，我有一个小狗，它生病了。
这就像15年前写的CSS一样，那时我们没有今天的技术，我们不仅有自定义属性，手头上还有很多东西，这使编写Web样式变得非常愉快。CSS仍然有它的失败之处和面临的挑战，对吧？让我们谈谈表单样式。为什么我们不能在2019年设置表格样式呢？如果你熟悉W3School，这是一个教育网站，它向你展示了代码编写网页的基本方法，所以我看到了这个自定义的下拉列表，我想，“哦，酷。”我们所要做的步骤是拥有HTML，我们添加CSS-很好-那里有一些工作室元素，然后我向下滚动，这是[声音问题]。
直到今天，这依然令人沮丧，因为我喜欢把逻辑和样式分开。你无法在网络上直接进行操作。虽然我们可以在网络上做到动态渐变，它们很酷，你可以创建一个逗号分隔的值列表-实时显示在页面上-你可以调整这些内容。你可以将它们分层。
因此，当你在图像上创建滤镜效果时，它成为了一个非常有用的工具。我在网络上使用它。你可能还没看不懂…
渐变呢。最重要的一点是，它们绕中心旋转并到达该点。如果我们想创建…如果我们想创建一个连续的渐变，我们将为第一个和最后一个值创建颜色，并在中间创建颜色。
如果查看“我可以使用”，我们会发现渐变没有很好地被存储，因此我们无法在网络上使用它们。渐变是CSS中目前不存在的东西。在这里，我有一个示例，其中有一个div，当我鼠标hover上去时，div从红色转换成蓝色。
这就是我要在此渐变内执行的操作。我将其设置为从红色到蓝色，然后转到深粉红色。当我将鼠标悬停在此（div）的渐变区域上时，它无法转换该值，稍后我们将介绍它，为什么无法在网络上执行此操作。
你可以在网络上自定义边框。我们有一个很棒的边界数值资源，这很酷，但它是很有限的。
如果你想做一些像拐角形状这样的东西来遮盖图像并在该元素上应用边框形状，那这不是你可以做的，这是200013规范，它试图将其推进，但从未真正进入浏览器-挺难过的。但是有Houdini吗？如果你还没有听说过Houdini，那就真的非常遗憾。基本上，它基本上是一个专门为CSS提供的基本API，更准确地说，它是一系列使开发人员能够访问CSS对象模型的API，它使我们能够告诉浏览器我们希望它如何读取CSS代码。那么，这个现在就能做到吗？如果要在网络上设置样式，这些样式目前尚不可用CSS属性和值对来编写，但是可以使用CSS编写，前提是必须为其编写JavaScript polyfill。因此，你的浏览器将遍历此解析器集并读取DOM和CSS对象模型，然后你必须使用JavaScript polyfill再次执行此操作，因为你要在已加载样式后将样式重新应用于页面。
但是使用Houdini，我们可以将样式直接应用于CSS，所以我们现在和其他开发人员一样拥有强大的力量，因为我们可以在CSS步骤中告诉浏览器它在读取代码时应该做什么。真是令人兴奋。虽然规范需要一段时间才能在浏览器中实现，但是这仍然是一件好事，我们不希望浏览器一直实现不了任何我们想实现的东西。
如果你想要一个目前不存在的特性，你可以像傀儡一样，通过创建你自己的技术，CSS填充，创建JavaScript来完成它，并且它存在于浏览器中。挺酷的。现在最好的资源是Houdini，它准备好了-我们所有的浏览器都同意实现规范，以及W3规范，你可以为了Houdini去阅读。“我可以用吗？”。
如果你想要一个当前不存在的功能，可以通过CSS polyfill创建自己的技术模型，创建要执行此操作的JavaScript来像这种小缩放一样，它存在于浏览器中。目前最好的资源是Houdini，现在已经准备就绪-我们所有的浏览器都同意实现规范，以及W3规范，你可以为了Houdini去阅读文档。文档上有“我可以用吗？”状态表示你能不能使用。
这在很大程度上是一项正在进行的工作。最受支持的API是Paint API和类型化的对象模型，因此由于我们的时间有限，这就是我们今天要重点关注的问题。
让我们从类型化的对象模型开始。类型化对象模型允许我们进行更多的CSS语义解析。这意味着什么？现在，它必须完成整个基于字符串的正则解析，这很慢，它正在寻找ID，属性，类或该字符串中的特定关键字（例如此处的点）和直到打开大括号为止，然后查找属性值，冒号，值，单位，分号，确保这些值是正确的值并且它们可以正常工作。这会很快变得非常混乱，并且比拥有一些结构化数据要慢得多，因此类型化的对象模型提供了该结构化模型。
我得到了一个类似height的值，我们返回了一个CSS单位值，该对象是一个返回值和单位的对象，所以它具有更多的语义，使读取CSS的速度更快。因此，在这里我正在处理这个，我有一个盒子，它有宽度和高度。我们可以从计算机样式中获取属性，还可以设置属性，然后我可以指定css.number并为其指定类型，然后对其进行更新，然后在执行该操作时再次更新，我们看到它正在进行解析。。
如果在DevTools中查看此内容，将获得CSS单位值对象，把该单位和值被分离出来。这就引出了属性和值的API。你们现在有没有使用过自定义属性？大概有30％用过。自定义属性确实很棒，因为它们是我们浏览器中没有的实际的动态CSS变量。与Sass不同，在Sass中，你使用的静态变量将被移植给某个值，在这里，你实际上可以在JavaScript中更新这些变量。
你可以再次将逻辑和样式分开，因为你可以将样式部分保留在CSS中，并进行逻辑更改来达到在JavaScript内部更改该值的目的，然后传给它，而且超级动态，超酷，这样你就可以获得你自定义的属性和值来直接使用，但使用属性和值的API，你不仅仅只是获取到。你还可以为其指定属性名，他的语法和初始值定义，以及（如果它不会从其父项继承的话）。让我们再次看一下渐变的示例。我们有个盒子，有一种颜色，所以它是自定义属性，我正在从该颜色过渡。我指定的过渡时间将是一秒钟，悬停时它将变成蓝色。
我有颜色停止，语法是颜色，并指定该语法。我不会继承透明的初始值。当我将其更新为不褪色，在此更新此值以及不褪色时，也将更新为过渡到不褪色，如果我创建了悬停以匹配所有这些并运行它，它将慢慢消失变成了蓝色。[掌声]。
我喜欢视觉演示！就像，哇。我输入了一个属性名，注册属性，现在有这么多的事情可以在后面的属性完成。
这不仅仅是一个字符串值。对于浏览器来说，理解这两个值之间的插值是有实际意义的。关于自定义属性的另一件事是，你可以设置初始的后备值。我要注册两个属性，初级颜色和二级颜色。
如果你看一下CSS，悬停时我们将从原色过渡到副色。如果你注意到了的话，我们正在获得一秒钟的过渡时间，实际上，我不是在这里在CSS内指定该自定义属性，该变量。我不必这样做，因为我已经在CSS已注册属性中注册了它。
我可以更新原色。我可以将原色涂成红色，然后运行，它将更新为红色。那里没有问题。我们随时可以更新它。
如果我不小心，输入了一个像23这样的假值，它将总是退回到蓝紫色。让我向你展示如果我不注册自定义属性，背景中有一个无效的颜色，我运行此方法，它会变回透明。
CSS最好的地方是，出现错误的行时，它不会破坏你的程序，它只是忽略错误的行，这样你就可以继续你的事情了。但这是我们现在可以期待出现这种空通道和类型检查的CSS。就像输入CSS变量一样，我认为这对CSS系统、设计系统来说非常有用，确保在使用CSS构建Web时与团队保持一切超级凝聚力，并使它们保持一致。所以，现在我想谈谈Paint worklet。如果你听说过服务人员和网络人员的工作方式相同，那是因为它们之间存在一层-它预先呈现资源和推送通知，因为它们位于两者之间。
当你打开网站时，你可以在你的网站上注册一个worklet，这样你即使你的网络处于脱机状态也可以随时访问它。因此，如果我们要注册worklet，使用Paint worklet，那么我们在JavaScript中所做的就是注册这个类型。我们给它起个名字。
我在这里使用课程。你可以把它放在那里。在HTML中，我们需要…将其添加到页面中，然后调用命名注册所绘制的内容，再调用CSS，然后按名称指定该工作剪辑，因此在此示例中将其命名为fun,这样我就可以进行背景绘制了。
这是JavaScript和CSS吗？是。让我们看一下我制作的这个小例子。
这只是一些文字，我正在做的是，我写了这个小彩虹worklet，在其中我从左上到右下，并使用这些像素值调整大小。然后在HTML中，我将worklet添加到CSS中，然后将样式添加到样式中（使用方法是通过设置背景图片）。你可以设置边框图像，以任何需要的方式使用它。这是一行代码，可以在CSS中获得所有这些效果。
将这些关注点分开。这又是我们的锥梯度。你也可以写Polly文件。
现在，有一个polyfill。该polyfill用来编写此worklet以允许渐变，并且你可以发送上下文几何图形、属性和参数。因此，发送这些参数使我们可以在CSS类型中输入red，然后可以在浏览器中运行它，我们得到的梯度梯度现在已经是一个完整的圆了。这很酷。特征语法将允许我们在变量中使用它们，在这些变量中我们可以进行背景渐变，现在我们有了语法。
同样，这是实验性的。这就像在扩展扩展Web的边界。太酷了。我现在从事素材设计也是这样。
我们为开发人员提供了一个平台来创建他们自己的定制主题，其中包括颜色、主题和形状，这个例子就是一个叫做Shine的例子，其中具有这种有角度的形状。这是我们所拥有的两种形状规范，圆角是一种，你绝对可以在网络上做到这一点，但是在网络上我们还不能这样做。正如我之前所展示的那样，这个角落形状规范从来没有真正地被落实到浏览器中。
但是，我们可以解决这个问题。你可以创建一个CSS Houdini的Paint worklet，这个我做的，只是指定不同的角半径，Paint风格被覆盖，或填充，你可以真正开始玩，就会得到一个非常好的感觉。你可以使用它来装饰或者处理背景。记得我用的例子就是处理显示背景的。
当你使用WebKit蒙版图像时，你可以为任何元素指定要执行的操作，后结合使用这些技术来重新创建这些材质按钮，但在这里使用凹槽。这是最初的版本，当你将鼠标悬停在此处时，这里面临的一大挑战是包含涟漪效应，因此当我在缺口角工作区中创建并将其在CSS中应用到这些概述的按钮和填充的按钮时，我使用了背景和蒙版的混合体。
因此，你可以使用现有基础结构并逐步增强它，因为你可以使用该支持，如果你使用的是背景，它将仅退回到CSS的前一行。这就是我们现在可以将其集成到我们的UI中的方式。我们继续来点魔法吧。我要在这里做一个现场演示。
祝我好运。警告：这是实验性的，因此启用了Web平台功能。另外，你必须使用ACDVS或localhost，因为它位于页面之外，并且出于安全目的。
我希望这能行。那么，让我们从画布开始。我这里准备了一张画布，只是给了它一个宽度和高度。我要放大这里，这样你就能看得更清楚一些。
在我的JavaScript中，我有一个随机函数，设置画布，提供闪烁、高度、重量宽度和位置的参数。它高度、宽度和重量随机，把它的位置也随机化。
我们会把颜色设定好，然后再把这个画出来。这就是为什么每次我刷新的时候，我都会得到一个随机的火花。我们不想要一个火花，我们可能需要多个火花。让我们设30个火花。我们在这里创建一个循环来循环并应用火花。
一旦重新便已完成，我们就有了所有的30个火花，这是一个好的开始。我觉得这个颜色的黄色有点太相近，所以我们可以用HSL值来得到一个真正的饱和值，所以我做了一个随机的介于90到100之间。色调将是黄色/橙色的范围，光是变化最大的东西，所以我可以去掉颜色，我们有这个画布，但是我现在想把它变成一个Paint worklet，对吗？我们把这些都处理掉。
让我们使用我们都熟悉的东西，这是….这是展示X的Codepen吗？你知道这个可以更改吗？这里的主要问题是空格保持它们的位置。。我会让你看看这里是什么样子的。如果我一直缩小，你会看到这是X的布局，我们要试着在这个X上做一个Houdini的魔术。
所以，自从BBC去掉了HTML中的画布，我们现在需要做的就是摆脱JavaScript中的画布，因为我们不再需要使用任何东西，我们只需要开始编写一个Worklet。我们就先这么做吧。
让我们做一个类型检查，以便我们可以看到类型的注册Paint是否不等于未定义的，然后我们将创建一个类，创建一个名为sparkle的类。然后在里面，我们要用Paint，将得到我们想要应用的div的上下文和大小。。从这里开始，我们要将其放在这里。
所有这些我们都做了，我们创造了这些火花，并把它们放在这里。现在我已经开始了另一个工作，但我们必须先注册它。让我们在声明之外继续进行检查，以检查是否甚至支持该声明，并进行套准绘制，并以其名称进行sparkling操作，我们必须将该类称为sparkle。
我们现在要做的是确保获取大小和高度，不是从画布获取，而是从元素获取，因此我们必须将其大小更新。我们必须确保要在这里调用这个JavaScript代码，在Codepen中执行此操作的方法是使用PenID。这有点麻烦。我得注册这个脚本，才能获取css.ache t.worklet.Module。
理论上会开始监听这个文件。我要把它保存下来。在我们的空格里面，每一块空格，我都要做一个背景来绘制火花。如果这一切都解决了，我们会看到一些火花。有时候，我得刷新一下才能让它正常工作。
不好了！发生了什么？好的。让我们来看一下。好的，注册我们的worklet。
它有一个名字。我们使用此脚本将其添加到HTML中。CSS绘制worklet。然后，我们将其应用到我们当时使用的名称的图块上。
好吧，这是行不通的，我们将在另一个小启动器中执行此操作。给你看看这是什么样子。
我们有后援！[掌声]。太酷了！[掌声]。你也可以这样玩这些幻灯片。
你可以使用非常酷的Codepen一起玩。接下来，我得到了这些输入属性，我从我们的文档中提取输入属性，在这里我创建了一个名为sparkle num的自定义属性，在动画中为一个名为sparkle的关键帧设置动画，正在提取这些值并更新这些值，并使用它作为我的动画的素材。因为这不是一个已注册的属性，它不会插入你想要的那些值-它不会每次都回到那个值上。
我昨天学到的一件事。看起来就是这样，但是还记得当我提到这确实是CSS中的JavaScript吗？因此谁创建了houdini.rocks，他创建了这个仅评估自定义属性的worklet，因此你基本上可以在CSS中放入所有这些代码，然后可以在CSS内部应用背景绘画。它是超级元，但是你正在编写JavaScript，我想你可能希望应用它。我想你会喜欢的。
[掌声]。谢谢。
因此，这个方法有一些注意事项，那就是它是对分号敏感的。另外，你的变量必须在实例化中存在，它们不是动态的，所以你无法获得这些静态属性并在这里应用这些属性。你必须把它放在一个地方。如果这可能是它自己的自定义属性，你可以将它包含在元素中，但你现在不能这样做，我很乐意这样做。
如果执行该方法，则必须确保将其全部放在一个位置。现在，现在我想谈谈其他的事情。extra.css是我一直在研究的一个小库，它允许你今天就可以在自己的应用程序中使用Houdini。
这是一个CSS Houdini Paint API库，使你的网站更特别一些。我们可以在这里做的是玩所有这些不同的东西，比如火花演示，你可以改变火花的数量。你可以通过改变宽度变量、高度变量、使它们更厚的重量来使它们变大，可以创建此扇贝形边框，为其提供所需的任何颜色，可以发挥其重量，因此可以在此处进行调整。当可以有多个下划线时为什么要有一个下划线？因此，我们有超级下划线。
你可以调整下划线的数量，这些下划线的分布，这些下划线的权重，并在其中玩一点有乐趣的。有一个划线，所以你也可以调整此颜色，可以更改此划线的权重，然后更改五彩纸屑，谁不喜欢五彩纸屑？五彩纸屑是添加到任何网站中的一件有趣的小事。
在这里，你可以控制外观。使用它的方法是你可以通过一次CDN侦听来设置它，现在就可以使用它，因此在此示例的HTML内部，我将关闭该结果。我正在做的是，我们只是将工作文件作为文件包括在内，向我昨天在这方面工作的第一个贡献者大喊一声。耶。
在这里可以包括你的脚本，然后在你的CSS中，可以设置属性，如果你想要覆盖它们，或者你可以只使用背景画，它将采用默认值，就像我前面给你看的那样。有了一行代码，一个脚本，你就可以让Houdini现在Chrome稳定版上工作，在将来的Edge中，我也会在上面测试这些幻灯片，它们可以正常运行，所以非常酷。我希望将来能看到更多这样的事情。
这是一个伟大的方式，它给予开发者如此多的控制风格，你可以将所有这些内容组合起来以进行这样的布局，并且正如Aga所说，我会为播客的每个听众唱歌。我以为我会以一点点结束。我想我应该用一首小曲来结束这一切。能给我点音乐吗？[电子钢琴音乐]我这么做希望你们大家快乐。
歌词翻译
- 试试看。
- 使用Stylus访问网站。
- 甚至几乎与本地人一样。
- 首先，我非常感谢。
- 谢谢大家在网上早安。不过我不明白。
- 一个教会了我爱。
- 一个教我建立耐心。
- 现在我的画看起来棒极了。
- 我学会了，我也分享了。
- 但请不要看它。
- 改变技术是一种习惯。
- 对此，我说。谢谢，下次见！
谢谢！[欢呼和掌声]。
演讲稿原文地址 https://2019.jsconf.eu/una-kravets/css-houdini-and-the-future-of-styling.html
翻译&校验：freedom
若有收获，就点个赞吧
0 人点赞
