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