问题标签 [css-houdini]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
javascript - Houdini - CSS Typed OM:如何通过 javascript 获取已定义属性的值
用例
我使用新的“ registerProperty ”函数将自定义属性“ --animation-duration ”定义为时间值:
在我的 CSS 中,我现在可以将此属性添加到我的类中并调整它的值:
现在我想通过javascript 在我的元素上获取这个属性的值,总是在 ms 中。这可以通过以下代码行来实现:
问题
在我的通用 javascript 中获取此值是否有更短/更好的方法?
额外的
我知道你可以在worklet中缩短它(在paint-worklet 中测试):
下面的代码在我的通用 javascript 中不起作用:
javascript - drawImage Houdini CSS Paint API
我正在 Chrome 70 上试用 Houdini 的 CSS Paint API,但这个示例无法正常工作: https ://github.com/w3c/css-houdini-drafts/blob/master/css-paint-api/EXPLAINER.md #绘图图像
我通过这样的自定义属性传递图像:
我使用 CSS 属性和值 API 级别(通过实验性 Web 平台功能标志启用)来注册我的图像属性:
然后我试图在我的工作集中绘制它:
为了显示 worklet,我制作了一个简单的 500 * 500 div 并添加了样式:
控制台告诉我 img 是一个CSSImageValue,所以它似乎以某种方式工作,但图像没有被绘制到 div 的背景上。
有没有人设法让它工作,或者这种东西所需的一些功能尚未实现?
css - CSS中有类似“背景变换”的东西吗?或某种方式来转换同一图像/视频/iframe/等的不同区域。独立?
在 CSS 中,我们有transform
和filter
,我们也有backdrop-filter
. 但据我所知,我们没有backdrop-transform
,或类似的东西。
解释我的意思:backdrop-filter
允许您过滤某些特定元素后面的东西,例如,您可以通过将 a 定位div
在该区域上,然后应用backdrop-filter: hue-rotate(90deg)
到它来调整背景图像的特定区域的色调,就像这样:
backdrop-transform
财产的类似物也是如此transform
。您可以transform
作为背景图像的一部分,如下所示:
您也可以使用单个嵌入式 youtube 视频(或任何其他 iframe)执行类似的操作,例如:
请注意,如果您尝试使用两个单独的 iframe 来模拟这一点,您需要以某种方式保持彼此同步(关于滚动、视频播放等),如果 iframe 是,这可能很难/不可能跨域。更不用说为您要转换的每个片段嵌入新的 iframe/视频的成本。
也许我对 Houdini 的惊人承诺太醉了,但我认为这样的东西会非常强大并且非常有用(至少对我来说!)。例如,您可以嵌入一个视频元素,但将其分成四份,甚至使用 CSS 将这些四份混杂在一起!用 4 个不同的蒙版视频来做这件事会很乏味,并且试图让它们逐帧完美同步可能会很麻烦(尤其是考虑到 HTML5 视频 API 的时间分辨率低),并且在服务器上剪切视频 -只是看起来不必要的艰巨。
对于我的特定用例,我什至无法控制视频(它位于跨域 iframe 中),因此 CSS 是实现我想做的唯一方法。backdrop-filter
让我走到了一半,但我还需要能够独立地转换这些片段。
可能的解决方案#1:element()
CSSelement(...)
可以在url(..)
函数可以使用的任何地方使用。它允许您将页面上任何元素的完整快照(包括跨域内容)用作图像(令人惊叹)。对于那些感兴趣的人,这里有一些演示。唯一的问题是它目前只被 Firefox 支持,但它是在标准轨道上,所以它很有可能在未来被其他浏览器支持。如果我们获得了该函数的跨浏览器版本,我们可以通过假设属性element()
实现一切可能。backdrop-transform
我们只需在该区域上放置一个 div,然后获取它的实时快照,并根据需要对其进行转换。性能可能是一个问题,具体取决于element()
幕后的实现方式。这是铬的element()
问题。
javascript - Why CSS.registerProperty is in Javascript but not in CSS?
There is a draft of such feature as CSS.registerProperty
. In fact it allows to define types for css variables so that browser will be able to extend its abilities about them including animating values.
For me it seems strange that the feature that can be used for css-only perpouses (example) has only javascript representation and can't be used from pure css.
Is there any reason to include it in javascript but not propose same thing for css?
The things that I can't do from css now:
- Specify the type (
syntax
) - without it css animation wouldn't work (the same example) - Specify
inherits: false
css - PaintWorklet 可以内联吗?
使用 CSS Paint API 的惯用方式似乎是:
- 创建
xyz.js
文件- 填充包含
paint(ctx, geom, properties)
函数的类 - 调用
registerPaint
,将类作为参数传递
- 填充包含
CSS.paintWorklet.addModule('xyz.js')
从您的电话index.html
- 在 CSS 中应用paint worklet,例如
background-image: paint(myPaintWorklet);
更多细节在这里:https ://developers.google.com/web/updates/2018/01/paintapi
但是必须加载单独的 .js 文件会影响性能。
有没有办法内联 PaintWorklet 以便不需要单独的 .js 文件?
javascript - 如何在 Paint Worklet 中导入/使用库?
我正在尝试检查是否可以在 Paint Worklet 中使用画布库。我尝试测试是否可以使用 paper.js。问题是我无法在 worklet 中加载库,无法访问库的全局脚本和来自 web woker 的 importScripts 不起作用。
是否可以在paint Worklet 中使用库?
似乎我唯一需要将 paper.js 与 PaintAPI 一起使用就是模拟返回paint worklet 上下文而不是canvas.getContext('2D');
. 问题是我可以像在工人中一样使用自我,而我无法访问纸质对象。
我有这样的代码:
不工作的代码被注释掉了,你可以尝试在CodePen上玩这个。
html - 带有 css houdini Paint API 的样式选择标签
我在 css 中遇到了这个名为 css Houdini 的新功能。我只是想知道是否有任何方法可以使用 css houdini paint API 设置选择标签的样式。我试过这个代码片段。任何帮助将不胜感激。提前致谢。
html -
css
脚本
javascript - CSS Typed OM——解析背景颜色?
使用新的 CSS 类型对象模型,我试图获得这个 div 的背景颜色。它给了我一个CSSStyleValue
似乎只有一种方法的toString()
方法。我希望它将颜色解析为 RGB 三元组或其他有用的东西,就像它对宽度所做的那样。
是否有用于解析颜色的 API,或者尚未指定?
(我知道我可以手动解析字符串,这不是问题)
javascript - 当有一个矩形覆盖整个区域时,为什么有些矩形会消失?
我正面临 css paint worklet 的问题,我想知道它是浏览器错误还是我做错了什么。在 worklet 中,我正在绘制几个矩形。如果其中一个覆盖了整个区域,那么当我更改缩放级别时,其他的就会开始消失。但是当我删除所有东西时,context.fillRect(0, 0, width, height)
一切都像魅力一样。
这是我为更好地说明问题而准备的沙箱代码:https ://codesandbox.io/s/magical-villani-py8x2