0Pricing
CSS Academy · Lezione

CSS Typed Object Model (OM)

Utilizzi i valori CSS come oggetti JavaScript tipizzati anziché come stringhe tramite l’API CSS Typed OM.

CSS Typed Object Model (OM) è una lezione CSS Academy gratuita su CoddyKit. Questa è la lezione 1 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento CSS Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso CSS Academy include 4 lezioni in totale.

Che cos'è il CSS Typed OM?

Il CSS Typed Object Model (Typed OM) fa parte del progetto CSS Houdini. Espone i valori CSS come oggetti JavaScript tipizzati invece che come semplici stringhe, consentendo una manipolazione più rapida, operazioni aritmetiche più ricche e la sicurezza dei tipi.

Vecchio e nuovo

Il CSSOM tradizionale restituisce stringhe; Typed OM restituisce oggetti con informazioni sul tipo:

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

Acceda ai valori tipizzati calcolati di qualsiasi elemento:

<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 per gli stili inline

Imposti e legga i valori tipizzati degli stili inline tramite element.attributeStyleMap:

<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>

Metodi factory numerici CSS

Il namespace CSS fornisce metodi factory per creare valori tipizzati:

<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>

Operazioni aritmetiche sui valori tipizzati

CSSMathValue consente di eseguire operazioni matematiche CSS in JavaScript senza concatenare stringhe:

<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>

Vantaggi in termini di prestazioni

Typed OM è significativamente più veloce del CSSOM basato su stringhe per manipolazioni frequenti (ad esempio, nei frame delle animazioni). I valori non devono essere analizzati da stringhe a ogni accesso: sono già oggetti strutturati.

Tipi CSSStyleValue

I tipi di valore di Typed OM includono:

  • CSSUnitValue: numero + unità (100px)
  • CSSKeywordValue: parola chiave (auto, none)
  • CSSImageValue: immagine (url())
  • CSSMathValue: espressioni calc
  • CSSColorValue: valori di colore (sperimentale)

Typed OM nelle animazioni

Nella Web Animations API, utilizzi valori tipizzati per un controllo più preciso delle animazioni:

<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>

Supporto dei browser

CSS Typed OM (Level 1) è supportato in Chrome 66+ ed Edge 79+. Il supporto in Firefox e Safari è parziale o disponibile dietro flag. Controlli caniuse.com prima di utilizzarlo in produzione. La superficie dell'API continua ad ampliarsi.

Quando utilizzare Typed OM

Utilizzi Typed OM quando:

  • Costruisce Paint Worklet o Layout Worklet CSS (obbligatorio)
  • Anima molti elementi per frame in JavaScript
  • Costruisce strumenti CSS o preprocessori
  • Ha bisogno di manipolare valori CSS con controllo dei tipi

Verifica rapida

Che cosa restituisce element.computedStyleMap().get("width") rispetto a getComputedStyle(element).width?

Riepilogo

CSS Typed OM sostituisce il CSSOM basato su stringhe con oggetti JavaScript tipizzati. Utilizzi computedStyleMap() per leggere i valori e attributeStyleMap per scrivere gli stili inline. I metodi factory CSS (CSS.px(), CSS.percent()) creano valori tipizzati. L'API è più veloce della manipolazione basata su stringhe ed è necessaria per i Paint Worklet e i Layout Worklet.

Domande Frequenti

La lezione «CSS Typed Object Model (OM)» è gratuita?

Sì — il testo completo di «CSS Typed Object Model (OM)» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso CSS Academy, passa a CoddyKit PRO. Il corso CSS Academy include 4 lezioni in totale.

Cosa imparerò in «CSS Typed Object Model (OM)»?

Utilizzi i valori CSS come oggetti JavaScript tipizzati anziché come stringhe tramite l’API CSS Typed OM. Eserciti CSS Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare CSS Academy?

Non è richiesta alcuna esperienza precedente. CSS Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 4.

Quanto tempo richiede la lezione «CSS Typed Object Model (OM)»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione CSS Academy?

Sì. Ogni lezione CSS Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

  1. CSS Typed Object Model (OM)
  2. API CSS Properties and Values (@property)
  3. CSS Paint API: worklet
  4. CSS Layout API e ambito
← Torna a CSS Academy