Qu'est-ce que le CSS Object Model (CSSOM) ?

Qu'est-ce que le CSSOM ?

Le modèle objet CSS (CSSOM, pour CSS Object Model) est la représentation en mémoire, dans le navigateur, de tout le CSS appliqué à une page, accompagnée d'API JavaScript pour le lire et le modifier. C'est l'équivalent « styles » du DOM : le DOM décrit le contenu, le CSSOM décrit sa mise en forme. Voir la référence MDN.

Comment cela fonctionne

Pendant que le navigateur transforme le HTML en DOM, il transforme aussi chaque feuille de style trouvée en CSSOM. Les deux se combinent dans l'arbre de rendu, qui ne contient que les nœuds visibles avec les styles qui s'y appliquent. Le navigateur calcule ensuite la mise en page et peint cet arbre. Cette séquence est le chemin critique de rendu.

Une différence compte pour la vitesse : le DOM se construit de façon incrémentale, mais le CSSOM n'est utilisé qu'une fois entièrement analysé, car une règle ultérieure peut en écraser une précédente. C'est pourquoi le CSS bloque le rendu par défaut : le navigateur n'affiche aucun contenu traité tant que le CSSOM n'est pas construit.

Exemple

Une page lie une grosse feuille de style dans le head. Le HTML arrive vite, mais la feuille met bien plus longtemps et l'écran reste vide jusqu'à son arrivée. En séparant les styles réservés à l'impression ou aux grands écrans avec un attribut media comme media="print", on évite qu'ils bloquent le premier rendu. Le navigateur les télécharge quand même, avec une priorité plus basse.

Lire et modifier les styles depuis JavaScript

• document.styleSheets et CSSStyleSheet permettent d'inspecter et de modifier les règles.
• element.style définit des styles en ligne.
• getComputedStyle() renvoie un objet « vivant » en lecture seule avec les valeurs résolues après application des feuilles de style.

Erreurs fréquentes

• Une seule feuille de style énorme : tout ce qu'elle contient bloque le premier affichage. Gardez le CSS critique petit et marquez le reste comme non bloquant avec des media queries.
• Lire et écrire des styles dans une boucle : lire une valeur de mise en page comme offsetHeight juste après avoir changé un style force le navigateur à calculer la mise en page immédiatement. Répété dans une boucle, on parle de layout thrashing. Regroupez d'abord les lectures, puis les écritures.
• Modifier de nombreuses propriétés une à une : changez plutôt une classe en une fois.
• CSS chargé tardivement : des styles qui arrivent après le contenu peuvent décaler la mise en page et pénaliser le Cumulative Layout Shift.

CSSOM et mesure des performances

Un CSSOM lent retarde le premier affichage et, avec lui, des métriques comme le Largest Contentful Paint. Voir rendu pour la vue d'ensemble. Pour suivre ces chiffres, la surveillance de la vitesse de page enregistre régulièrement les scores Lighthouse et les Core Web Vitals et peut vous alerter en cas de dégradation, et le vérificateur de Core Web Vitals donne une mesure rapide ponctuelle. Pour aller plus loin : améliorer la vitesse de votre site et surveiller les Core Web Vitals.

Questions fréquentes sur le CSSOM

Quelle est la différence entre le DOM et le CSSOM ?

Le DOM est un arbre du contenu de la page (éléments et texte). Le CSSOM contient les règles de style. Le navigateur combine les deux dans l'arbre de rendu avec lequel il calcule la mise en page et peint la page.

Le CSS bloque-t-il le rendu ?

Oui, par défaut. Le navigateur n'affiche aucun contenu traité tant que le CSSOM n'est pas construit. Les feuilles de style dont le type de média ou la media query ne correspond pas, comme les styles d'impression, ne bloquent pas le premier rendu.

getComputedStyle modifie-t-il les styles ?

Non. Il renvoie un objet « vivant » en lecture seule avec les valeurs résolues. Pour modifier des styles, utilisez element.style, des classes ou les API de feuilles de style.

Le CSSOM inclut-il les styles avec display: none ?

Le CSSOM contient les règles. C'est l'arbre de rendu qui écarte les éléments avec display: none et leurs descendants.