Skip to main content

MatchMedia Stylesheets

FAST exposes a mechanism to attach stylesheets conditionally based on a MatchMedia query.

MatchMedia stylesheets#

MatchMediaStylesheetBehavior can be used to attach a stylesheet when a MediaQueryList matches and detach it when the query un-matches.

Example: Constructing the MatchMediaStyleSheetBehavior

import { MatchMediaStyleSheetBehavior } from "@microsoft/fast-foundation";
const mobileStylesheetBehavior = new MatchMediaStyleSheetBehavior(    Window.matchMedia('(max-width: 600px)'),    css`        body {            color: red;        }    `));
const styles = css`    /* ... */`.withBehaviors(    mobileStylesheetBehavior    )

MatchMediaStyleSheetBehavior can also be used to curry the MediaQueryList. This can be useful for defining commonly-used MatchMediaStyleSheetBehavior:

Example: Re-using a commonly used query

import { MatchMediaStyleSheetBehavior } from "@microsoft/fast-foundation";
const mobileStylesheetBehavior = MatchMediaStyleSheetBehavior.with(    Window.matchMedia('(max-width: 600px)'));const styles = css`    /* ... */`.withBehaviors(    mobileStylesheetBehavior(css`        body {            color: red;        }    `))

Forced-colors stylesheets#

FAST has a commitment to facilitating accessible web experiences and forced-colors support is a core tenant of that commitment. @microsoft/fast-components exports the forcedColorsStylesheetBehavior utility to provide a simple mechanism to apply forced-color stylesheets without bloating the component stylesheet in non-forced-color environments. This Behavior is built using MatchMedia Stylesheets.

Example: Forced-colors stylesheets

import { forcedColorsStylesheetBehavior } from "@microsoft/fast-foundation";import { SystemColors } from "@microsoft/fast-web-utilities";const styles = css`    /* ... */`.withBehaviors(    forcedColorsStylesheetBehavior(css`        :host {            background: ${SystemColors.Canvas};            color: ${SystemColors.CanvasText};        }        /* ... */    `))