Class CssMediaContext
The environment media queries are evaluated against: the media type, the viewport and the user's preferences.
public sealed record CssMediaContext : IEquatable<CssMediaContext>
- Inheritance
-
CssMediaContext
- Implements
- Inherited Members
Examples
// Media Queries 4: types, features, min-/max- and range syntax. Unknown features count as false.
var phone = new CssMediaContext { Width = 390, Height = 844, Resolution = 3, PrefersColorScheme = "dark" };
bool narrow = CssMediaQueryList.Parse("screen and (width < 600px)").Matches(phone);
bool dark = CssMediaQueryList.Parse("(prefers-color-scheme: dark) and (min-resolution: 2dppx)").Matches(phone);
// Features the context does not know go to a hook.
CssMediaContext touch = phone with { Feature = (name, value) => name == "pointer" ? value?[0].ToString() == "coarse" : null };
bool coarse = CssMediaQueryList.Parse("(pointer: coarse)").Matches(touch);
Properties
Color
Gets the bits per color channel for the color feature; 0 for a monochrome device. Defaults to 8.
public int Color { get; init; }
Property Value
Default
Gets the default context: a 1024 × 768 screen at 1 dppx, light color scheme, 8 bits per color channel.
public static CssMediaContext Default { get; }
Property Value
Feature
Gets a hook for media features the context does not know, such as hover or pointer: it receives the feature
name in lowercase and the value (or null in a boolean context such as (hover)), and returns
whether it matches, or null when unknown (which evaluates as false).
public Func<string, IReadOnlyList<CssComponentValue>?, bool?>? Feature { get; init; }
Property Value
FontSize
Gets the size of em and rem in media queries, in CSS pixels: the initial font size. Defaults to 16.
public double FontSize { get; init; }
Property Value
Height
Gets the viewport height in CSS pixels. Defaults to 768.
public double Height { get; init; }
Property Value
MediaType
Gets the media type, such as screen (the default) or print.
public string MediaType { get; init; }
Property Value
PrefersColorScheme
Gets the prefers-color-scheme value: light (the default) or dark.
public string PrefersColorScheme { get; init; }
Property Value
PrefersReducedMotion
Gets whether the user prefers reduced motion (prefers-reduced-motion: reduce). Defaults to false.
public bool PrefersReducedMotion { get; init; }
Property Value
Resolution
Gets the resolution in dots per CSS pixel (dppx). Defaults to 1.
public double Resolution { get; init; }
Property Value
Width
Gets the viewport width in CSS pixels. Defaults to 1024.
public double Width { get; init; }