首页 > 其他分享 >CSS – Houdini

CSS – Houdini

时间:2023-08-20 15:00:18浏览次数:35  
标签:Canvas use JS API Houdini CSS

介绍

简单说这个 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)

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

 

标签:Canvas,use,JS,API,Houdini,CSS
From: https://www.cnblogs.com/keatkeat/p/17643993.html

相关文章

  • 博客园css与目录导航
    默认配置:皮肤:BlueSky页面定制css代码:root{--accent-color:#696969;/*nice*/--primary-colour:#306797;/*<>*/--background-color:white;--background-gray:#f5f5f5;--border-color:#dbdbdb;--code-bg-color:#f8f8f8;--font-color:#1f......
  • CSS实现文字描边效果
    一、介绍最近在一个项目的宣传页中,设计师使用了文字描边效果,之前我确实没有实现过文字的描边效果,然后我在查阅资料后,知道了实现方法。文字描边分为两种:内外双描边和单外描边,也就是指在给文字加上描边效果后,描边的方向是向内外同时占用文字空间还是只向外扩充文字空间的区别。二、......
  • 前端入手超简单之CSS3免费教程
    CSS样式课程目标1.css引入方式(重点)2.css选择器*(重点)3.css盒子模型(重点)4.css3常见效果(重点)5.CSS3常用的规则;级联样式表css介绍引用百度百科css概述层叠样式表其实就是对静态页面进行装饰,但是,特别要注意的点是:通常建议表现形式与页面内容分离(例如:人就是内容,穿着打扮......
  • 现代CSS布局技术:Flexbox和Grid的使用指南和最佳实践
    在现代Web开发中,CSS布局技术变得越来越重要。Flexbox和Grid是两种常用的CSS布局技术,它们可以帮助我们创建灵活、可维护的布局。Flexbox布局Flexbox是一种基于弹性盒子模型的布局技术,它可以让我们更加容易地创建水平或垂直方向上的布局。以下是Flexbox的常见属性:容器属性disp......
  • 如何用CSS实现响应式设计并优化用户体验
    在移动设备的时代,网站的响应式设计变得越来越重要。响应式设计的目标是使网站适应不同尺寸和分辨率的设备,并提供最佳的用户体验。本文将介绍如何使用CSS实现响应式设计并优化用户体验。使用媒体查询设置CSS样式媒体查询是CSS3中的一个强大的特性,可以根据不同的媒体类型和设备特......
  • 3 CSS组合选择器
    3组合选择器页面元素比较复杂,存在多个嵌套。为了更加灵活选择页面中的元素,CSS中还提供了组合选择器。组合选择器就是将多个基本选择器通过一定的规则连接起来组成一个复杂选择器。后代子代选择器<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><tit......
  • postcss px转不转rem呢?
    1、用postcss时,有时候你的px不转rem;你希望他转;如:elementui的labelWidth配置了数值但是不转原因:行内元素都不转解决方法:放到vue的style元素中就行啦2、有的你不希望他转解决方法:方法1:px单位改为大写PX方法2:这行css后注释上/*no*/why?我看了下postcss的源码;大体就是先......
  • 2 css基本选择器
    2基本选择器id选择器id选择器使用“#”进行标识,后面紧跟id名,其基本语法格式为:#id名{属性1:属性值1;属性2:属性值2;属性3:属性值3;}该语法中,id名即为HTML元素的id属性值。大多数HTML元素都可以定义id属性,元素的id值是唯一的,只能对应于HTML中某一个具体的元素。id选择器不支......
  • 1 CSS的引入方式
    1CSS的引入方式CSS样式有三种不同的使用方式,分别是行内样式,嵌入样式以及链接式。我们需要根据不同的场合不同的需求来使用不同的样式。行内样式行内样式,就是写在元素的style属性中的样式,这种样式仅限于元素内部起作用。当个别元素需要应用特殊样式时就可以使用内联样式。但不......
  • 瞅瞅吧!你可能会用到的 css 动画库
    原文链接:推荐几个你可能会用到的CSS动画库Animate.cssOBNOXIOUS.CSSCSShakeAnimXYZAimistaHover.cssMagicCSS如果你有正在用的觉得不错的库,可以在下方评论喔~......