Tutorial do CSS Houdini

O que é um Houdini?

• API do Paint - permite estender o CSS na etapa (significando o estágio de renderização) da renderização de elementos visuais (cor, plano de fundo, bordas etc.).
• API de layout - permite estender o CSS na etapa de determinação do tamanho, posição e alinhamento dos elementos.
• API de animação - “ponto de extensão” na etapa de exibição e animação de elementos.

• API de modelo de objeto digitado
• API de propriedades e valores personalizados
• API de métricas de fonte
• Worklets

Futuro do CSS

API do Modelo de Objeto Digitado (TOM)

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

{
  value: 20,
  unit: 'px'
}

• computedStyleMap (): para analisar estilos computados (não integrados). Este método é chamado antes de analisar ou usar outros métodos.
• attributeStyleMap: para analisar e modificar estilos embutidos. Esta é uma propriedade do item.

//       ( )
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' }

• limpar: remove todos os estilos embutidos
• delete: exclui uma propriedade CSS específica e seu valor
• has: retorna verdadeiro / falso, dependendo da disponibilidade da propriedade especificada
• anexar: adiciona um valor extra a uma propriedade que suporta vários valores

Detecção

let selectedElement = document.getElementById('example')

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

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

Status da especificação

Apoio, suporte

API de propriedades e valores personalizados

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

• nome: nome da propriedade customizada
• sintaxe: instrução para análise. Os valores predefinidos são: <color>, <integer>, <number>, <length>, <percentage> etc.
• initialValue: valor padrão (antes da substituição, bem como quando ocorrem erros)

.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;
}

Exemplo

Detecção

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

Status da especificação

Apoio, suporte

API de métricas de fonte

Status da especificação

Vorkleta

• Paint Worklet - API do Paint
• Worklet de animação - API de animação
• Worklet de layout - API de layout

API do Paint

1. Escreva e registre um worklet usando a função registerPaint
2. Chame um worklet em HTML ou JS usando CSS.paintWorklet.addModule
3. Use o método paint () em CSS junto com o nome do vorklet e os argumentos passados

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: Uma matriz de propriedades CSS customizadas que o worklet está observando. Essa matriz representa as dependências do worklet.
• inputArguments: uma matriz de argumentos que podem ser passados ​​de uma função para CSS externo
• contextOptions: transparência de cores. Se for falso, todas as cores serão completamente opacas
• paint: a função principal usando os seguintes argumentos:
  
  
  • ctx: um contexto de desenho 2D quase idêntico ao contexto de tela 2D da API do Canvas
  • tamanho: um objeto com a largura e altura do elemento. Os valores dependem do processo de renderização do layout. O tamanho da tela é igual ao tamanho real do item
  • properties: variáveis ​​contidas em inputProperties
  • args: uma matriz de argumentos passados ​​para a função 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);
}

Exemplo

Detecção

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

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

Status da especificação

Apoio, suporte

API de animação

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

• construtor: chamado quando uma nova instância é criada. Usado para configuração geral.
• animar: A principal função que contém a lógica da animação. Os seguintes parâmetros são aceitos:
  
  
  • currentTime: registros de data e hora em uma linha do tempo específica
  • effect: uma matriz de efeitos usados ​​na animação

//   
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()

Carimbos de hora

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’ //  
})

Exemplo

Detecção

if(CSS.animationWorklet){
  // …
}

Status da especificação

Apoio, suporte

API de layout

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: uma matriz de propriedades CSS personalizadas que o worklet está observando e que pertencem ao pai, o elemento que causou a renderização do layout. Essa matriz representa as dependências do layout
• childrenInputProperties: uma matriz de propriedades CSS personalizadas que são assistidas pelo widget e que pertencem ao descendente
• layoutOptions: define as seguintes propriedades de layout:
  
  
  • childDisplay: os valores predefinidos são block e normal. Define como o item é exibido (bloco ou linha)
  • dimensionamento: os valores predefinidos são do tipo bloco e manuais. Determina a necessidade de cálculo preliminar dos tamanhos dos elementos (se não especificado)
• intrinsicSizes: define como o contêiner ou seu conteúdo é exibido no contexto do layout:
  
  
  • filhos: filho do elemento que causou o layout da página
  • bordas: bordas do contêiner
  • styleMap: modelo de objeto de estilo de contêiner digitado
• layout: a principal função para trabalhar com o layout:
  
  
  • children: elemento filho
  • bordas: bordas
  • restrições: restrições impostas pelo layout pai
  • styleMap: modelo de objeto de estilo de contêiner digitado
  • breakToken: ponto de interrupção para paginação ou divisão do layout de impressão

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

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

Como a API de layout funciona com o layout

Exemplo

Detecção

if(CSS.layoutWorklet){
  // …
}

Status da especificação

Apoio, suporte

Houdini e melhoria progressiva

Sempre identifique o suporte para evitar erros.

Use o Houdini para melhorar a exibição e a visualização.

Use CSS padrão como alternativa

Conclusão

Referências