0Pricing
CSS Academy · Lektion

Das CSS Typed Object Model (OM)

Arbeiten Sie mit CSS-Werten als typisierten JavaScript-Objekten statt als Zeichenketten – mithilfe der CSS Typed OM API.

Das CSS Typed Object Model (OM) ist eine kostenlose CSS Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des CSS Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.

Was ist das CSS Typed OM?

Das CSS Typed Object Model (Typed OM) ist Teil des CSS-Houdini-Projekts. Es stellt CSS-Werte als typisierte JavaScript-Objekte statt als einfache Zeichenfolgen bereit und ermöglicht dadurch schnellere Manipulationen, umfangreichere Berechnungen und Typsicherheit.

Alt vs. neu

Das traditionelle CSSOM gibt Zeichenfolgen zurück, während Typed OM Objekte mit Typinformationen liefert:

<p id="demo" style="opacity: 0.5;">Typed OM demo element</p>
<p id="output">Reading style values&hellip;</p>
<script>
  const demo = document.getElementById('demo');
  const output = document.getElementById('output');

  // Old CSSOM (string)
  const oldValue = demo.style.opacity; // '0.5'

  // CSS Typed OM (typed object)
  const typed = demo.computedStyleMap().get('opacity');
  // CSSUnitValue { value: 0.5, unit: 'number' }

  output.textContent = 'old (string): "' + oldValue + '"  |  typed OM: value=' + typed.value + ', unit=' + typed.unit;
</script>

computedStyleMap()

Greifen Sie auf die berechneten typisierten Werte eines beliebigen Elements zu:

<div id="box">400px wide box</div>
<p id="output">Reading computed width&hellip;</p>
<script>
  const box = document.getElementById('box');
  const output = document.getElementById('output');

  const styles = box.computedStyleMap();
  const width = styles.get('width');
  console.log(width.value); // 400
  console.log(width.unit);  // 'px'

  output.textContent = 'width.value = ' + width.value + ', width.unit = "' + width.unit + '"';
</script>

attributeStyleMap für Inline-Styles

Legen Sie typisierte Inline-Style-Werte über element.attributeStyleMap fest und lesen Sie sie aus:

<div id="box">Inline-styled box</div>
<p id="output">Setting styles via attributeStyleMap&hellip;</p>
<script>
  const box = document.getElementById('box');
  const output = document.getElementById('output');

  box.attributeStyleMap.set('opacity', CSS.number(0.5));
  box.attributeStyleMap.set('margin-top', CSS.px(16));

  const opacity = box.attributeStyleMap.get('opacity');
  output.textContent = 'opacity.value = ' + opacity.value;
</script>

Factory-Methoden für CSS-Zahlenwerte

Der CSS-Namespace stellt Factory-Methoden zum Erstellen typisierter Werte bereit:

<div id="box">Factory methods demo</div>
<p id="output">Computing&hellip;</p>
<script>
  const output = document.getElementById('output');

  const px = CSS.px(100);         // CSSUnitValue(100, 'px')
  const percent = CSS.percent(50); // CSSUnitValue(50, 'percent')
  const em = CSS.em(1.5);          // CSSUnitValue(1.5, 'em')
  const number = CSS.number(0.5);  // CSSUnitValue(0.5, 'number')
  const deg = CSS.deg(180);        // CSSUnitValue(180, 'deg')

  output.textContent = [px, percent, em, number, deg]
    .map(v => v.value + v.unit).join(', ');
</script>

Arithmetik mit typisierten Werten

CSSMathValue ermöglicht mathematische CSS-Operationen in JavaScript ohne die Verkettung von Zeichenfolgen:

<div id="box">Math on typed values</div>
<p id="output">Calculating&hellip;</p>
<script>
  const output = document.getElementById('output');

  const width = CSS.px(100).add(CSS.percent(10));
  // Equivalent to calc(100px + 10%)

  const margin = CSS.px(16).mul(2);
  // 32px

  output.textContent = 'width = ' + width.toString() + '  |  margin = ' + margin.value + margin.unit;
</script>

Leistungsvorteile

Typed OM ist bei häufigen Manipulationen (z. B. in Animations-Frames) deutlich schneller als das stringbasierte CSSOM. Werte müssen nicht bei jedem Zugriff aus Zeichenfolgen geparst werden, sondern liegen bereits als strukturierte Objekte vor.

CSSStyleValue-Typen

Zu den Werttypen des Typed OM gehören:

  • CSSUnitValue: Zahl + Einheit (100px)
  • CSSKeywordValue: Schlüsselwort (auto, none)
  • CSSImageValue: Bild (url())
  • CSSMathValue: calc-Ausdrücke
  • CSSColorValue: Farbwerte (experimentell)

Typed OM in Animationen

Verwenden Sie in der Web Animations API typisierte Werte für eine präzisere Steuerung von Animationen:

<div id="box">Animated via Typed OM</div>
<script>
  const box = document.getElementById('box');
  box.animate(
    [{ opacity: CSS.number(0) }, { opacity: CSS.number(1) }],
    { duration: 300, fill: 'forwards' }
  );
</script>

Browserunterstützung

CSS Typed OM (Level 1) wird in Chrome 66+ und Edge 79+ unterstützt. Die Unterstützung in Firefox und Safari ist teilweise vorhanden oder hinter Flags verborgen. Prüfen Sie caniuse.com, bevor Sie die API in der Produktion einsetzen. Der Umfang der API wächst weiter.

Wann Sie Typed OM verwenden sollten

Verwenden Sie Typed OM, wenn Sie:

  • CSS-Paint- oder Layout-Worklets erstellen (erforderlich)
  • Viele Elemente pro Frame in JavaScript animieren
  • CSS-Tools oder Präprozessoren entwickeln
  • CSS-Werte typgeprüft manipulieren müssen

Schnelltest

Was gibt element.computedStyleMap().get("width") im Vergleich zu getComputedStyle(element).width zurück?

Zusammenfassung

CSS Typed OM ersetzt das stringbasierte CSSOM durch typisierte JavaScript-Objekte. Verwenden Sie computedStyleMap() zum Lesen und attributeStyleMap zum Schreiben von Inline-Styles. CSS-Factory-Methoden wie CSS.px() und CSS.percent() erstellen typisierte Werte. Die API ist schneller als die Manipulation von Zeichenfolgen und für Paint- und Layout-Worklets erforderlich.

Häufig gestellte Fragen

Ist die Lektion „Das CSS Typed Object Model (OM)“ kostenlos?

Ja — der vollständige Text von „Das CSS Typed Object Model (OM)“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des CSS Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Das CSS Typed Object Model (OM)“?

Arbeiten Sie mit CSS-Werten als typisierten JavaScript-Objekten statt als Zeichenketten – mithilfe der CSS Typed OM API. Du übst CSS Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um CSS Academy zu starten?

Keine Vorkenntnisse erforderlich. CSS Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.

Wie lange dauert die Lektion „Das CSS Typed Object Model (OM)“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser CSS Academy-Lektion Code schreiben und ausführen?

Ja. Jede CSS Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. Das CSS Typed Object Model (OM)
  2. CSS Properties and Values API (@property)
  3. CSS Paint API: Worklets
  4. CSS Layout API und Geltungsbereich
← Zurück zu CSS Academy