介绍

简单说这个 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. ArchSummit回顾：从云原生到实时数据湖，架构如何支撑业务发展

    [点击了解更多网易热点] 数字化.自动化.智能化的主旋律下,架构的进化也在提速.在近日举办的ArchSummit全球架构师峰会上,网易数帆高级技术专家.资深架构师裴斐和网易数帆高级技术专家周劲松分别分 ...

  2. linux 查看crontab任务执行情况

    首先创建一个定时任务,例如: */1 * * * * /usr/bin/curl http://******/admin/Keeperclock/keeper >> /data/wwwro ...

  3. [oeasy]python0079_控制序列_光标位置设置_ESC_逃逸字符_CSI

    光标位置 回忆上次内容 上次我们研究的比较杂 类型转化 进制转化 捕获异常 版本控制 生成帮助文档 变量的常用类型 变量的生命周期控制   数据类型主要研究了两个 字符串 str   整型数字 int ...

  4. Linux安全启动及Machine Owner Key(UEFI BIOS MBR GPT GRUB)

    PS:要转载请注明出处,本人版权所有. PS: 这个只是基于<我自己>的理解, 如果和你的原则及想法相冲突,请谅解,勿喷. 环境说明   无 前言   只要装过各种系统的人都或多或少会接触 ...

  5. Prometheus 使用Python推送指标数据到Pushgateway

    使用Python推送指标数据到Pushgateway 需求描述 实践环境 Python 3.6.5 Django 3.0.6 prometheus-client 0.11.0 代码实现 !/usr/b ...

  6. pytest数据驱动 pandas

    pytest数据驱动 pandas 主要过程:用pandas读取excel里面的数据,然后进行百度查询,并断言 pf = pd.read_excel('data_py.xlsx', usecols=[ ...

  7. python multipart/form-data post接口请求

    python multipart/form-data post接口请求 def WebKit_format(data, boundary="----WebKitFormBoundary*** ...

  8. 统计平台广告推送工具支持百度、51拉、CNZZ 用法详解

    此软件用于伪造站长统计的搜素关键词,可以模拟百度.360.搜狗等搜索引擎来路 支持自定义刷词次数.多线程支持自定义线程数,速度更快 支持指定网址推广,带来更精确的网站IP来路 一键导入几十万个网站,支 ...

  9. 【Java】Main方法的命令行参数

    可以使用命令行注入参数执行

  10. NVIDIA的OpenUSD是什么？ —— Universal Scene Description (USD)

    正如NVIDIA的老黄在2024年的技术大会上的展示一样,NVIDIA公司或许最准确的定义应该是计算机图形学公司,因为不论是NVIDIA搞GPU还是搞通用计算还是搞软件生态以至于现在搞AI搞机器人搞自 ...