Table of Contents

Class CssMediaContext

Namespace
Egami.Css
Assembly
Egami.Css.dll

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

int

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

CssMediaContext

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

Func<string, IReadOnlyList<CssComponentValue>, bool?>

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

double

Height

Gets the viewport height in CSS pixels. Defaults to 768.

public double Height { get; init; }

Property Value

double

MediaType

Gets the media type, such as screen (the default) or print.

public string MediaType { get; init; }

Property Value

string

PrefersColorScheme

Gets the prefers-color-scheme value: light (the default) or dark.

public string PrefersColorScheme { get; init; }

Property Value

string

PrefersReducedMotion

Gets whether the user prefers reduced motion (prefers-reduced-motion: reduce). Defaults to false.

public bool PrefersReducedMotion { get; init; }

Property Value

bool

Resolution

Gets the resolution in dots per CSS pixel (dppx). Defaults to 1.

public double Resolution { get; init; }

Property Value

double

Width

Gets the viewport width in CSS pixels. Defaults to 1024.

public double Width { get; init; }

Property Value

double