Comprendre le rendu dans le navigateur : CSSOM-js tutoriel-php.cn

Hé, cet article fait partie d'une série sur le rendu dans le navigateur. Si vous n'avez pas encore lu les articles précédents, consultez les liens ci-dessous :

Comprendre le rendu dans le navigateur : DOM

Dans le dernier article, nous avons exploré comment le HTML est traité par le navigateur via le DOM (Document Object Model), qui définit la structure de la page Web. Cependant, une page Web n'est pas seulement composée de HTML et ce que beaucoup ne savent toujours pas, c'est que CSS a également sa propre représentation sous la forme d'un objet, appelé CSSOM (CSS Object Model).

Le navigateur utilise CSSOM en conjonction avec le DOM pour construire la page, combinant structure (HTML) et styles (CSS), résultant en une présentation visuelle harmonieuse.

Dans cet article, nous approfondirons nos connaissances sur le CSSOM, en comprenant sa structure, son importance et comment il peut être manipulé.

Qu’est-ce que le CSSOM ?

Comme le DOM, le CSSOM est une structure de données hiérarchique, mais sa fonction est de représenter le CSS d'un document web.

CSSOM est généré par les navigateurs après le chargement et le traitement des fichiers de style. Bien qu'il soit construit séparément du DOM, les deux fonctionnent ensemble pour que le navigateur puisse assembler la page avec la bonne structure (DOM) et appliquer les styles appropriés (CSSOM).

La fonction principale de CSSOM est de fournir au navigateur une « carte » détaillée des styles qui doivent être appliqués à chaque élément de la page.

Voir une représentation visuelle du CSSOM ci-dessous :

Entendendo renderização no browser: CSSOM

Dans le code, cette représentation ressemblerait à ceci :

body {
  font-size: 16px;
}

div {
  width: 200px;
  height: 100px;
  background: blue;
}

a {
  color: red;
  text-decoration: none;
}

h1 {
  font-weight: bold;
}

Copier après la connexion

Et l'arbre DOM faisant référence au CSSOM que nous avons vu précédemment est représenté ainsi :

Entendendo renderização no browser: CSSOM

Manipulation de CSSOM

Les navigateurs nous fournissent un ensemble d'API qui nous permettent de manipuler le CSS à l'aide de javascript. C'est similaire à l'API DOM, mais pour CSS au lieu de HTML.

En utilisant cette API, nous pouvons lire et manipuler le CSS d'une page de manière dynamique.

Le moyen le plus simple de manipuler les styles consiste à utiliser la propriété style présente dans le document.

Pour accéder et manipuler un élément CSSOM pour la première fois, ouvrez la console du navigateur et exécutez le code suivant :

document.body.style.background = "gray";
console.log(document.body.style.background); // gray

Copier après la connexion

Après avoir exécuté l'extrait de code ci-dessus, je vous recommande d'inspecter les éléments de la page et d'analyser le corps. Notez que maintenant notre corps a un style en ligne et ressemblera plus ou moins à ceci :

body {
  font-size: 16px;
}

div {
  width: 200px;
  height: 100px;
  background: blue;
}

a {
  color: red;
  text-decoration: none;
}

h1 {
  font-weight: bold;
}

Copier après la connexion

Nous pouvons ajouter ou modifier n'importe quelle propriété CSS sur notre page, en suivant toujours le modèle element.style.propertyname.

Une autre façon de manipuler les styles en ligne consiste à utiliser certaines méthodes présentes dans le style.

setProperty : avec cette méthode, vous pouvez ajouter ou modifier la valeur d'une propriété en ligne.

document.body.style.background = "gray";
console.log(document.body.style.background); // gray

Copier après la connexion

getPropertyValue : avec cette méthode, vous pouvez accéder à la valeur d'une propriété en ligne.

<body>



<p>Isso acontece porque alterar a propriedade style de um elemento só tem efeito para estilos inlines.<br>
A mesma lógica se aplica para leitura de propriedades do style. Se você executar o código abaixo não vai ter nenhum retorno, pois nenhum momento definimos a propriedade color usando estilo inline.<br>
</p>

<pre class="brush:php;toolbar:false">console.log(document.body.style.background); // '''

Copier après la connexion

removeProperty : avec cette méthode, vous pouvez supprimer une propriété en ligne.

document.body.style.setProperty("background", "red");

// Agora execute o próximo comando

document.body.style.setProperty("background", "blue");

Copier après la connexion

getComputedStyle fonctionne en lecture seule. Vous pourrez accéder aux informations de style pour n'importe quel élément ou pseudo-élément, mais vous ne pourrez pas apporter de modifications.

Qu’en est-il des styles qui ne sont pas en ligne ?

L'écriture de styles en ligne n'est pas très courante, nous pouvons donc également accéder aux styles calculés, ceux que nous définissons dans notre feuille de style. Pour ce faire, nous pouvons accéder et manipuler directement notre feuille de style.

Exécutez l'extrait de code ci-dessous dans la console de votre navigateur :

document.body.style.getPropertyValue("background"); // blue

Copier après la connexion

Grâce à lui vous aurez accès à toutes les feuilles de style déclarées dans l'en-tête de votre html.

Ces feuilles de style sont renvoyées sous forme de liste (cela ressemble à un tableau, mais ce n'est pas le cas) et vous pouvez y accéder via l'index.

document.body.style.removeProperty("background");

Copier après la connexion

Désormais, je recommande d'exécuter les tests ailleurs, car ce blog est réalisé avec Tailwind CSS et la manipulation de la feuille de style devient plus compliquée.

Accédez à cette page et exécutez les commandes dans sa console.

document.styleSheets;

Copier après la connexion

En exécutant le code ci-dessus vous aurez accès à tous les css présents dans la feuille de style. En suivant la même logique que ci-dessus, vous pouvez accéder aux éléments via index.

document.styleSheets[1];

Copier après la connexion

Dans le code ci-dessus, j'accède à la déclaration de style du corps de la page.

document.styleSheets[0].cssRules;

Copier après la connexion

En accédant à la propriété style, nous pouvons ajouter ou modifier n'importe quelle propriété CSS, mais sans écrire de styles en ligne.

Je vous recommande de jouer un peu plus avec cette api en changeant les index et en changeant le CSS des différents éléments.

Conclusion

Tout comme le DOM, le CSSOM est une représentation arborescente utilisée par les navigateurs pour le processus de rendu.

Nous pouvons accéder à tous les CSS de la page et les manipuler librement en utilisant javascript. Savoir effectuer ce type d'opération est essentiel pour comprendre les outils CSS tels que les composants stylisés, les linéaires, etc.

Les connaissances de base sont les plus importantes, mais elles sont constamment négligées.
Dans le cadre du développement web, connaître HTML, CSS, JavaScript et le fonctionnement du navigateur est essentiel. Avec cette base solide, vous pourrez apprendre toute technologie qui dérive de ces fondamentaux.