CSS Object Model
-
HTMLElement
- style [CSSStyleDeclaration] ==> property.style 仅仅表示style解析的结果 不是最终style
- 运用多个规则时 如何生效 <-----
- attributeStyleMap [StylePropertyMap] 对应attribute.style
-
- computedStyleMap func 得到最终应用样式值 (会合并多个 CSSStyleDeclaration 包含stylesheet attribute.style)
- style [CSSStyleDeclaration] ==> property.style 仅仅表示style解析的结果 不是最终style
-
HTMLLinkElement
-
rel 表名该文档是什么类型的文档 What Link? other Link
-
stylesheet 文档的外部样式表 会被解析为CSSStyleSheet 立即应用
-
section 文档的节
-
。。。
-
preconnect 和服务器提前建立TCP连接 优化连接性能 但会占用cpu
-
preftch 预先加载内容 预先加载下一页:
-
preload 让浏览器在闲暇时间加载该资源
-
prerender 预渲染,告诉浏览器在背后先默默渲染页面
-
alternate stylesheet 可别替换的sheet。 该sheet 不会立即生效 disable 控制是否生效
-
可以做到延迟生效
资源不阻塞关键渲染路径,还可以让它加载完毕后对当前页面生效。 <link rel="preload" href="style.css" as="style" onload="this.rel='stylesheet'">同上 as 告诉浏览器加载的内容 <link rel="alternate stylesheet" href="style.css" onload="this.rel='stylesheet'">同上
<link rel="alternate stylesheet" href="style.css" title='aa'> 1: title 必须 2:link.disable = true; 让其不生效 3: link.disable = false 让其生效 (生效之前必须让其不生效,第二步是必须的)
-
-
media 指定该link所适用的媒体查询
<head> <link ref="" /> 该css 会在首屏加载前 下载。等级很高 <link ref='' media='print'> 会在首屏加载完成后,再下载css 等级较低 . 但是仅仅再打印的时候会生效 <link ref='' media='print' onload="this.media='all'"> 资源不阻塞关键渲染路径,还可以让它加载完毕后对当前页面生效。 <head/>
-
CSSOM
是一组允许用JavaScript操纵CSS的API。 它是继DOM和HTML API之后,又一个操纵CSS的接口,从而能够动态地读取和修改CSS样式。
-
CSS知识点
-
CSS对象 windows.CSS
-
CSS Houdini
-
相关类
-
StyleSheet==>CSSStyleSheet 是对一个 界面表示单个CSS样式表
-
link.rel=‘stylesheet’ link.as=‘style’
-
<style ></style>
cssrules===rules[遗留] CSSRuleList 当前样式表中所有CSSRule disabled 前样式表是否生效。直接设置可生效 herf 来源 media type title ownerNode 指向的节点 <style><link> ownerRule parentStyleSheet 指向父级别sheet
-
-
CSSRule 抽象类
-
CSSStyleRule 指向一个规则 dome:’.container{border:1px solid red}’
- 隶属于 一个sheet
- cssText 该规则 字符串形式
- style:CSSStyleDeclaration 代表该规则所有[包含默认]属性
- parentRule
- selectorText 该规则对应的选择器
- styleMap 对应
该规则属性个数 不包含系统默认的 {color:red,font:14px} ==>2。 === style.length
- type :1 Type
-
CSSImportRule 指向一个规则文件 @import url(./import-rule.css);
- 隶属于 一个sheet
- 见 CSSStyleRule
- type:3
- styleSheet 规则文件解析的sheet
-
CSSKeyframesRule CSSKeyframeRule 帧动画 @keyframes slidein {from{},to{}}
- @keyframes == CSSKeyframesRule
- type: 7
- 见 CSSStyleRule
- form ==> CSSKeyframeRule type:8
- to ==> CSSKeyframeRule type:8
-
CSSPageRule @page 对应打印文档样式 @page{size:a4;}
-
CSSMediaRule @media screen(min-width: 900px){}媒体查询定义
-
CSSFontFaceRule @font-face {}描述要下载的外部字体的方面
-
CSSCounterStyleRule @counter-style thumbs {} ul{list-style: thumbs}
-
CSSSupportsRule css3 @supports (display: grid) {} 检查是否支持该css属性
-
-
CSSStyleValue 代表css 值 :图片 数字 转换类 单位值。。。
- CSSStyleValue 对css 解析类 CSSStyleValue.parse(
‘transform’, ‘translate3d(10px,10px,0) scale(0.5)’);
- CSSStyleValue 对css 解析类 CSSStyleValue.parse(
-
StylePropertyMap 直接操作attribute.style Link
直接体现在style attribute <div style></div> ele.attributeStyleMap.set('padding-left','10px')==><div style='padding-top:10px'> ele.attributeStyleMap.set('padding-left',CSS.px(10))==><div style='padding-top:10px'> set / append / delete ...
-
-
自定义css属性
-
js增加属性 dome
window.CSS.registerProperty({ name:'--my-css-name', // 名字 syntax:'<color>',//值类型 inherits:false, // 是否可以继承 initialValue:'#000000',// 初始值 }) @property --my-css-name{ syntax:'<color>',//值类型 inherits:false, // 是否可以继承 initial-value:'#000000',// 初始值 }
-
-
-
link rel 实现主题替换 参考
-
预加载 见 link.rel
-
Css优化
- https://github.com/addyosmani/critical
- https://github.com/berwin/Blog/issues/32