Class CssComputedStyle
An element's computed style, as far as CSS defines it generically: CSS-wide keywords resolved, inheritance applied, custom
properties and var() substituted. Values stay component values; the consumer parses each property by its type (and
resolves relative units, percentages and currentcolor).
public sealed class CssComputedStyle : IEnumerable<KeyValuePair<string, IReadOnlyList<CssComponentValue>>>, IEnumerable
- Inheritance
-
CssComputedStyle
- Implements
- Inherited Members
Examples
// The registry says which properties inherit and their initial values; consumers add their own.
CssPropertyRegistry registry = CssPropertyRegistry.CreateDefault();
registry.Register(new CssPropertyDefinition("fill", Inherited: true, InitialValue: "black")
{
Validate = value => CssColor.TryParse(value, out _),
});
registry.RegisterShorthand(new CssShorthandDefinition("marker", ["marker-start", "marker-end"],
value => [new CssDeclaration("marker-start", value), new CssDeclaration("marker-end", value)]));
CssStyleSheet userAgent = CssStyleSheet.Parse("rect { fill: gray }");
CssStyleSheet author = CssStyleSheet.Parse("""
svg { --accent: teal; font: 12px sans-serif }
.layer { fill: var(--accent) }
#r { fill: inherit; opacity: 0.5 }
""");
var cascade = new CssCascade(
[(userAgent, CssOrigin.UserAgent), (author, CssOrigin.Author)],
new CssCascadeOptions { Registry = registry, Media = new CssMediaContext { Width = 800 } });
// Cascade each element (presentation attributes as hints, the style attribute as inline style), then compute it
// from its parent's computed style.
CssComputedStyle rootStyle = cascade.Compute(cascade.Cascade(root), null);
CssComputedStyle groupStyle = cascade.Compute(cascade.Cascade(group), rootStyle);
CssCascadedStyle cascaded = cascade.Cascade(rect,
presentationHints: [CssDeclaration.Create("fill", "red")],
inlineStyle: CssDeclaration.ParseList("stroke: blue"));
CssComputedStyle style = cascade.Compute(cascaded, groupStyle);
cascaded.TryGetDeclaration("fill", out CssDeclaration? winner, out CssOrigin origin); // fill: inherit, Author
string? fill = style.GetValueText("fill"); // "teal": inherited, var() substituted
string? fontSize = style.GetValueText("font-size"); // "12px": from the font shorthand, inherited
if (style.TryGetValue("opacity", out IReadOnlyList<CssComponentValue>? opacity))
{
// The consumer parses each property by its type.
}
Remarks
A computed style stores only what its element sets and shares the rest with its parent: inherited properties are looked up through the parent chain, and the others fall back to their initial value from the registry. Enumerating a computed style lists the properties with a value that the element or an ancestor set (not initial values).
Properties
Parent
Gets the parent element's computed style, or null for the root.
public CssComputedStyle? Parent { get; }
Property Value
Methods
Compute(CssCascadedStyle, CssComputedStyle?, CssPropertyRegistry)
Computes an element's style: resolves inherit, initial, unset, revert and
revert-layer (treated as revert), applies inheritance, and substitutes var() with fallbacks and
cycle detection. A property whose substitution fails is invalid at computed-value time and behaves as unset.
public static CssComputedStyle Compute(CssCascadedStyle cascaded, CssComputedStyle? parent, CssPropertyRegistry registry)
Parameters
cascadedCssCascadedStyleThe element's cascaded style.
parentCssComputedStyleThe parent element's computed style, or null for the root.
registryCssPropertyRegistryThe property registry (inheritance, initial values, shorthands, validation).
Returns
- CssComputedStyle
The computed style.
CreateInherited(CssComputedStyle?, CssPropertyRegistry)
Creates the computed style of an element no declaration applies to.
public static CssComputedStyle CreateInherited(CssComputedStyle? parent, CssPropertyRegistry registry)
Parameters
parentCssComputedStyleThe parent's computed style, or null for the root.
registryCssPropertyRegistryThe property registry.
Returns
- CssComputedStyle
The computed style: inherited and initial values only.
GetEnumerator()
Enumerates the properties with a value that this element or an ancestor set.
public IEnumerator<KeyValuePair<string, IReadOnlyList<CssComponentValue>>> GetEnumerator()
Returns
- IEnumerator<KeyValuePair<string, IReadOnlyList<CssComponentValue>>>
The properties and their values.
GetValueText(string)
Gets a property's computed value as CSS text, or null when it has none.
public string? GetValueText(string name)
Parameters
namestringThe property name.
Returns
- string
The value text.
IsSetOnElement(string)
Gets whether the element itself sets the property (rather than inheriting it or taking its initial value).
public bool IsSetOnElement(string name)
Parameters
namestringThe property name.
Returns
- bool
True when the element's own declarations set it.
TryGetValue(string, out IReadOnlyList<CssComponentValue>?)
Gets a property's computed value.
public bool TryGetValue(string name, out IReadOnlyList<CssComponentValue>? value)
Parameters
namestringThe property name (lowercase, or a custom property name as written).
valueIReadOnlyList<CssComponentValue>The value as component values.
Returns
- bool
True when the property has a value: set, inherited or initial.