Resolve an element’s computed style¶

Run the CSS cascade over a parsed document and read the resolved value of any property with turbohtml.cssom.computed_style(), or inspect a stylesheet’s rules with StyleSheet.

Compute a property for an element¶

Parse the page, select the element, and call computed_style(). The result is a read-only ComputedStyle mapping every supported longhand to its resolved value. The cascade reads the <style> sheets and the inline style, so the !important rule below beats the element’s own inline color:

import turbohtml
from turbohtml.cssom import computed_style

doc = turbohtml.parse(
    "<html><head><style>p { color: gray } #intro { color: teal !important }</style></head>"
    "<body><p id=intro style='color: red'>Hi</p></body></html>"
)
style = computed_style(doc.select_one("#intro"))
print(style["color"])
print(style.get("font-size"))

teal
medium

Read inherited and shorthand values¶

A property that is not set on an element takes its parent’s computed value when it inherits, or its initial value otherwise. Shorthands such as margin are expanded to their longhands, so ask for margin-top rather than margin:

doc = turbohtml.parse(
    "<html><head><style>div { color: navy; margin: 1px 2px 3px 4px }</style></head>"
    "<body><div><span>x</span></div></body></html>"
)
span = computed_style(doc.select_one("span"))
print(span["color"])
div = computed_style(doc.select_one("div"))
print(div["margin-top"], div["margin-right"], div["margin-bottom"], div["margin-left"])

navy
1px 2px 3px 4px

Inspect a stylesheet¶

To read the rules of a stylesheet without cascading them, parse it with StyleSheet. Each StyleRule carries its selector_text and a StyleDeclaration; at-rules such as @media are skipped:

from turbohtml.cssom import StyleSheet

sheet = StyleSheet("a { color: blue } @media print { a { color: black } } .box { padding: 4px 8px }")
for rule in sheet.rules:
    print(rule.selector_text, "->", rule.style.text)

a -> color: blue
.box -> padding: 4px 8px

The value computed_style() returns is the computed value, not the used value that a rendering engine would produce; The cascade and computed style covers that boundary.