当前位置：首页 > news >正文

CSS Houdini

news 2026/2/8 0:18:46

前言

最近看了几篇文章，是关于 CSS Houdini 的。作为一个前端搬砖的还真不知道这玩意，虽然不知道的东西挺多的，但是这玩意有点高大上啊。

Houdini 是一组底层 API，它们公开了 CSS 引擎的各个部分，从而使开发人员能够通过加入浏览器渲染引擎的样式和布局过程来扩展 CSS。Houdini 是一组 API，它们使开发人员可以直接访问CSS 对象模型（CSSOM），使开发人员可以编写浏览器可以解析为 CSS 的代码，从而创建新的 CSS 功能，而无需等待它们在浏览器中本地实现。

具体解释见：CSS Houdini

推荐文章
用CSS Houdini画一片星空

CSS Houdini 实现磁吸效果

CSS Houdini：用浏览器引擎实现高级CSS效果

官方案例
Houdini Samples，可以看看有些东西还是很有意思的。

给textarea加一个方格背景

文章中的效果图：
在这里插入图片描述
文章中提到了渐变，自己尝试了一下没啥思路。但是有一种取巧的方式——背景图，把下面的图片当成背景图不就好了

 textarea{width: 300px;height: 100px;background-image: url('./abc.png');background-size: 80px 40px;color: white;font-size: 30px;}

我的效果，这不是差不多吗😃
在这里插入图片描述
突然发现自己有点傻叉，自己这个每一行的颜色都是一样的，跟官方的差远了。

Houdini 基本用法

attributeStyleMap 和 computedStyleMap

attributeStyleMap 用于处理内联样式，可以进行读写操作
computedStyleMap 用于处理非内联样式，只允许读

// Before Houdiniconst size = 30
target.style.fontSize = size + 'px' // "20px"const imgUrl = 'https://www.exampe.com/sample.png'
target.style.background = 'url(' + imgUrl + ')' // "url(https://www.exampe.com/sample.png)"target.style.cssText = 'font-size:' + size + 'px; background: url('+ imgUrl +')'  
// "font-size:30px; background: url(https://www.exampe.com/sample.png)"

上面的代码应该很多人都写过，拿到dom元素直接修改内联样式。简单的样式这样写还是可以的，但是比较复杂的时候就比较容易出错

这时可以使用 attributeStyleMap 和 computedStyleMap

<template><div id="test">111</div>
</template><script>export default {mounted() {let el = document.getElementById('test');// attributeStyleMap 用于处理内联样式，可以进行读写操作el.attributeStyleMap.set('color', 'blue');el.attributeStyleMap.set('font-size', '40px');console.log(el.attributeStyleMap.get('font-size'), el.attributeStyleMap.get('color'), el.attributeStyleMap.get('width'));// computedStyleMap 用于处理非内联样式，只允许读console.log(el.computedStyleMap().get('color').toString(), el.computedStyleMap().get('font-size'));}
};
</script><style lang="scss" scoped>
#test {width: 100px;height: 100px;background: pink;
}
</style>

在这里插入图片描述

自己尝试了一下，有几个需要注意的点：

attributeStyleMap ，可以进行读写，但是只能读取到内联样式
computedStyleMap() ，只读，可以读取到dom元素上最终的样式
对于有单位的样式，比如width，会返回一个对象；对于五单位样式，比如color，需要调用toString()方法来进行转换
以设置样式来说，不支持链式操作

这里补充一个与computedStyleMap 类似的东西，之前在 css中样式类型及属性值的获取简单说过，感兴趣的可以看一下

CSS Properties & Values API

可以允许开发者自定义属性和属性值，其实就是css变量。
这个不说了，赶紧用处不大，而且有点习惯使用scss了

Paint API

提供了一组与绘制（Paint）过程相关的API，我们可以通过它自定义的渲染规则，例如调整颜色（color）、边框（border）、背景（background）、形状等绘制规则。

文章最开始介绍的如何实现文本域的背景就是通过这种方式来实现的，通常需要创建一个js来编写绘制逻辑，然后使用registerPaint 进行注册。比如：

/* checkboardWorklet.js */class CheckerboardPainter {paint(ctx, geom, properties) {const colors = ['red', 'green', 'blue'];const size = 32;for(let y = 0; y < geom.height/size; y++) {for(let x = 0; x < geom.width/size; x++) {const color = colors[(x + y) % colors.length];ctx.beginPath();ctx.fillStyle = color;ctx.rect(x * size, y * size, size, size);ctx.fill();}}}
}// 注册checkerboard
registerPaint('checkerboard', CheckerboardPainter);
/* index.html */
<script>CSS.paintWorklet.addModule('path/to/checkboardWorklet.js')  // 添加checkboardWorklet到paintWorklet
</script>
/* index.html */
<!doctype html>
<textarea></textarea>
<style>textarea {background-image: paint(checkerboard);  // 使用paint()方法调用checkboard绘制背景}
</style>

但是在vue中， CSS.paintWorklet.addModule('path/to/checkboardWorklet.js') 这一步失败了，无法请求的js文件，应该是需要进行设置。
因为不知道如何处理，所以采用第二种方式

示例：绘制一个矩形

//  js
let blobURL = URL.createObjectURL(new Blob(['(',function() {class CheckerboardPainter {static get inputProperties() {return ['--rect-color'];}paint(ctx, geom, properties, args) {// ctx 一个 Canvas 的 Context 对象，因此 paint 中的绘制方式跟 canvas 绘制是一样的。// geom 包含节点的尺寸信息，同时也是 canvas 可绘制范围（画板）的尺寸信息。// properties 包含节点的 CSS 属性，需要调用静态方法 inputProperties 声明注入。// CSS 中调用 Paint 类时传入的参数，需要调用静态方法 inputArguments 声明注入const color = properties.get('--rect-color')[0];ctx.fillStyle = color;ctx.fillRect(0, 0, geom.width, geom.height);}}registerPaint('checkerboard', CheckerboardPainter);}.toString(),')()'], { type: 'application/javascript' })
);export default blobURL;// 使用
<template><div><div class="rect"></div></div>
</template><script>import blobURL from './checkerboard.js';
export default {mounted() {CSS.paintWorklet.addModule(blobURL);}
};
</script><style lang="scss" scoped>
.rect {width: 100px;height: 100px;--rect-color: red;background-image: paint(checkerboard);
}
</style>

在这里插入图片描述
官方示例文本域

let blobURL = URL.createObjectURL(new Blob(['(',function() {class CheckerboardPainter {paint(ctx, geom, properties, args) {const colors = ['red', 'green', 'blue'];// 方块的尺寸const size = 32;for (let y = 0; y < geom.height / size; y++) {for (let x = 0; x < geom.width / size; x++) {const color = colors[(x + y) % colors.length];ctx.beginPath();ctx.fillStyle = color;ctx.rect(x * size, y * size, size, size);ctx.fill();}}}}registerPaint('checkerboard', CheckerboardPainter);}.toString(),')()'], { type: 'application/javascript' })
);export default blobURL;<template><div><textarea></textarea></div>
</template>
<script>import blobURL from './checkerboard.js';
export default {mounted() {CSS.paintWorklet.addModule(blobURL);}
};
</script><style lang="scss" scoped>
textarea {background-image: paint(checkerboard);
}
</style>

在这里插入图片描述
要玩好Paint API，还是需要对canvas非常熟悉才行。

Animation API

提供了一组与合成（composite）渲染相关的API，我们可以通过它调整绘制层级和自定义动画。

略，现在有一些很不错的js动画库，没必要用这个写动画。

Layout API

提供了一组与布局（Layout）过程相关的API，我们可以通过它自定义的布局规则，类似于实现诸如flex、grid等布局，自定义元素或子元素的对齐（alignment）、位置（position）等布局规则。

略，这个一般人玩不了，也没必要看了。

磁吸效果

效果：https://codepen.io/HelKyle/pen/zYWozde
效果图：
在这里插入图片描述

let blobURL = URL.createObjectURL(new Blob(['(',function() {class MagnetMatrixPaintWorklet {// 鼠标位置、点的颜色、大小、间隔、影响半径static get inputProperties() { return ['--mouse-x', '--mouse-y', '--magnet-color', '--magnet-size', '--magnet-gap', '--magnet-radius']; }paint(ctx, size, props) {const mouseX = parseInt(props.get('--mouse-x'));const mouseY = parseInt(props.get('--mouse-y'));const color = props.get('--magnet-color');const lineWidth = parseInt(props.get('--magnet-size'));const gap = parseInt(props.get('--magnet-gap'));const radius = parseInt(props.get('--magnet-radius'));ctx.lineCap = 'round';for (let i = 0; i * gap < size.width; i++) {for (let j = 0; j * gap < size.height; j++) {const posX = i * gap;const posY = j * gap;const distance = Math.sqrt(Math.pow(posX - mouseX, 2) + Math.pow(posY - mouseY, 2));const width = distance < radius ? (1 - distance / radius * distance / radius) * gap * 0.4 : 0;const startPosX = posX - width * 0.5;const endPosX = posX + width * 0.5;const rotate = Math.atan2(mouseY - posY, mouseX - posX);ctx.save();ctx.beginPath();ctx.translate(posX, posY);ctx.rotate(rotate);ctx.translate(-posX, -posY);ctx.moveTo(startPosX, posY);ctx.strokeStyle = color;ctx.lineWidth = lineWidth;ctx.lineCap = 'round';ctx.lineTo(endPosX, posY);ctx.stroke();ctx.closePath();ctx.restore();}}}}registerPaint('magnet-matrix', MagnetMatrixPaintWorklet);}.toString(),')()'], { type: 'application/javascript' })
);export default blobURL;

<template><div class="demo"></div>
</template>
<script>import blobURL from './checkerboard.js';
export default {mounted() {if ('paintWorklet' in CSS) {CSS.paintWorklet.addModule(blobURL);}let div = document.getElementsByTagName('div')[0];div.addEventListener('mouseenter', e => {div.style.setProperty('--mouse-x', e.clientX);div.style.setProperty('--mouse-y', e.clientY);});div.addEventListener('mousemove', e => {div.style.setProperty('--mouse-x', e.clientX);div.style.setProperty('--mouse-y', e.clientY);});div.addEventListener('mouseleave', () => {div.style.setProperty('--mouse-x', -999);div.style.setProperty('--mouse-y', -999);});},
};
</script><style lang="scss" scoped>
div {box-sizing: border-box;padding: 0;margin: 0;
}.demo {width: 100vw;height: 100vh;padding: 80px;--magnet-color: rgb(97, 123, 255);--magnet-size: 2;--magnet-gap: 20;--magnet-radius: 150;background: paint(magnet-matrix);
}
</style>

CSS Houdini

前言最近看了几篇文章，是关于 CSS Houdini 的。作为一个前端搬砖的还真不知道这玩意，虽然不知道的东西挺多的，但是这玩意有点高大上啊。 Houdini 是一组底层 API，它们公开了 CSS 引擎的各个部分，从而使开发人员能够通…...

编程日记 2023/2/19 16:59:15

C++引用

这里写目录标题引用引用的基本使用引用做函数参数引用作为函数返回值引用的本质常量引用引用与指针的区别&的三种作用引用引用的基本使用作用： 给变量起别名语法： 数据类型 &别名原名引用的本质是给变量起别名，因此&#xff0…...

编程日记 2023/2/19 16:58:07

YOLOv6-目标检测论文解读

文章目录摘要问题算法网络设计BackboneNeckHead标签分配SimOTA（YOLOX提出）：TAL（Task alignment learning，TOOD提出）损失函数分类损失框回归损失目标损失行业有用改进自蒸馏图像灰度边界填充量化及部署实验消…...

编程日记 2023/2/19 16:56:54

【factoryio】使用SCL编写＜机械手控制＞程序

使用虚拟工厂软件和博图联合仿真来编写【scl】机械手控制程序文章目录目录文章目录前言二、程序编写 1.机械手运行部分 2.启动停止部分 3.急停复位部分三、完整代码总结前言在前面我们一起写过了许多案例控制的编写，在这一章我们一起来编写一下一个…...

编程日记 2023/2/19 16:55:46

QT学习记录散件

fromLocal8Bit() qt中fromLocal8Bit()函数可以设置编码。因为QT默认的编码是unicode，不能显示中文的而windows默认使用（GBK/GB2312/GB18030） 所以使用fromLocal8Bit()函数，可以实现从本地字符集GB到Unicode的转换，从…...

编程日记 2023/2/19 16:54:40

[SSD科普之1] PCIE接口详解及应用模式

PCI-Express(peripheral component interconnect express)是一种高速串行计算机扩展总线标准，它原来的名称为“3GIO”，是由英特尔在2001年提出的，旨在替代旧的PCI，PCI-X和AGP总线标准。一、PCI-E x1/x4/x8/x16插槽模式PCI-E有 x1/…...

编程日记 2023/2/19 16:53:34

Linux设备驱动模型与 sysfs实现分析

RTOS和Linux系统上开发驱动的方式非常的不同，在RTOS系统下，驱动和驱动之间并没有实质性的联系，不同的驱动和BSP之间仅仅通过一层很薄很薄的设备管理框架聚合在一起构成RTOS的设备管理子系统。图形化表示如下：设备驱动&BSP之间互相独立，互不影响，互不依赖，独立实现，…...

编程日记 2023/2/19 16:52:26

软考高级之制定备考计划

制定备考计划高项准备时间最好是三个月以上，分为三个阶段来复习。第一个阶段——熟悉知识点第二个阶段——刷题第三个阶段——冲刺复习具体操作第一个阶段这个阶段的复习以教材和视频为主，掌握重要知识点。基础知识要打牢。例如&#xff1…...

编程日记 2023/2/19 16:51:20

参考链接： https://discuss.pytorch.org/t/well-formed-input-into-a-simple-linear-layer-output-nan/74720/11 总结原因： numpy需要更新 PS. 查看numpy版本号打开Anaconda Prompt 进入环境输入命令conda activate envname 然后输入pip show numpy…...

编程日记 2023/2/19 16:50:12

2023-2-19-What is ‘ template＜typename E, E V＞ ‘?

目录C里面template怎么用inline函数模板类模板函数模板特化C里面template怎么用 template是什么? template其实是C的一种语法糖，本意是去简化程序员的工作. void swap(int *a,int *b){int temp *a;*a *b;*b temp; }比如在写一个交换函数的的时候,参数为两个in…...

编程日记 2023/2/19 16:49:03

华为OD机试题 - 字符串加密（JavaScript）

最近更新的博客华为OD机试题 - 任务总执行时长（JavaScript）华为OD机试题 - 开放日活动（JavaScript）华为OD机试 - 最近的点 | 备考思路，刷题要点，答疑【新解法】华为OD机试题 - 最小步骤数（JavaScript）华为OD机试题 - 任务混部（JavaScript）华为OD机试题 - N 进…...

编程日记 2023/2/19 16:47:54

美团前端一面手写面试题

实现斐波那契数列 // 递归 function fn (n){if(n0) return 0if(n1) return 1return fn(n-2)fn(n-1) } // 优化 function fibonacci2(n) {const arr [1, 1, 2];const arrLen arr.length;if (n < arrLen) {return arr[n];}for (let i arrLen; i < n; i) {arr.push(arr[…...

编程日记 2023/2/19 16:46:46

2D图像处理：缺陷检测--仿照Halcon的Variation Model

文章目录基于 C++&Opencv 的检测结果(Robust模式-MAD)一、Variation Model1.1 准备和训练模型方法1.2 比较模板方法1.3 过滤（保留符合缺陷特征的区域）二、参考基于 C++&Opencv 的检测结果(Robust模式-MAD) 一、Variation Model Halcon中的Variation Model主要是将待…...

编程日记 2023/2/19 16:45:39

JavaScript 注释

JavaScript 注释可用于提高代码的可读性。JavaScript 注释JavaScript 不会执行注释。我们可以添加注释来对 JavaScript 进行解释，或者提高代码的可读性。单行注释以 // 开头。本例用单行注释来解释代码：实例// 输出标题：document.getElementB…...

编程日记 2023/2/19 16:43:21

浅谈使用CDN加速的OSS

目录引出OSS对象存储服务CDNCDN加速OSS资源总结引出之前，我在写项目的时候，因为项目中存在音视频的存储，然后我看圈子里面的人都是使用OSS对象存储来处理，然后我也跟风去使用了，然后在之后，我一个朋友问我…...

编程日记 2023/2/19 16:42:14

华为OD机试题 - 服务依赖（JavaScript）

编程日记 2023/2/19 16:41:06

整合K8s+SpringCloudK8s+SpringBoot+gRpc

本文使用K8s当做服务注册与发现、配置管理，使用gRpc用做服务间的远程通讯一、先准备K8s我在本地有个K8s单机二、准备service-providerpom<?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.…...

编程日记 2023/2/19 16:39:59

Django框架之模型视图--HttpResponse对象

HttpResponse对象视图在接收请求并处理后，必须返回HttpResponse对象或子对象。HttpRequest对象由Django创建，HttpResponse对象由开发人员创建。 1 HttpResponse 可以使用django.http.HttpResponse来构造响应对象。 HttpResponse(content响应体, con…...

编程日记 2023/2/19 16:38:50

Linux下的Jenkins安装教程

当前环境 CentOS 7.8Java 11（注意当前jenkins支持的Java版本最低为Java11）FinalShell 3.9（操作环境） 安装Jenkins PS：不建议使用Docker安装Jenkins，因为使用Jenkins的时候一般会调用外部程序，…...

编程日记 2023/2/19 16:37:43

[软件工程导论(第六版)]第5章总体设计（课后习题详解）

文章目录1. 为每种类型的模块耦合举一个具体例子。2. 为每种类型的模块内聚举一个具体例子。3. 用面向数据流的方法设计下列系统的软件结构。4. 美国某大学共有200名教师，校方与教师工会刚刚签订一项协议。按照协议，所有年工资超过$26000（含$…...

编程日记 2023/2/19 16:36:35

UE5 学习系列（二）用户操作界面及介绍

这篇博客是 UE5 学习系列博客的第二篇，在第一篇的基础上展开这篇内容。博客参考的 B 站视频资料和第一篇的链接如下： 【Note】：如果你已经完成安装等操作，可以只执行第一篇博客中 2. 新建一个空白游戏项目章节操作，重…...

编程新知 2026/2/5 3:29:08

7.4.分块查找

一.分块查找的算法思想： 1.实例： 以上述图片的顺序表为例， 该顺序表的数据元素从整体来看是乱序的，但如果把这些数据元素分成一块一块的小区间， 第一个区间[0,1]索引上的数据元素都是小于等于10的， 第二…...

编程新知 2026/1/27 18:11:42

大型活动交通拥堵治理的视觉算法应用

大型活动下智慧交通的视觉分析应用一、背景与挑战大型活动（如演唱会、马拉松赛事、高考中考等）期间，城市交通面临瞬时人流车流激增、传统摄像头模糊、交通拥堵识别滞后等问题。以演唱会为例，暖城商圈曾因观众集中离场导致周边…...

编程新知 2026/1/23 7:15:40

如何在看板中体现优先级变化

在看板中有效体现优先级变化的关键措施包括：采用颜色或标签标识优先级、设置任务排序规则、使用独立的优先级列或泳道、结合自动化规则同步优先级变化、建立定期的优先级审查流程。其中，设置任务排序规则尤其重要，因为它让看板视觉上直观地体…...

编程新知 2026/1/23 12:42:28

打手机检测算法AI智能分析网关V4守护公共/工业/医疗等多场景安全应用

一、方案背景在现代生产与生活场景中，如工厂高危作业区、医院手术室、公共场景等，人员违规打手机的行为潜藏着巨大风险。传统依靠人工巡查的监管方式，存在效率低、覆盖面不足、判断主观性强等问题，难以满足对人员打手机行为精…...

编程新知 2026/2/7 21:37:35

STM32 低功耗设计全攻略：PWR 模块原理 + 睡眠 / 停止 / 待机模式实战（串口 + 红外 + RTC 应用全解析）

文章目录 PWRPWR（电源控制模块）核心功能电源框图上电复位和掉电复位可编程电压监测器低功耗模式模式选择睡眠模式停止模式待机模式修改主频一、准备工作二、修改主频的核心步骤：宏定义配置三、程序流程：时钟配置函数解析四、注意…...

编程新知 2026/2/5 21:19:26

js 比较两个对象的值,不相等就push对象的key

在JavaScript中，比较两个对象（object）的值并找出不相等的key，可以通过多种方法实现。下面是一些常用的方法： 方法1：使用JSON.stringify 这种方法适用于简单的对象，其中对象的值是基本类型或可…...

编程新知 2026/1/18 9:38:21

跑通 TrackNet-Badminton-Tracking-tensorflow2 项目全记录

📝 跑通 TrackNet-Badminton-Tracking-tensorflow2 项目全记录 git clone https://github.com/Chang-Chia-Chi/TrackNet-Badminton-Tracking-tensorflow2.git TrackNet-Badminton-Tracking-tensorflow2 conda create --prefix /cloud/TrackNet-Badminton-Tracking-…...

编程新知 2025/12/14 16:01:08

跟进一下目前最新的大数据技术

搭建最新平台 40C64G服务器，搭建3节点kvm，8C12G。 apache-hive-4.0.1-bin apache-tez-0.10.4-bin flink-1.20.1 hadoop-3.4.1 hbase-2.6.2 jdk-11.0.276 jdk8u452-b09 jdk8终于可以不用了 spark-3.5.5-bin-hadoop3 zookeeper-3.9.3 trino…...

编程新知 2026/1/24 12:33:36

在Windows下利用LoongArch-toolchain交叉编译Qt

文章目录 0.交叉编译的必要性1.下载交叉编译工具链1.1.直接在Windows下使用mingw（不使用虚拟机）编译（还没成功，无法编译）1.2.在虚拟机中的Ubuntu中进行交叉编译 2.下载qt源码3.编译Qt3.1.创建loongarch64的mkspec3.2.创…...

编程新知 2026/1/28 22:10:18

前言