CSS Houdini Tutorial

Was ist ein Houdini?

• Paint API - Ermöglicht das Erweitern von CSS im Schritt (dh in der Renderphase) des Renderns visueller Elemente (Farbe, Hintergrund, Rahmen usw.).
• Layout-API - Ermöglicht das Erweitern von CSS beim Bestimmen der Größe, Position und Ausrichtung von Elementen.
• Animations-API - „Erweiterungspunkt“ im Schritt des Anzeigens und Animierens von Elementen.

• Typisierte Objektmodell-API
• API für benutzerdefinierte Eigenschaften und Werte
• API für Schriftmetriken
• Worklets

CSS Zukunft

TOM-API (Typed Object Model)

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

{
  value: 20,
  unit: 'px'
}

• computedStyleMap (): Zum Parsen von berechneten (nicht integrierten) Stilen. Diese Methode wird aufgerufen, bevor andere Methoden analysiert oder verwendet werden.
• attributeStyleMap: Zum Parsen und Ändern von Inline-Stilen. Dies ist eine Artikeleigenschaft.

//       ( )
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: Entfernt alle Inline-Stile
• Löschen: Löscht eine bestimmte CSS-Eigenschaft und ihren Wert
• has: gibt true / false zurück, abhängig von der Verfügbarkeit der angegebenen Eigenschaft
• Anhängen: Fügt einer Eigenschaft, die mehrere Werte unterstützt, einen zusätzlichen Wert hinzu

Erkennung

let selectedElement = document.getElementById('example')

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

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

Spezifikationsstatus

Unterstützung

API für benutzerdefinierte Eigenschaften und Werte

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

• name: Name der benutzerdefinierten Eigenschaft
• Syntax: Anweisung zum Parsen. Die vordefinierten Werte sind: <Farbe>, <Ganzzahl>, <Nummer>, <Länge>, <Prozent> usw.
• initialValue: Standardwert (vor dem Überschreiben sowie bei Auftreten von Fehlern)

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

Beispiel

Erkennung

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

Spezifikationsstatus

Unterstützung

API für Schriftmetriken

Spezifikationsstatus

Vorkleta

• Paint Worklet - Paint API
• Animations-Worklet - Animations-API
• Layout Worklet - Layout API

Paint API

1. Schreiben und registrieren Sie ein Worklet mit der Funktion registerPaint
2. Rufen Sie ein Worklet in HTML oder JS mit CSS.paintWorklet.addModule auf
3. Verwenden Sie die paint () -Methode in CSS zusammen mit dem Namen des Vorklets und den übergebenen Argumenten

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: Ein Array von benutzerdefinierten CSS-Eigenschaften, die das Worklet beobachtet. Dieses Array repräsentiert die Abhängigkeiten des Worklets.
• inputArguments: Ein Array von Argumenten, die von einer Funktion an externes CSS übergeben werden können
• contextOptions: Farbtransparenz. Wenn false, sind alle Farben vollständig undurchsichtig
• paint: die Hauptfunktion mit folgenden Argumenten:
  
  
  • ctx: Ein 2D-Zeichnungskontext, der fast identisch mit dem 2D-Canvas-Kontext der Canvas-API ist
  • Größe: Ein Objekt mit der Breite und Höhe des Elements. Die Werte hängen vom Layout-Rendering-Prozess ab. Die Leinwandgröße entspricht der tatsächlichen Artikelgröße
  • Eigenschaften: Variablen, die in inputProperties enthalten sind
  • args: Ein Array von Argumenten, die an die Paint-Funktion übergeben werden

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

Beispiel

Erkennung

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

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

Spezifikationsstatus

Unterstützung

Animations-API

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

• Konstruktor: Wird aufgerufen, wenn eine neue Instanz erstellt wird. Wird für die allgemeine Einrichtung verwendet.
• animieren: Die Hauptfunktion, die die Animationslogik enthält. Folgende Parameter werden akzeptiert:
  
  
  • currentTime: Zeitstempel auf einer bestimmten Zeitachse
  • Effekt: Eine Reihe von Effekten, die in der Animation verwendet werden

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

Zeitstempel

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

Beispiel

Erkennung

if(CSS.animationWorklet){
  // …
}

Spezifikationsstatus

Unterstützung

Layout-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: Ein Array von benutzerdefinierten CSS-Eigenschaften, die das Worklet beobachtet und die zum übergeordneten Element gehören, dem Element, das das Rendern des Layouts verursacht hat. Dieses Array repräsentiert die Layoutabhängigkeiten
• childrenInputProperties: Ein Array von benutzerdefinierten CSS-Eigenschaften, die vom Widget überwacht werden und zum Nachkommen gehören
• layoutOptions: Definiert die folgenden Layout-Eigenschaften:
  
  
  • childDisplay: Die vordefinierten Werte sind block und normal. Definiert, wie das Element angezeigt wird (Block oder Zeile).
  • Dimensionierung: Die vordefinierten Werte sind blockartig und manuell. Bestimmt die Notwendigkeit einer vorläufigen Berechnung der Elementgrößen (falls nicht angegeben)
• intrinsicSizes: Definiert, wie der Container oder sein Inhalt im Layoutkontext angezeigt wird:
  
  
  • Kinder: Kind des Elements, das das Rendern des Seitenlayouts verursacht hat
  • Kanten: Containerränder
  • styleMap: Typisiertes Objektmodell im Container-Stil
• Layout: Die Hauptfunktion für die Arbeit mit dem Layout:
  
  
  • Kinder: Kinderelement
  • Kanten: Ränder
  • Einschränkungen: Einschränkungen, die vom übergeordneten Layout auferlegt werden
  • styleMap: Typisiertes Objektmodell im Container-Stil
  • breakToken: Haltepunkt für die Paginierung oder Aufteilung des Drucklayouts

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

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

Wie die Layout-API mit dem Layout funktioniert

Beispiel

Erkennung

if(CSS.layoutWorklet){
  // …
}

Spezifikationsstatus

Unterstützung

Houdini und fortschreitende Verbesserung

Identifizieren Sie immer den Support, um Fehler zu vermeiden.

Verwenden Sie Houdini, um die Anzeige und Visualisierung zu verbessern.

Verwenden Sie alternativ Standard-CSS

Fazit

Verweise