介绍

简单说这个 Houdini 是一系列 CSS 底层 API，它可以让我们扩展 CSS，做出一些 Polyfill。

举一个例子，让大家有个画面。

我们可以通过 CSS + JS + Canvas 语法来自创 CSS 语法，游览器解析 CSS 时它会跑我们的 JS，而 JS 用类似 Canvas 画画的方式去达成最终的渲染效果。

这是其中一个 Houdini API 的玩法，当然还有很多种。

参考

YouTube – CSS Will Never Be The Same

功能强大、值得关注的CSS Houdini API

Can I use – attributeStyleMap

Can I use – Houdini

Is Houdini ready yet‽

可以用了吗？

Firefox 是最大的问题。Safari 是第二大问题（手机 IOS）

所以基本上是不能用啦。所以我也就不打算研究了。以后再继续。。。

CSS – Houdini的更多相关文章

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

    vivo 互联网前端团队-Wei Xing Houdini被称之为Magic of styling and layout on the web,看起来十分神秘,但实际上,Houdini并非什么神秘组织 ...

  2. 从CSS到houdini

    0. 前言 平时写CSS,感觉有很多多余的代码或者不好实现的方法,于是有了预处理器的解决方案,主旨是write less &do more.其实原生css中,用上css变量也不差,加上bem命 ...

  3. 前端读者 | 别人写的css，你敢用吗？

    本文来自@yeaseonzhang:链接:http://yeaseonzhang.github.io/2018/04/10/%E5%88%AB%E4%BA%BA%E5%86%99%E7%9A%84cs ...

  4. CSS @property，让不可能变可能

    本文主要讲讲 CSS 非常新的一个特性,CSS @property,它的出现,极大的增强的 CSS 的能力! 根据 MDN -- CSS Property,@property CSS at-rule ...

  5. 现代化CSS

    Less Sass less Sass 与Less相比SASS更适合大型,底层的开发 Compass CSS核心技巧 CSS应用 现代化CSS方法论 CSS分层与面向对象 为什么要对CSS分层 CSS ...

  6. 现代 CSS 指南 -- at-rule 规则扫盲

    大部分同学都用过 CSS 的屏幕宽度媒体查询,像是这样: @media screen and (min-width: 900px) { div { padding: 1rem 3rem; } } 这里 ...

  7. 现代 CSS 之高阶图片渐隐消失术

    在过往,我们想要实现一个图片的渐隐消失.最常见的莫过于整体透明度的变化,像是这样: <div class="img"></div> div { width: ...

  8. 现代 CSS 高阶技巧，像 Canvas 一样自由绘图构建样式！

    在上一篇文章中 -- 现代 CSS 之高阶图片渐隐消失术,我们借助了 CSS @Property 及 CSS Mask 属性,成功的实现了这样一种图片渐变消失的效果: CodePen Demo -- ...

  9. 现代 CSS 高阶技巧，完美的波浪进度条效果！

    本文是 CSS Houdini 之 CSS Painting API 系列第三篇. 现代 CSS 之高阶图片渐隐消失术 现代 CSS 高阶技巧,像 Canvas 一样自由绘图构建样式! 在上两篇中,我 ...

  10. 现代 CSS 高阶技巧，不规则边框解决方案

    本文是 CSS Houdini 之 CSS Painting API 系列第四篇. 现代 CSS 之高阶图片渐隐消失术 现代 CSS 高阶技巧,像 Canvas 一样自由绘图构建样式! 现代 CSS ...

随机推荐

  1. Vue 3 后端错误消息处理范例

    1. 错误消息格式 前后端消息传递时,我们可以通过 json 的 errors 字段传递错误信息,一个比较好的格式范例为: { errors: { global: ["网络错误"] ...

  2. Windows 10 LTSC启用Microsoft Store的方法

    新建msreg.bat文件,并编辑内容如下: ========== @echo off :: BatchGotAdmin :------------------------------------- ...

  3. ProgressBar 进度控件

    在 VB.NET 中,你可以使用 ProgressBar 控件或者自定义的进度提示方法来实现这个功能.以下是一个示例代码,展示如何使用 ProgressBar 控件来显示导入情况: ' 创建一个 Pr ...

  4. 题解：B3646 数列前缀和 3

    分析 板子题,线段树维护矩阵区间积,除了难写没什么思维难度. 所以直接放代码吧. Code #include<bits/stdc++.h> #define int long long us ...

  5. AT_abc218_d 题解

    洛谷链接&Atcoder 本篇题解为此题较简单做法及较少码量,并且码风优良,请放心阅读. 题目简述 给定一个平面内的 \(N\) 个点的坐标,求这 \(N\) 个点中选 \(4\) 个点可构成 ...

  6. SUM-2024成信大天梯赛

    查看代码中有仔细的批注 L1-5 yihan的新函数 题解:(字符串)需要用到一个知识,整数与字符串之间的变换"to_string()",字符串变成整数"stoll()& ...

  7. 前端使用 Konva 实现可视化设计器（18）- 素材嵌套 - 加载阶段

    本章主要实现素材的嵌套(加载阶段)这意味着可以拖入画布的对象,不只是图片素材,还可以是嵌套的图片和图形. 请大家动动小手,给我一个免费的 Star 吧~ 大家如果发现了 Bug,欢迎来提 Issue ...

  8. golang对遍历目录操作的优化

    一转眼go1.23都快发布了,时间过得真快. 不过今天我们把时间倒流回三年半之前,来关注一个在go1.16引入的关于处理目录时的优化. 对于go1.16的新变化,大家印象最深的可能是io包的大规模重构 ...

  9. Jmeter二次开发函数 - 文本替换

    此篇文章将在Jmeter创建一个新函数,实现替换文本中的指定内容功能.效果图如下 1.eclipse项目创建步骤此处省略,可参考上一篇Jmeter二次开发函数之入门 2.新建class命名为" ...

  10. douyin 今日头条 巨量登录滑块和douyin详情滑块分析

    声明(lianxi a15018601872) 本文章中所有内容仅供学习交流使用,不用于其他任何目的,抓包内容.敏感网址.数据接口等均已做脱敏处理,严禁用于商业用途和非法用途,否则由此产生的一切后果均 ...