Meziantou.Framework

Typed values

edit

The CSS Typed OM exposes the values of the properties as objects instead of strings, in the Meziantou.Framework.WebPlatform.Css.TypedOm namespace. The factory functions of the CSS namespace of the browsers (CSS.px(), CSS.em()...) are the static methods of the Meziantou.Framework.WebPlatform.Css.Om.Css class; the example below imports it as CssFactory:

using var context = new BrowsingContext();
var document = context.Navigate("https://example.com/", _ => "<div style='font-size: 16px; height: 2em'></div>");
var element = (HtmlElement)document.QuerySelector("div")!;

// Set a value as an object: the style attribute is updated
element.AttributeStyleMap.Set("width", CssFactory.Px(10).Add(CssFactory.Em(2)));
Assert.Equal("font-size: 16px; height: 2em; width: calc(2em + 10px);", element.GetAttribute("style"));

// Read the computed values as numbers and units
var height = Assert.IsType<CssUnitValue>(element.ComputedStyleMap().Get("height"));
Assert.Equal((32, "px"), (height.Value, height.Unit));

// Parse and convert values
var length = CssNumericValue.Parse("calc(1in + 4px)").To("px");
Assert.Equal(100, length.Value);
MemberValues
Element.AttributeStyleMapThe declarations of the style attribute, read and write: setting a value updates the attribute
CssStyleRule.StyleMapThe declarations of a style rule, read and write
Element.ComputedStyleMap()The computed values of the element, read only (empty when the element is not rendered)
CssStyleValue.Parse(property, text), CssNumericValue.Parse(text)Values parsed from CSS text

Values