0Pricing
CSS Academy · Leçon

Modèle d’objets typés CSS (OM)

Manipulez les valeurs CSS comme des objets JavaScript typés plutôt que comme des chaînes, à l’aide de l’API CSS Typed OM.

Modèle d’objets typés CSS (OM) est une leçon CSS Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage CSS Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours CSS Academy comprend 4 leçons au total.

Qu’est-ce que le CSS Typed OM ?

Le modèle d’objets CSS (Typed OM) fait partie du projet CSS Houdini. Il expose les valeurs CSS sous forme d’objets JavaScript typés plutôt que de simples chaînes, ce qui permet une manipulation plus rapide, des calculs plus riches et la vérification des types.

Ancien et nouveau modèle

Le CSSOM traditionnel renvoie des chaînes ; Typed OM renvoie des objets accompagnés d’informations de type :

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

Accédez aux valeurs typées calculées d’un élément quelconque :

<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 pour les styles en ligne

Définissez et récupérez les valeurs typées des styles en ligne avec 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>

Méthodes de fabrique numériques CSS

L’espace de noms CSS fournit des méthodes de fabrique pour créer des valeurs typées :

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

Calculs sur les valeurs typées

CSSMathValue permet d’effectuer des opérations mathématiques CSS en JavaScript sans concaténer de chaînes :

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

Avantages en matière de performances

Typed OM est nettement plus rapide que le CSSOM fondé sur des chaînes pour les manipulations fréquentes (par exemple, à chaque image d’animation). Les valeurs n’ont pas besoin d’être analysées à partir de chaînes à chaque accès : elles sont déjà structurées en objets.

Types de CSSStyleValue

Les types de valeurs de Typed OM comprennent :

  • CSSUnitValue : nombre + unité (100px)
  • CSSKeywordValue : mot-clé (auto, none)
  • CSSImageValue : image (url())
  • CSSMathValue : expressions calc
  • CSSColorValue : valeurs de couleur (expérimental)

Typed OM dans les animations

Dans l’API Web Animations, utilisez des valeurs typées pour contrôler les animations avec davantage de précision :

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

Compatibilité des navigateurs

CSS Typed OM (niveau 1) est pris en charge dans Chrome 66+ et Edge 79+. La prise en charge de Firefox et Safari est partielle ou réservée à des options expérimentales. Consultez caniuse.com avant toute utilisation en production. L’interface continue de s’enrichir.

Quand utiliser Typed OM

Utilisez Typed OM lorsque vous :

  • Créez des modules de peinture ou de mise en page CSS (obligatoire)
  • Animez de nombreux éléments à chaque image en JavaScript
  • Créez des outils CSS ou des préprocesseurs
  • Avez besoin de manipuler des valeurs CSS avec vérification des types

Vérification rapide

Que renvoie element.computedStyleMap().get("width") par rapport à getComputedStyle(element).width ?

Récapitulatif

CSS Typed OM remplace le CSSOM fondé sur des chaînes par des objets JavaScript typés. Utilisez computedStyleMap() pour lire les valeurs et attributeStyleMap pour écrire les styles en ligne. Les méthodes de fabrique CSS (CSS.px(), CSS.percent()) créent des valeurs typées. Cette interface est plus rapide que la manipulation de chaînes et est obligatoire pour les modules de peinture et de mise en page.

Questions Fréquemment Posées

La leçon « Modèle d’objets typés CSS (OM) » est-elle gratuite ?

Oui — le texte complet de « Modèle d’objets typés CSS (OM) » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours CSS Academy, passe à CoddyKit PRO. Le cours CSS Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Modèle d’objets typés CSS (OM) » ?

Manipulez les valeurs CSS comme des objets JavaScript typés plutôt que comme des chaînes, à l’aide de l’API CSS Typed OM. Tu pratiques CSS Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer CSS Academy ?

Aucune expérience préalable n'est requise. CSS Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.

Combien de temps prend la leçon « Modèle d’objets typés CSS (OM) » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon CSS Academy ?

Oui. Chaque leçon CSS Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

  1. Modèle d’objets typés CSS (OM)
  2. API des propriétés et valeurs CSS (@property)
  3. API CSS Paint : worklets
  4. API CSS Layout et portée
← Retour à CSS Academy