Skip to main content
Version: 1.x

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};
}
/* ... */
`)
)