CSSOM et styles calculés

CSSOM et styles calculés

Le modèle objet CSS transforme le texte des feuilles de style en objets vivants qui participent à une cascade réelle. CSSStyleSheet contient les règles, CSSStyleDeclaration contient les déclarations de propriétés, et Element.get_computed_style() rapporte le résultat résolu.

Analyse et attachement des feuilles de style

CSSStyleSheet.replace_sync() analyse le texte de la feuille de style ; Document.attach_style_sheet() enregistre la feuille afin que ses règles s’appliquent. Les règles peuvent également être gérées individuellement avec insert_rule(), add_rule() et remove_rule() :

from aspose_html.dom import Document
from aspose_html.cssom import CSSStyleSheet
doc = Document()
sheet = CSSStyleSheet()
sheet.replace_sync("div { color: red }")
doc.attach_style_sheet(sheet)

La famille de règles

Les feuilles analysées contiennent des règles typées : CSSStyleRule pour les sélecteurs ordinaires plus CSSMediaRule, CSSKeyframesRule, CSSFontFaceRule, CSSSupportsRule, CSSImportRule, et les variantes page/couche/espace de noms, regroupées dans un CSSRuleList. parse_stylesheet() et parse_rule_text() exposent directement la couche d’analyse.

Déclarations et styles en ligne

La propriété style de chaque élément est une CSSStyleDeclaration dynamique : déclarations en lecture et écriture set_property(), get_property_value(), get_property_priority() et item(). Les déclarations en ligne ont priorité sur les règles d’auteur, quelle que soit la spécificité du sélecteur :

from aspose_html.dom import Document
from aspose_html.cssom import CSSStyleSheet
doc = Document()
el = doc.create_element("div")
doc.append_child(el)
sheet = CSSStyleSheet()
sheet.replace_sync("div { color: red }")
doc.attach_style_sheet(sheet)
inline = el.style
inline.set_property("color", "blue")
print(el.get_computed_style().get_property_value("color"))

Résolution de la cascade

Element.get_computed_style() renvoie un ComputedStyleDeclaration reflétant la spécificité, l’importance et l’héritage. Une règle d’auteur marquée !important l’emporte sur une déclaration en ligne non importante :

from aspose_html.dom import Document
from aspose_html.cssom import CSSStyleSheet
doc = Document()
el = doc.create_element("div")
doc.append_child(el)
sheet = CSSStyleSheet()
sheet.replace_sync("div { color: red !important }")
doc.attach_style_sheet(sheet)
inline = el.style
inline.set_property("color", "blue")
print(el.get_computed_style().get_property_value("color"))

Conseils et meilleures pratiques

• Attachez les feuilles avant de lire les styles calculés — la résolution reflète les feuilles actuellement attachées
• Utilisez get_property_priority() pour vérifier !important lors du débogage de gagnants surprenants
• Gardez un CSSStyleSheet par feuille de style logique ; CSSRuleList préserve l’ordre des règles, ce qui compte en cas d’égalité de spécificité
• Pour les vérifications d’héritage, lisez d’abord la valeur calculée du parent, puis celle de l’enfant

Problèmes courants

FAQ

Comment analyser le texte CSS en objets?

CSSStyleSheet.replace_sync() pour des feuilles entières, ou parse_rule_text() pour une règle unique.

Que renvoie get_computed_style?

Un ComputedStyleDeclaration — lire les valeurs avec get_property_value().

Les styles en ligne l’emportent-ils toujours?

Ils l’emportent sur les règles d’auteur de n’importe quelle spécificité, mais perdent face aux règles d’auteur marquées !important.

API Reference Résumé

Voir aussi

• Aspose.HTML for Python — Enterprise Documentation