Comment travailler avec le CSSOM dans Python

Aspose.HTML FOSS pour Python implémente le modèle d’objet CSS : les feuilles de style sont analysées en objets de règle vivants, attachées aux documents, et résolues via une vraie cascade. Ce guide applique un style à un élément et lit le résultat calculé, en utilisant pip pour l’installation.

Guide étape par étape

Étape 1: Installer le paquet

git clone https://github.com/aspose-html-foss/Aspose.HTML-FOSS-for-Python.git
cd Aspose.HTML-FOSS-for-Python
pip install -e .

Étape 2: Importer les classes requises

from aspose_html.dom import Document
from aspose_html.cssom import CSSStyleSheet

Étape 3: Construire un élément stylisé

Créez un document et un élément avec une classe et un id — les deux participeront à la correspondance des sélecteurs:

doc = Document()
el = doc.create_element("div")
el.set_attribute("class", "foo")
el.set_attribute("id", "bar")
doc.append_child(el)

Étape 4: Analyser et attacher une feuille de style

replace_sync() analyse le texte de la feuille de style; attach_style_sheet() l’enregistre avec le document:

sheet = CSSStyleSheet()
sheet.replace_sync(".foo { color: red } #bar { color: blue }")
doc.attach_style_sheet(sheet)

Étape 5: Lire le style calculé

Le sélecteur ID (spécificité 1,0,0) l’emporte sur le sélecteur de classe (0,1,0), donc le bleu l’emporte:

style = el.get_computed_style()
print(style.get_property_value("color"))

Problèmes courants et solutions

La valeur calculée ignore ma feuille de style. La feuille doit être attachée via Document.attach_style_sheet() before get_computed_style() est appelé.

Un style en ligne perd face à une règle de feuille de style. Règles d’auteur marquées !important priment sur les déclarations en ligne non importantes ; inspectez les priorités avec get_property_priority().

Deux règles avec la même spécificité donnent un gagnant surprenant. Les règles plus tardives gagnent les égalités de spécificité — l’ordre des règles dans la feuille compte.

Foire aux questions

Comment définir des styles en ligne de manière programmatique?

Via la déclaration style de l’élément: assignez-la à une variable et appelez set_property() dessus.

Quel objet get_computed_style renvoie?

Un ComputedStyleDeclaration; lisez les valeurs avec get_property_value().

Les règles media, keyframes et font-face sont-elles modélisées?

Oui — les feuilles analysées contiennent des règles typées incluant CSSMediaRule, CSSKeyframesRule et CSSFontFaceRule dans un CSSRuleList.