Tutorial CSS Houdini

¿Qué es un Houdini?

• Paint API: le permite extender CSS en el paso (es decir, la etapa de representación) de la representación de elementos visuales (color, fondo, bordes, etc.).
• API de diseño: le permite extender CSS en el paso de determinar el tamaño, la posición y la alineación de los elementos.
• API de animación: "punto de extensión" en el paso de mostrar y animar elementos.

• API de modelo de objeto escrito
• API de propiedades y valores personalizados
• API de métricas de fuente
• Worklets

Futuro CSS

API del modelo de objetos con tipo (TOM)

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

{
  value: 20,
  unit: 'px'
}

• computedStyleMap (): para analizar estilos calculados (no integrados). Este método se llama antes de analizar o usar otros métodos.
• attributeStyleMap: para analizar y modificar estilos en línea. Esta es una propiedad del artículo.

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

• clear: elimina todos los estilos en línea
• eliminar: elimina una propiedad CSS específica y su valor
• has: devuelve verdadero / falso dependiendo de la disponibilidad de la propiedad especificada
• agregar: agrega un valor adicional a una propiedad que admite varios valores

Detección

let selectedElement = document.getElementById('example')

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

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

Estado de la especificación

Apoyo

API de propiedades y valores personalizados

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

• nombre: nombre de la propiedad personalizada
• sintaxis: instrucciones para el análisis. Los valores predefinidos son: <color>, <integer>, <number>, <length>, <percentage>, etc.
• initialValue: valor predeterminado (antes de anular, así como también cuando ocurren errores)

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

Ejemplo

Detección

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

Estado de la especificación

Apoyo

API de métricas de fuente

Estado de la especificación

Vorkleta

• Paint Worklet - Paint API
• Animation Worklet - API de animación
• Layout Worklet - API de diseño

API de pintura

1. Escribir y registrar un worklet usando la función registerPaint
2. Llamar a un worklet en HTML o JS usando CSS.paintWorklet.addModule
3. Use el método paint () en CSS junto con el nombre del vorklet y los argumentos pasados

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: una matriz de propiedades CSS personalizadas que observa el worklet. Esta matriz representa las dependencias del worklet.
• inputArguments: una matriz de argumentos que se pueden pasar de una función a CSS externo
• contextOptions: transparencia de color. Si es falso, todos los colores serán completamente opacos.
• paint: la función principal toma los siguientes argumentos:
  
  
  • ctx: un contexto de dibujo 2D que es casi idéntico al contexto de lienzo 2D de la API de lienzo
  • tamaño: un objeto con el ancho y la altura del elemento. Los valores dependen del proceso de representación del diseño. El tamaño del lienzo es el mismo que el tamaño real del artículo
  • propiedades: variables contenidas en inputProperties
  • args: una serie de argumentos pasados ​​a la función de pintura

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

Ejemplo

Detección

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

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

Estado de la especificación

Apoyo

API de animación

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

• constructor: llamado cuando se crea una nueva instancia. Utilizado para la configuración general.
• animado: la función principal que contiene la lógica de animación. Se aceptan los siguientes parámetros:
  
  
  • currentTime: marcas de tiempo en una línea de tiempo específica
  • efecto: un conjunto de efectos utilizados en la animación

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

Sellos de tiempo

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

Ejemplo

Detección

if(CSS.animationWorklet){
  // …
}

Estado de la especificación

Apoyo

API de diseño

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: una matriz de propiedades CSS personalizadas que el worklet está observando y que pertenecen al padre, el elemento que causó el diseño. Esta matriz representa las dependencias de diseño.
• childrenInputProperties: una matriz de propiedades CSS personalizadas que el widget observa y que pertenecen al elemento secundario
• layoutOptions: define las siguientes propiedades de diseño:
  
  
  • childDisplay: los valores predefinidos son block y normal. Define cómo se muestra el elemento (bloque o línea)
  • dimensionamiento: Los valores predefinidos son como bloques y manuales. Determina la necesidad de un cálculo preliminar de los tamaños de los elementos (si no se especifica)
• intrinsicSizes: define cómo se muestra el contenedor o su contenido en el contexto del diseño:
  
  
  • children: hijo del elemento que causó que se representara el diseño de la página
  • bordes: bordes del contenedor
  • styleMap: modelo de objeto de estilo de contenedor escrito
• diseño: la función principal para trabajar con el diseño:
  
  
  • hijos: elemento hijo
  • bordes: bordes
  • restricciones: restricciones impuestas por el diseño primario
  • styleMap: modelo de objeto de estilo de contenedor escrito
  • breakToken: punto de interrupción para paginación o división de diseño de impresión

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

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

Cómo funciona la API de diseño con diseño

Ejemplo

Detección

if(CSS.layoutWorklet){
  // …
}

Estado de la especificación

Apoyo

Houdini y mejora progresiva

Identifique siempre el soporte para evitar errores.

Use Houdini para mejorar la visualización y la visualización.

Use CSS estándar como alternativa

Conclusión

Referencias