介绍

简单说这个 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. 2024秋招西山居游戏开发SEED种子实习笔试题

    西山居游戏开发SEED种子实习 2024年秋招笔试题目,仅供参考,请大佬多多指教 选择题 逆波兰数,TCP,操作系统FIFO,C语言大小端 填空题 一道LUA脚本写结果,一道并发存储优化题,计算机系统 ...

  2. Python 按比例获取样本数据或执行任务

    按比例获取样本数据或执行任务 By:授客 QQ:1033553122 开发环境 win 10 python 3.6.5 需求 已知每种分类的样本占比数,及样本总数,需要按比例获取这些分类的样本.比如, ...

  3. ABC349

    A link 其实,有人赢比赛,就有人输比赛,一加一减,不管进行多少场比赛,最后所有人的分数和一定是\(0\). 那么知道\(n-1\)个人的分数和,就可以知道第\(n\)个人的了. 点击查看代码 # ...

  4. 「图论」Bron-kerbosch算法

    7.21晚上加赛 T2.七负我,做这题找到了性质发现需要求最大团,不会,爆搜,打假了,赛后改,对了,但时间复杂度大爆炸,看下发题解,有这么一句话:于是学习了一下. Bron-kerbosch算法-求图 ...

  5. PHP转Go系列 | 推荐一个强大的Go语言工具函数库

    大家好,我是码农先森. 从 PHP 转到 Go 的朋友,常常会因为没有便捷的工具函数而感到苦恼.PHP 写的多了就会形成路径依赖,在写 Go 的时候时不时就会想到 PHP 强大的数组函数.当然写 Go ...

  6. NPIO在指定位置插入新列（附案例和代码）

    背景: I could be mistaken as I am not that familiar with NPOI, however, after a minor search, it appea ...

  7. 洛谷P1226 【模板】快速幂

    1.快速幂模板 前置知识 一个数字n,它的二进制位数一定是log2n向下取整+1: 快速幂模板代码 这段代码实现了快速幂算法(Exponentiation by squaring),用来计算 ( an ...

  8. 删库了不用跑路！binlog恢复数据实操

    各位道友大家好呀! 想必道友们或多或少都听说过MySQL的binlog的作用,它记录了数据库整个的生命周期,可用于恢复数据或者从库同步数据. 那么如果发生了数据库误删,具体该怎样恢复数据呢? 下面就以 ...

  9. Apache DolphinScheduler 社区 3 月月报

    各位热爱 DolphinScheduler 的小伙伴们,DolphinScheduler 社区月报开始更新啦!这里将记录 DolphinScheduler 社区每月的重要更新. 社区为 Dolphin ...

  10. stm32中NVIC如何配置？

    1.NVIC优先级分组 2.初始化NVIC // NVIC优先级分组 NVIC_PriorityGroupConfig(NVIC_PriorityGroup_1); // NVIC初始化 NVIC_I ...