问题标签 [css-houdini]

我终于开始用Animation Worklet做一些滚动绑定动画，只是为了发现Surma 的演示不起作用。甚至不是文章中的那个。

API 是否仍在旗帜后面？还是它以某种方式改变了？

我正在尝试复制此示例；我有一个 scss 文件，我在 React/Electron 项目中与模块化 CSS 一起使用。paint我想在同一个文件中定义要使用的函数，如示例中所示：

但是，这无法使用 CssSyntax error: Expected a pseudo-class or pseudo-element. (2:23). 演示是什么，我没有做什么？

我有一个 React/Electron 应用程序，我正在尝试使用新的 CSS Houdinipaint()功能（如本页所示）。在我的项目index.html文件中，我添加了一个带有 paintWorkletaddModule()函数的脚本标记，如下所示：

然后在该testPaint.js文件中，我基本上拥有该博客文章中显示的内容的副本：

最后是我的css文件：

我应该指出我正在使用 CSS 模块，所以这个文件是defaultResultStyles.module.scss; 不确定这是否会影响任何事情。当我在我的应用程序中调出本应具有这些样式的组件时，它没有样式，尽管检查它，它确实显示background-image: paint(testPaint). The console.log that I added to the testPaint.js` 文件从未显示。

我已经尝试了文件路径的多种变体addModule；我试过 just testPaint.js，从./srcand开始src，但似乎没有任何效果；这在 Electron/React 应用程序中可行吗？

我有一个 React/Electron 应用程序（带有 .scss 文件和 CSS 模块），我正在尝试使用 CSS Houdinipaint()功能。我已经成功地调用它，但似乎添加第二个参数paint()会导致它失败。

样式.module.scss：

testPaint.js：

selected如果我从paint(testPaint, selected)通话中排除，它可以正常工作，但它args是一个空数组。如果我用 调用它selected，则根本不会调用它（没有控制台日志，没有断点触发器）。我一直在关注本指南，但没有看到它提到任何其他要求以使其正常工作......

我想在我正在构建的 Next.js 项目中使用 CSS Houdini。我已经通过 安装yarn了我想与css-paint-polyfill. 我在这里遵循 webpack 说明https://houdini.how/usage

这是我的组件：

我越来越害怕了

我尝试将导入css-paint-polyfill放在 useEffect 中，但抛出另一个错误。const DynamicComponent = dynamic(() => import('../components/hello'))我什至从https://nextjs.org/docs/advanced-features/dynamic-import尝试过，但我不知道如何引用该库。

有没有人解决这个问题？

https://codepen.io/una/pen/xByaoB

在这个我用a标签替换了它

https://codepen.io/PavelLaptev/pen/jOydKRO

你加不加也没关系display: block。另外，我添加后，一辆漂亮的马车变成了南瓜href。这种效果适用于任何将 Pain API 用于a+href标签的情况。

谢谢

是否可以使用 Houdini API 创建“亮度”功能？

例如：

假设您创建了一个 CMS，人们可以在其中自定义 10 种颜色。然而，页面中的一些细节的颜色应该是原来 10 个的变体，有时更暗，有时更亮。

如果是这样，您个人对创建该工作集有何看法？

Paint Worklet 在放置在锚标记内时不起作用。

示例站点：https ://codepen.io/lonekorean/pen/aYoJPv

上面的例子，使用

作为

它不工作。仅查看背景颜色，而不是背景图像：paint(polka-dot-fade)。我认为锚标签和 Paint Worklet 在实现的某个地方崩溃。

我正在尝试使用 CSS Paint API 为 h1-tag 创建自定义背景。背景应该被剪辑到文本中，所以基本上我想给它“着色”。

• 不幸的是，'-webkit-canvas' 已被弃用。要求是实际使用 h1 标签，而不仅仅是在画布中呈现文本并使用合成模式。
• 我想传入多个图像以使用 ctx.drawImage 进行绘制。

规范对此非常清楚：

但是，Chromium 不支持这一点。当前的解决方法似乎是通过background-image: ,属性传递图像。不幸的是，这将与将绘制工作集注册为背景图像 ( background-image: paint(worklet); background-clip: text;) 发生冲突。

将图像传递到绘制工作集的其他方法是什么？不一定要通过css变量。我对硬编码或将图像直接导入到paint worklet 很好。

注意：由于支持表较差，MRE 可能无法在某些浏览器中运行。

在px中，宽度与预期div3相同。div4

在em,div2的宽度符合预期。但是在 中div1，几乎就像var(--width1)被忽略并且宽度被设置为auto。有什么方法可以var(--width1)按预期工作吗？