介绍

简单说这个 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. [oeasy]python00134_[趣味拓展]python起源_历史_Guido人生_ABC编程语言_Tanenbaum

    python 历史 回忆上次内容 颜文字是kaomoji 把字符变成一种图画的方法 一层叠一层 很多好玩儿的kaomoji是一层层堆叠起来的meme   ​   添加图片注释,不超过 140 字(可选 ...

  2. oeasy教您玩转vim - 30 - # 屏位行号

    ​ 屏位行号 回忆上节课内容 上次我们主要讲的翻页 :set scrolloff=2 控制上下留天留地 上下翻页(这个最常用) ctrl + f 向下一屏 ctrl + b 向上一屏 上下移屏一行 c ...

  3. nodejs的服务器,用ffmpeg推流

    http://m.zhizuobiao.com/node/node-19061200018/ ffmpeg -list_devices true -f dshow -i dummyffmpeg -f ...

  4. gist.github.com 无法访问解决办法,亲测永远有效！

    1.打开https://www.ipaddress.com/,输入gist.github.com获取IP地址 2.ping 此ip地址,可以访问 3.将IP地址写入Hosts文件,140.82.113 ...

  5. 业务场景---Token无感刷新

    业务场景描述 假设用户正在填写一个复杂的表单,由于表单内容繁多,用户花费了很长时间才填完.这时,如果Token已经过期,系统会让用户重新登录,这种体验显然是非常糟糕的.为了避免这种情况,我们需要在To ...

  6. ClickHouse的向量处理能力

    ClickHouse的向量处理能力 引言 在过去,非结构化数据(如文本.图片.音频.视频)通常被认为难以在数据库中直接使用,因为这些数据类型的多样性和复杂性.然而,随着技术的发展,嵌入技术可以将非结构 ...

  7. 【Java】Springboot + Redis +（AOP & 响应外切）切面实现字典翻译

    使用案例演示: 先开发了一个简单的Demo: 普通DTO类注解翻译的字段和翻译来源 在需要翻译的方法上注解@Translate 接口返回结果: 框架思路: 1.标记的注解需要通过AOP切面在调用的时候 ...

  8. 【PostgreSQL】01 环境搭建

    [PostgreSQL数据库安装] 数据库本体就没下本机了,直接挂服务器的Docker上面跑 docker pull postgres:9.4 创建容器并运行: docker run --name p ...

  9. Windows系统下硬盘S.M.A.R.T硬盘检测工具——硬盘检测工具（CrystalDiskInfo）

    CrystalDiskInfo是由日本人hiyohiyo个人开发的小工具,能全面详细直观的检查硬盘的健康状态及各种参数. 绿色版软件. 官方下载地址: https://crystalmark.info ...

  10. 算法·理论：Manacher 笔记

    \(\text{Manacher}\) 来啦! \(\text{Manacher}\) 并没有什么前置知识,比 \(\text{KMP}\) 简单多了. 前置处理 \(\text{Manacher}\ ...