Class FeatureCheck<T_CustomCheckerSlug, T_CustomChecker>

Utility class that uses client-side JS to test for JS and CSS feature compaibility. Updates root element class names accordingly.

Example

This class is meant to be used client-side to assess local CSS & JS compatibility.

The simplest way to use this class is by importing:

import { FeatureCheck } from '@maddimathon/utility-sass';

and running one line:

// run the checks and update class names
new FeatureCheck().check();

The check can also be customized — this customization can mark some features as never available and add on custom feature checks:

const opts: Partial<FeatureCheck.CheckerOpts> = {

    // this skips the test and always disables this feature
    whereSelector: false,
};

const customChecks: FeatureCheck.CustomChecker[] = [
    {
        slug: 'backgroundGradient',
        test: () => FeatureCheck.supportsCSS(
            'background: linear-gradient( to right, red, blue )'
        ),
    },
    {
        slug: 'exampleFeature',
        test: false,
    },
];

// run the checks and update class names
new FeatureCheck( opts, customChecks ).check();

Since

0.1.0-pre.0

Type Parameters

T_CustomCheckerSlug extends string | never = string
Slugs used for custom feature checkers.
T_CustomChecker extends CustomChecker<T_CustomCheckerSlug> = CustomChecker<T_CustomCheckerSlug>
Shape(s) of the custom feature checkers.

Index

Constructors

constructor

new FeatureCheck<
    T_CustomCheckerSlug extends string = string,
    T_CustomChecker extends
        CustomChecker<T_CustomCheckerSlug> = CustomChecker<T_CustomCheckerSlug>,
>(
    opts?: Partial<CheckerOpts>,
    customChecks?: T_CustomChecker[],
    root?: Element,
): FeatureCheck<T_CustomCheckerSlug, T_CustomChecker>
Type Parameters
- T_CustomCheckerSlug extends string = string
- T_CustomChecker extends CustomChecker<T_CustomCheckerSlug> = CustomChecker<T_CustomCheckerSlug>
Parameters
- opts: Partial<CheckerOpts> = {}
  Partial options to override defaults.
- OptionalcustomChecks: T_CustomChecker[]
  Custom feature checks to include in the run.
- Optionalroot: Element
  The root element to add feature classes to.
  Default
  document.querySelector( ':root' )
Returns FeatureCheck<T_CustomCheckerSlug, T_CustomChecker>
- Defined in classes/FeatureCheck.ts:170

Properties

`Protected` `Readonly`customChecks

customChecks: T_CustomChecker[]

Completed copy of the built-in check options.

See FeatureCheck.constructor for details.

`Protected` `Readonly`opts

opts: CheckerOpts

Completed copy of the built-in check options.

See FeatureCheck.CheckerOpts for details.

`Protected` `Readonly`root

root: Element | null

The root element used for adding and removing feature-check classes.

See FeatureCheck.constructor for details.

Accessors

`Static`DEFAULT_OPTS

get DEFAULT_OPTS(): {
    aspectRatio: true;
    atProperty: true;
    backgroundFixed: true;
    displayContents: true;
    focusVisible: true;
    focusWithin: true;
    hasSelector: true;
    subgrid: true;
    whereSelector: true;
}
Default value for FeatureCheck.opts.

Returns {
    aspectRatio: true;
    atProperty: true;
    backgroundFixed: true;
    displayContents: true;
    focusVisible: true;
    focusWithin: true;
    hasSelector: true;
    subgrid: true;
    whereSelector: true;
}
- Defined in classes/FeatureCheck.ts:123

Methods

`Static`DEFAULT_CLASSLIST

DEFAULT_CLASSLIST<T_CustomChecker extends CustomChecker<string>>(
customChecks?: T_CustomChecker[],
): string
Experimental
A list of classes to add to the root element before this script loads and runs.
Type Parameters
- T_CustomChecker extends CustomChecker<string>
  Shape(s) of the custom feature checkers.
Parameters
- OptionalcustomChecks: T_CustomChecker[]
  Custom checks to include in the class list.
Returns string
- Defined in classes/FeatureCheck.ts:100

`Static`getClassName

getClassName<T_Slug extends string>(featureSlug: T_Slug, value: boolean): string
Experimental
Builds a feature-check class name that represents the result of a compatibility test.
Type Parameters
- T_Slug extends string
Parameters
- featureSlug: T_Slug
  Feature slug used to conduct the test.
- value: boolean
  The version of the class to get. If true, class indicates that the feature is enabled; otherwise, class indicates the feature is unavailable.
Returns string
- Defined in classes/FeatureCheck.ts:51

`Static`supportsCSS

supportsCSS(supports: string): boolean
Experimental
Checks for CSS rule support.
Parameters
- supports: string
  A valid test param for the CSS @supports() rule.
Returns boolean
- Defined in classes/FeatureCheck.ts:78

check

check(): void
Experimental
Runs all the checks and sets root element classes accordingly.

Returns void
- Defined in classes/FeatureCheck.ts:215

`Protected`aspectRatio

aspectRatio(): void

Experimental

Checks for aspect-ratio css property support.

Returns void

Source

    protected aspectRatio() {

        this.setFeature(
            'aspectRatio',
            FeatureCheck.supportsCSS( 'aspect-ratio: 1 / 1' ),
        );
    }

`Protected`atProperty

atProperty(): void

Experimental

Checks for css @property at-rule support.

Returns void

Source

    protected atProperty() {
        this.setFeature( 'atProperty', !!window.CSSPropertyRule );
    }

`Protected`backgroundFixed

backgroundFixed(): void

Experimental

Checks for background-attachment: fixed css rule support.

Returns void

Source

    protected backgroundFixed() {

        this.setFeature(
            'backgroundFixed',
            FeatureCheck.supportsCSS( 'background-attachment: fixed' ),
        );
    }

`Protected`customCheck

customCheck(check: T_CustomChecker): void
Experimental
Runs a custom check and updates the feature slug's class names on the FeatureCheck.root element.
Parameters
- check: T_CustomChecker
  A custom check to run.
Returns void
- Defined in classes/FeatureCheck.ts:244

`Protected`displayContents

displayContents(): void

Experimental

Checks for display: contents css rule support.

Returns void

Source

    protected displayContents() {

        this.setFeature(
            'displayContents',
            FeatureCheck.supportsCSS( 'display: contents' ),
        );
    }

`Protected`focusVisible

focusVisible(): void

Experimental

Checks for :focus-visible css selector support.

Returns void

Source

    protected focusVisible() {

        this.setFeature(
            'focusVisible',
            FeatureCheck.supportsCSS( 'selector( a:focus-visible )' ),
        );
    }

`Protected`focusWithin

focusWithin(): void

Experimental

Checks for :focus-within css selector support.

Returns void

Source

    protected focusWithin() {

        this.setFeature(
            'focusWithin',
            FeatureCheck.supportsCSS( 'selector( a:focus-within )' ),
        );
    }

`Protected`hasSelector

hasSelector(): void

Experimental

Checks for :has() css selector support.

Returns void

Source

    protected hasSelector() {

        this.setFeature(
            'hasSelector',
            FeatureCheck.supportsCSS( 'selector( :has( a ) )' ),
        );
    }

`Protected`setFeature

setFeature(
    featureSlug: T_CustomCheckerSlug | Checker | "js",
    value: boolean,
    ignorePrefix?: boolean,
): void
Experimental
Set a feature slug's class names on the FeatureCheck.root element.
Parameters
- featureSlug: T_CustomCheckerSlug | Checker | "js"
  Feature result to set.
- value: boolean
  If true, the feature is marked as available. Otherwise it is marked unavailable.
- InternalignorePrefix: boolean = false
  Whether to exclude the 'js__' prefix. This is only used to set the 'js' and 'no-js' classes.
Returns void
- Defined in classes/FeatureCheck.ts:264

`Protected`subgrid

subgrid(): void

Experimental

Checks for grid-template-columns: subgrid css rule support.

Returns void

Source

    protected subgrid() {

        this.setFeature(
            'subgrid',
            FeatureCheck.supportsCSS( 'grid-template-columns: subgrid' ),
        );
    }

`Protected`whereSelector

whereSelector(): void

Experimental

Checks for :where() css selector support.

Returns void

Source

    protected whereSelector() {

        this.setFeature(
            'whereSelector',
            FeatureCheck.supportsCSS( 'selector( :where( a ) )' ),
        );
    }

Class FeatureCheck<T_CustomCheckerSlug, T_CustomChecker>

Example

Since

Type Parameters

Index

Constructors

Properties

Accessors

Methods

Constructors

constructor

Type Parameters

Parameters

Default

Returns FeatureCheck<T_CustomCheckerSlug, T_CustomChecker>

Properties

Protected ReadonlycustomChecks

Protected Readonlyopts

Protected Readonlyroot

Accessors

StaticDEFAULT_OPTS

Returns { aspectRatio: true; atProperty: true; backgroundFixed: true; displayContents: true; focusVisible: true; focusWithin: true; hasSelector: true; subgrid: true; whereSelector: true;}

Methods

StaticDEFAULT_CLASSLIST

Type Parameters

Parameters

Returns string

StaticgetClassName

Type Parameters

Parameters

Returns string

StaticsupportsCSS

Parameters

Returns boolean

check

Returns void

ProtectedaspectRatio

Returns void

Source

ProtectedatProperty

Returns void

Source

ProtectedbackgroundFixed

Returns void

Source

ProtectedcustomCheck

Parameters

Returns void

ProtecteddisplayContents

Returns void

Source

ProtectedfocusVisible

Returns void

Source

ProtectedfocusWithin

Returns void

Source

ProtectedhasSelector

Returns void

Source

ProtectedsetFeature

Parameters

Returns void

Protectedsubgrid

Returns void

Source

ProtectedwhereSelector

Returns void

Source

Settings

On This Page

`Protected` `Readonly`customChecks

`Protected` `Readonly`opts

`Protected` `Readonly`root

`Static`DEFAULT_OPTS

Returns {
aspectRatio: true;
atProperty: true;
backgroundFixed: true;
displayContents: true;
focusVisible: true;
focusWithin: true;
hasSelector: true;
subgrid: true;
whereSelector: true;
}

`Static`DEFAULT_CLASSLIST

`Static`getClassName

`Static`supportsCSS

`Protected`aspectRatio

`Protected`atProperty

`Protected`backgroundFixed

`Protected`customCheck

`Protected`displayContents

`Protected`focusVisible

`Protected`focusWithin

`Protected`hasSelector

`Protected`setFeature

`Protected`subgrid

`Protected`whereSelector