CSS Houdini教程

什么是Houdini？

• Paint API-允许您在渲染视觉元素（颜色，背景，边框等）的步骤（即渲染阶段）扩展CSS。
• 布局API-允许您在确定元素的大小，位置和对齐方式的步骤中扩展CSS。
• 动画API-显示和设置元素动画的步骤中的“扩展点”。

• 类型对象模型API
• 自定义属性和值API
• 字体指标API
• 工作台

CSS的未来

类型对象模型（TOM）API

selectedElement.style.fontSize = newFontSize + 'px' // newFontSize = 20
console.log(selectedElement.style.fontSize) // 20px

{
  value: 20,
  unit: 'px'
}

• computeStyleMap（）：用于解析计算（非内置）样式。在解析或使用其他方法之前，将调用此方法。
• attributeStyleMap：用于解析和修改内联样式。这是一个项目属性。

//       ( )
selectedElement.computedStyleMap().get('font-size') // { value: 20, unit: 'px' }

//   
selectedElement.attributeStyleMap.set('font-size', CSS.em(2))
selectedElement. attributeStyleMap.set('color', 'blue')

//    
selectedElement.computedStyleMap().get('font-size') // { value: 20, unit: 'px' }

//    
selectedElement.attributeStyleMap.get('font-size') // { value: 2, unit: 'em' }

• 清除：删除所有内联样式
• delete：删除特定的CSS属性及其值
• 具有：根据指定属性的可用性返回true / false
• append：向支持多个值的属性添加额外的值

检测

let selectedElement = document.getElementById('example')

if(selectedElement.attributeStyleMap){
  // ...
}

if(selectedElement.computedStyleMap){
  // ...
}

规格状态

支持

自定义属性和值API

CSS.registerProperty({
  name: '--colorPrimary',
  syntax: '<color>',
  inherits: false,
  initialValue: 'blue',
})

• 名称：自定义属性的名称
• 语法：解析指令。预定义值是：<颜色>，<整数>，<数字>，<长度>，<百分比>等。
• initialValue：默认值（覆盖之前以及发生错误时）

.gradient-box {
  background: linear-gradient(45deg, rgba(255, 255, 255, 1) 0% var(--colorPrimary) 60%);
  transition: --colorPrimary 0.5s ease;
  ...
}

.gradient-box:hover {
  --colorPrimary: red;
  ...
}

@property --colorPrimary {
  syntax: '<color>';
  inherits: false;
  initial-value: blue;
}

例

检测

if(CSS.registeredProperty) {
  // ...
}

规格状态

支持

字体指标API

规格状态

Vorkleta

• Paint Worklet-Paint API
• 动画作品-动画API
• 布局工作簿-布局API

绘画API

1. 使用registerPaint函数编写和注册工作集
2. 使用CSS.paintWorklet.addModule调用HTML或JS中的工作表
3. 在CSS中使用paint（）方法以及vorklet的名称和传递的参数

registerPaint('paintWorkletExample', class {
  static get inputProperties() { return ['--myVariable']; }
  static get inputArguments() { return ['<color>']; }
  static get contextOptions() { return {alpha: true} }

  paint(ctx, size, properties, args) {
    // ...
  }
})

• inputProperties：工作项正在观察的自定义CSS属性的数组。该数组表示工作项的依赖关系
• inputArguments：可以从函数传递到外部CSS的参数数组
• contextOptions：颜色透明度。如果为假，则所有颜色将完全不透明
• paint：主要功能，采用以下参数：
  
  
  • ctx：2D绘图上下文，几乎与Canvas API的2D画布上下文相同
  • size：具有元素宽度和高度的对象。值取决于布局渲染过程。画布大小与实际商品大小相同
  • 属性：inputProperties中包含的变量
  • args：传递给paint函数的参数数组

CSS.paintWorklet.addModule('path/to/worklet/file.js')

CSS.paintWorklet.addModule('https://url/to/worklet/file.js')

.example-element {
  // paintWorkletExample -  
  // blue - ,  
  background: paint(paintWorkletExample, blue);
}

例

检测

if(‘paintWorklet’ in CSS){
  // …
}

@supports(background: paint(paintWorkletExample)){
  // …
}

规格状态

支持

动画API

registerAnimation(‘animationWorkletExample’, class {
  constructor(options){
    // …
  }
  animate(currentTime, effect){
    // …
  }
})

• 构造函数：在创建新实例时调用。用于常规设置。
• 动画：包含动画逻辑的主要功能。接受以下参数：
  
  
  • currentTime：特定时间轴上的时间戳
  • 效果：动画中使用的一系列效果

//   
await CSS.animationWorklet.addModule(‘path/to/worklet/file.js’)

//    
const elementExample = document.getElementById(‘element-example’)

//  
const effectExample = new KeyframeEffect(
  elementExample, //  
  [ // … ], //  
  { // … } //  - , ,    ..
)

//        
new WorkletAnimation(
  ‘animationWorkletExample’ //  
  effectExample, //  
  document.timeline, //  
  {},  //   
).play()

时标

animate(currentTime, effect){
  effect.localTime = 3000 // 1000ms  + 2000ms  
}

animate(currentTime, effect){
  effect.localTime = currentTime // y = x  
}

const scrollTimelineExample = new ScrollTimeline({
  scrollSource: scrollElement, // ,     
  orientation: ‘vertical’, //  
  startScrollOffset: ‘200px’, //  
  endScrollOffset: ‘800px’, //  
  timeRange: 1200, //  
  fill: ‘forwards’ //  
})

例

检测

if(CSS.animationWorklet){
  // …
}

规格状态

支持

布局API

registerLayout(‘exampleLayout’, class{
  static get inputProperties() { return [‘--example-variable’] }

  static get childrenInputProperties() { return [‘--exampleChildVariable’] }

  static get layoutOptions(){
    return {
      childDisplay: ‘normal’,
      sizing: ‘block-like’
    }
  }

  intrinsicSizes(children, edges, styleMap){
    // …
  }

  layout(children, edges, constraints, styleMap, breakToken){
    // …
  }
})

• inputProperties：工作集正在观察并属于父级的自定义CSS属性的数组，父属性是导致布局呈现的元素。此数组表示布局依赖性
• childrenInputProperties：小部件监视的属于后代的自定义CSS属性的数组
• layoutOptions：定义以下布局属性：
  
  
  • childDisplay：预定义的值是block和normal。定义项目的显示方式（块或行）
  • 大小：预定义值是块状和手动的。确定是否需要初步计算元素大小（如果未指定）
• nativeSizes：定义如何在布局上下文中显示容器或其内容：
  
  
  • children：导致页面布局呈现的元素的子元素
  • 边缘：容器边界
  • styleMap：键入的容器样式对象模型
• layout：使用布局的主要功能：
  
  
  • 子元素：子元素
  • 边缘：边框
  • 约束：父布局施加的约束
  • styleMap：键入的容器样式对象模型
  • breakToken：分页或打印布局拆分的断点

CSS.layoutWorklet.addModule(‘path/to/worklet/file.js’)

.example-element {
  display: layout(exampleLayout)
}

布局API如何与布局一起使用

例

检测

if(CSS.layoutWorklet){
  // …
}

规格状态

支持

胡迪尼和不断进步

始终确定支持以避免错误。

使用Houdini改善显示和可视化效果。

使用标准CSS作为替代

结论

参考文献