CSS进阶

CSS houdini

在现今的Web开发中，JavaScript几乎占据所有版面，除了控制页面逻辑与操作DOM对象以外，连CSS都直接写在了JavaScript 里面了，就算浏览器都还没有实现的特性，总有人做出对应的Polyfills, 让你快速的将新Feature 应用到Production环境中，更别提我们还有babel等工具帮忙编译。
而CSS就不同了，除了制定CSS标准规范所需的时间外，各家浏览器的版本年，实战精度差异更是旷日持久，顶多利用PostCSS， Sass 等工具来帮我们转译出浏览器能够接受的CSS，开发者们能操作的就是通过JS去控制DOM与CSSDOM来影响页面的变化，但是对于接下来的Layout，Paint与 Composite就几乎没有控制权了。
为了解决上述问题，为了让CSS的魔力不再被浏览器把持，Houdini 就诞生了。
CSS Houdini 是由一群来自 Mozilla， Apple， Opera， Microsoft， HP，Intel， IBM，Adobe与Google的工程师所组成的工作小组，旨在建立一些列的API, 让开发者能够介入浏览器的CSS engine

布局模块

.item-list{display:layout(waterfall);}

 registerLayout(waterfall, class{
	static get inputProperties(){
		return ['width','heiight']
	}
	static  get childredInputProperties(){
		return ['x','y','position']
}
	layout(children, constrainSpace, styleMap, breakToken){
		// Layout logic here
	}
})

 <div class = "wrapper">
<p> foo <i>bar baz</i></p>
</p>
</div
</div>

 p::first-line{color:green;}
p::first-letter{color:red;}
.wrapper{
	width:60px;
}

 上面的HTML总共会拆出 7个fragments
最外层的div
第一行的box(包含foo bar)
第二行的box(包含baz)
吃到:first-line 与:first-letter的f也会被拆出来成独立的fragments
只吃到:first-line 的oo只好也独立出来
吃到:first-line 与包在<i>内的bar当然也是
在第二行底下且为italic 的baz

绘制模块

registerPaint( 'circle', class i

 registerPaint( 'circle', class {
	static get inputProperties() { return ['--circle-color']; }
	paint(ctx, geom, properties) {
// 改变填充颜色
		const color = properties.get( '--circle-color');
		ctx.fillStyle = color;
		//确定圆心和半径
		const x=geom.width / 2;
		const y =geom.height / 2;
		const radius = Math.min(x,y);
		//画圆
		ctx.beginPath();
		ctx.arc(x, y. radius,0,2 * Math.PI,false);
		ctx.fill();
		}
});

Less Sass

less
Sass
- 与Less相比SASS更适合大型，底层的开发

CSS 预处理器
CSS后处理器

预处理器

处理特性格式源文件到目标CSS的处理程序

后处理器

CSS转化压缩添加前缀
css next
微信使用腾讯x5 内核

postcss-preset-env

Compass
CSS核心技巧
CSS应用
现代化CSS方法论

CSS分层与面向对象
为什么要对CSS分层
CSS有语义化的命名约定和CSS层的分离，将有助于它的可扩展性，性能的提高和代码的组织管理。
大量的样式，覆盖，权重和很多!import,分好层可以让团队命名统一规范，方便维护。
有责任地去命名你的选择器
BEM
ACSS
CSSworkflow
CSS预处理器
接收Less或Sass等的文件产生CSS
CSS后处理器

字节CDN公共库；七牛云CDN公共库

OO CSS
众多开发者忽视了CSS的表现（认为他太过简单，是一种机械的工作），而把更多关注在JavaScript的性能上或其他方面。
OO CSS将页面可重用元素抽象成一个类，用class加以描述，而其对应的HTML可即可看做此类的一个实例。
OO CSS的作用和注意事项

作用
1. 加强代码复用以便方便维护
2. 减少CSS体积
3. 提升渲染效率
4. 组件库思想、栅格布局可共用、减少选择器、方便扩展
注意事项
1. 不要直接定义子节点，应把共性声明放到父类
  .mod .inner{...} //.mod 下面的inner
  .inner{...} //不是很建议的声明
2. 结构和皮肤
  ``
  CSS绘制特殊图形
三角形

 <title>CSS绘制三角形</title>
	<style type="text/css">
		div{
			width: 300px;
			height: 300px;
			background-color: orange;
		    border: 20px solid;
		    border-top-color: black;
		    border-right-color: red;
		    border-bottom-color: yellow;
		    border-left-color: green;
		
	}
		.wh0{
			width: 0;
			height: 0;
		    }
	.dengyao{
			width: 0;
			height: 0;
			background-color: transparent;
		    border-top-color: transparent;
		    border-left-color: transparent;
		    border-right-color: transparent;
	}
	.zhijiao{
		width: 0;
		height: 0;
		background-color: transparent;
		border-bottom: 0;
		border-right: 0;
		border-top-color: transparent;
	}
	</style>
	
	</style>
</head>
<body>
<div></div>
<div class="wh0"></div>
<div class="dengyao"> </div>
<div class="zhijiao"></div>
	
 
</body>
</html>

CSS清除浮动

 <div class= "one">
</div>
<p class ="clearfx">
<hr/>
</p>
<div class="two">
</div>

CSS 绘制简笔画

http://www.alloyteam.com/2012/10/css3-draw-qq-logo/

CSS 实现基础的网页布局
网页布局的分类

一列布局
两列布局
三列布局
多列布局
不管是几列布局，都是div的嵌套

 <!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>网页基本布局</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.con{
			width: 980px;
			margin: 0 auto;
			background-color: green;
		}
		.header{
			height: 150px;
			background-color: orange;
		}
		.footer{
			height: 150px;
			background-color: yellow;
		}
		.content{
			height: 300px;
 
		}
		.content .left{
			float: left;
			height: 300px;
			width: 20%;
			background-color: grey;
		}
		.content .right{
			float: right;
			height: 300px;
			width: 20%;
			background-color: brown;
		}
	</style>
</head>
<body>
<div class="con">
	<div class="header">我是头</div>
	<div class="content">我是身体
		<div class="left">左</div>
		<div class="right">右</div>
	</div>
	<div class="footer">我是尾</div>
 
</div>
</body>
</html>

CSS 渲染的过程：自顶向下，中间部分放在最后渲染

CSS 常用技巧

早期的双飞翼布局+ CSS HACK
基于与移动端的PX和REM转换兼容方案
弹性盒模型与Reset 的选择
自制ICON-FONT与常用字体库排版
CSS代码监测与团队项目规范
CSS绘制特殊图形高级技巧
BFC IFC FFC

双飞翼布局+CSS HACK
position, float, 负边距，等高，盒子模型，清除浮动

CSS分层

CSS有语义化的命名约定和CSS层的分离，将有助于它的可可扩展性，性能的提高和代码的组织管理
大量的样式，覆盖，权重和很多!import,分好层可以让团队命名统一规范，方便维护，
有责任地去命名你的选择器
SAMCSS
Base：设定标签与元素的预设值 PS:html{} input[type=text]{}
Layout：整个网站的大架构的外观 PS:#header{type=text}{}
Module：应用在不同页面的公共模块PS:.button{}
State：定义元素不同的状态PS:.nav--main{.active{}}
Theme：画面上所有主视觉的定义PS:border-color、background-image
修饰符使用的是--,子模块使用__符号
BEM
block- 代表了更高级别的抽象或组件
block__element - 代表.block的后代，用于形成一个完整的.block的整体
.block--modifier -代表block的不同状态或不同版本
修饰符使用的是_,子模块使用__符号
SUIT
SUIT起源于BEM，但是它对组件名使用驼峰式和连字号把组件从他们的修饰和子孙后代中区分出来
- 修饰符使用的是--,子模块使用__符号
ACESS
ITCESS
- Settings
- Tools
- Generic
- Base
- Objects
- Components
- .products-list
- Trumps 重写
  如何考虑设计一个系统的接口
  CSS 3D

HTML5 陀螺仪
CSS 3D 模型
结合Touch事件
CSS 3D库
JS 类库
HTML 陀螺仪

deviceorientation : 设备的物理方向信息，表示为一系列本地坐标系的旋角
devicemotion: 提供设备的加速信息
compassneedcalibration : 用于通知罗盘信息校准上述事件
获取旋转角度

 window.addEventListener("deviveorientation",
function(event){
// 处理event.appha, event.bata及event.gama},true);
})

获取罗盘校准
window.addEventListener("compassneedcalibrtion",function(event){
alert('您的罗盘需要校准')；
event.preventDefault();
},true);

获取重力加速度

球面投影
在三空间，每个3D 图形都等同于一个多面体，（3D模型只能由不弯曲的平面组成），只能用一个多边形表示圆，边越多越接近圆。
2016年淘宝造物节

1.bfc ifc gfc
2.双飞翼布局
3.css绘制特殊图形
4.css 3d 矩阵
5.css next
6.css houdini
7.css 重绘重排
8.新的css的语法
9.css in js /js in css
10.css分层理论 oocss acss bem

JS in CSS && CSS in JS

CSS WorkFlow

template直接使用变量
单页里面从性能角度上看，应该尽可能的减少请求数
yarn add typed-css-modules-loader
css in js style-loader
javascript 混淆
https://prepack.io/

style Components
css modules
Emotion: 国内技术文章比较少
国内文章特点：谈论的技术比较老，比较简单
CSS流行技术:https://2021.stateofcss.com/zh-Hans/
POSTCSS 值得收藏的插件
POSTCSS-CUSTOM-PROPERTOES 运行时变量
POSTCSS-SIMPLE-VARS 与CSS一致的变量实现
POSTCSS-MIXINS 实现类似SASS的@MIXIN的功能
POSTCSS-EXTEND 实现类似CSS的继承功能
POSTCSS-IMPORT 实现类似SASS的IMPORT
CSSNext 面向未来
CSS Grace 修复过去
JS in CSS ===> CSS Honini
Parser Paint Layout API
Worklets实战
Properites/Value
Typed OM Object

PWA AMP 比较复杂的技术大部分都没有w3c 参与

CSS Parser API : 自己实现一个CSS规则
CSS Lsyout API
CSS Paint API
具体Coding过程要借助Worklet
布局模块

简历中有以下内容会更好
Styled Components
CSS modules ✔
Emotion
CSS Next ✔
Post CSS ✔
Tailwind CSS
CSS Houdini ✔

CSS 数学
CSS矩阵探秘
矩阵数学概念
CSS中矩阵应用
复杂的CSS矩阵
更多矩阵的技巧

JS conf
CSS conf

posted @ 2022-05-25 09:48 李老师家的狗阅读(45) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· HTML CSS JavaScript 基础

· 前端性能与优化

· 你了解过CSS Houdini吗？说说你的理解

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

· 你了解CSS Houdini吗？说说它的运用场景有哪些？

阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 单线程的Redis速度为什么快？
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 展开说说关于C#中ORM框架的用法！

公告

昵称：李老师家的狗
园龄： 6年4个月
粉丝： 2
关注： 0

+加关注

2025年3月

日

一

二

三

四

五

六

李老师家的狗

CSS进阶

CSS houdini

布局模块

绘制模块

预处理器

后处理器

Compass
CSS核心技巧
CSS应用
现代化CSS方法论

JS in CSS && CSS in JS

CSS WorkFlow

CSS Parser API : 自己实现一个CSS规则
CSS Lsyout API
CSS Paint API
具体Coding过程要借助Worklet
布局模块

公告

搜索

常用链接

随笔分类

随笔档案

阅读排行榜

	registerLayout(waterfall, class{
	static get inputProperties(){
	return ['width','heiight']
	}
	static get childredInputProperties(){
	return ['x','y','position']
	}
	layout(children, constrainSpace, styleMap, breakToken){
	// Layout logic here
	}
	})

	<div class = "wrapper">
	<p> foo <i>bar baz</i></p>
	</p>
	</div
	</div>

	p::first-line{color:green;}
	p::first-letter{color:red;}
	.wrapper{
	width:60px;
	}

	上面的HTML总共会拆出 7个fragments
	最外层的div
	第一行的box(包含foo bar)
	第二行的box(包含baz)
	吃到:first-line 与:first-letter的f也会被拆出来成独立的fragments
	只吃到:first-line 的oo只好也独立出来
	吃到:first-line 与包在<i>内的bar当然也是
	在第二行底下且为italic 的baz

	registerPaint( 'circle', class {
	static get inputProperties() { return ['--circle-color']; }
	paint(ctx, geom, properties) {
	// 改变填充颜色
	const color = properties.get( '--circle-color');
	ctx.fillStyle = color;
	//确定圆心和半径
	const x=geom.width / 2;
	const y =geom.height / 2;
	const radius = Math.min(x,y);
	//画圆
	ctx.beginPath();
	ctx.arc(x, y. radius,0,2 * Math.PI,false);
	ctx.fill();
	}
	});

	<title>CSS绘制三角形</title>
	<style type="text/css">
	div{
	width: 300px;
	height: 300px;
	background-color: orange;
	border: 20px solid;
	border-top-color: black;
	border-right-color: red;
	border-bottom-color: yellow;
	border-left-color: green;

	}
	.wh0{
	width: 0;
	height: 0;
	}
	.dengyao{
	width: 0;
	height: 0;
	background-color: transparent;
	border-top-color: transparent;
	border-left-color: transparent;
	border-right-color: transparent;
	}
	.zhijiao{
	width: 0;
	height: 0;
	background-color: transparent;
	border-bottom: 0;
	border-right: 0;
	border-top-color: transparent;
	}
	</style>

	</style>
	</head>
	<body>
	<div></div>
	<div class="wh0"></div>
	<div class="dengyao"> </div>
	<div class="zhijiao"></div>


	</body>
	</html>

	<div class= "one">
	</div>
	<p class ="clearfx">
	<hr/>
	</p>
	<div class="two">
	</div>

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>网页基本布局</title>
	<style type="text/css">
	*{
	margin: 0;
	padding: 0;
	}
	.con{
	width: 980px;
	margin: 0 auto;
	background-color: green;
	}
	.header{
	height: 150px;
	background-color: orange;
	}
	.footer{
	height: 150px;
	background-color: yellow;
	}
	.content{
	height: 300px;

	}
	.content .left{
	float: left;
	height: 300px;
	width: 20%;
	background-color: grey;
	}
	.content .right{
	float: right;
	height: 300px;
	width: 20%;
	background-color: brown;
	}
	</style>
	</head>
	<body>
	<div class="con">
	<div class="header">我是头</div>
	<div class="content">我是身体
	<div class="left">左</div>
	<div class="right">右</div>
	</div>
	<div class="footer">我是尾</div>

	</div>
	</body>
	</html>

	window.addEventListener("deviveorientation",
	function(event){
	// 处理event.appha, event.bata及event.gama},true);
	})

李老师家的狗

CSS进阶

CSS houdini

布局模块

绘制模块

预处理器

后处理器

Compass CSS核心技巧 CSS应用 现代化CSS方法论

JS in CSS && CSS in JS

CSS WorkFlow

CSS Parser API : 自己实现一个CSS规则 CSS Lsyout API CSS Paint API 具体Coding过程要借助Worklet 布局模块

公告

搜索

常用链接

随笔分类

随笔档案

阅读排行榜

Compass
CSS核心技巧
CSS应用
现代化CSS方法论

CSS Parser API : 自己实现一个CSS规则
CSS Lsyout API
CSS Paint API
具体Coding过程要借助Worklet
布局模块