Tutoriel CSS Houdini

Qu'est-ce qu'un Houdini?

• API Paint - vous permet d'étendre CSS à l'étape (c'est-à-dire l'étape de rendu) du rendu des éléments visuels (couleur, arrière-plan, bordures, etc.).
• API de mise en page - vous permet d'étendre CSS à l'étape de déterminer la taille, la position et l'alignement des éléments.
• API d'animation - «point d'extension» dans l'étape d'affichage et d'animation des éléments.

• API de modèle d'objet typé
• API Propriétés et valeurs personnalisées
• API de mesure des polices
• Worklets

Futur CSS

API TOM (Typed Object Model)

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

{
  value: 20,
  unit: 'px'
}

• computedStyleMap (): pour analyser les styles calculés (non intégrés). Cette méthode est appelée avant d'analyser ou d'utiliser d'autres méthodes.
• attributeStyleMap: pour analyser et modifier les styles en ligne. Il s'agit d'une propriété d'élément.

//       ( )
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: supprime tous les styles en ligne
• delete: supprime une propriété CSS spécifique et sa valeur
• a: retourne vrai / faux selon la disponibilité de la propriété spécifiée
• ajouter: ajoute une valeur supplémentaire à une propriété qui prend en charge plusieurs valeurs

Détection

let selectedElement = document.getElementById('example')

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

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

Statut de spécification

Soutien

API Propriétés et valeurs personnalisées

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

• nom: nom de la propriété personnalisée
• syntaxe: instruction d'analyse. Les valeurs prédéfinies sont: <couleur>, <entier>, <numéro>, <longueur>, <pourcentage>, etc.
• initialValue: valeur par défaut (avant la substitution, ainsi que lorsque des erreurs se produisent)

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

Exemple

Détection

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

Statut de spécification

Soutien

API de mesure des polices

Statut de spécification

Vorkleta

• Paint Worklet - Paint API
• Animation Worklet - Animation API
• Layout Worklet - Layout API

API Paint

1. Écrivez et enregistrez un worklet à l'aide de la fonction registerPaint
2. Appelez un worklet en HTML ou JS à l'aide de CSS.paintWorklet.addModule
3. Utilisez la méthode paint () en CSS avec le nom du vorklet et les arguments passés

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: tableau de propriétés CSS personnalisées observées par le worklet. Ce tableau représente les dépendances du worklet.
• inputArguments: un tableau d'arguments qui peut être passé d'une fonction à un CSS externe
• contextOptions: transparence des couleurs. Si faux, toutes les couleurs seront complètement opaques
• paint: la fonction principale prenant les arguments suivants:
  
  
  • ctx: un contexte de dessin 2D presque identique au contexte de canevas 2D de l'API Canvas
  • taille: un objet avec la largeur et la hauteur de l'élément. Les valeurs dépendent du processus de rendu de la mise en page. La taille de la toile est identique à la taille réelle de l'article
  • propriétés: variables contenues dans inputProperties
  • args: un tableau d'arguments transmis à la fonction 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);
}

Exemple

Détection

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

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

Statut de spécification

Soutien

API d'animation

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

• constructeur: appelé lorsqu'une nouvelle instance est créée. Utilisé pour la configuration générale.
• animer: la fonction principale contenant la logique d'animation. Les paramètres suivants sont acceptés:
  
  
  • currentTime: horodatages sur une chronologie spécifique
  • effet: un tableau d'effets utilisé dans l'animation

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

Horodatages

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

Exemple

Détection

if(CSS.animationWorklet){
  // …
}

Statut de spécification

Soutien

API de mise en page

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: un tableau de propriétés CSS personnalisées qui sont surveillées par le worklet et qui appartiennent au parent, l'élément qui a provoqué le rendu de la présentation. Ce tableau représente les dépendances de disposition
• childrenInputProperties: un tableau de propriétés CSS personnalisées qui sont surveillées par le widget et qui appartiennent au descendant
• layoutOptions: définit les propriétés de disposition suivantes:
  
  
  • childDisplay: Les valeurs prédéfinies sont block et normal. Définit la façon dont l'élément est affiché (bloc ou ligne)
  • dimensionnement: les valeurs prédéfinies sont de type bloc et manuelles. Détermine la nécessité d'un calcul préliminaire de la taille des éléments (si non spécifié)
• intrinsicSizes: définit la façon dont le conteneur ou son contenu sont affichés dans le contexte de mise en page:
  
  
  • enfants: enfant de l'élément qui a rendu la mise en page
  • bord: bord du conteneur
  • styleMap: modèle d'objet de style conteneur typé
• mise en page: la fonction principale pour travailler avec la mise en page:
  
  
  • enfants: élément enfant
  • arêtes: bordures
  • contraintes: contraintes imposées par la disposition parent
  • styleMap: modèle d'objet de style conteneur typé
  • breakToken: point d'arrêt pour la pagination ou le fractionnement de la mise en page d'impression

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

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

Fonctionnement de l'API de mise en page avec la mise en page

Exemple

Détection

if(CSS.layoutWorklet){
  // …
}

Statut de spécification

Soutien

Houdini et l'amélioration progressive

Identifiez toujours le support pour éviter les erreurs.

Utilisez Houdini pour améliorer l'affichage et la visualisation.

Utiliser le CSS standard comme alternative

Conclusion

Références