media-feature-name-no-unknown

Disallow unknown media feature names.

@media (min-width: 700px) {}
/**     ↑
 * This media feature name */

Use this rule to avoid mistyped media feature names, e.g. min-widht. Browsers evaluate the query to unknown, so its block never applies.

This rule considers media feature names defined in the CSS Specifications, up to and including Editor's Drafts, to be known.

This rule ignores vendor-prefixed media feature names.

This rule supports 1 message argument: the unknown media feature name.

Options

{
  "media-feature-name-no-unknown": true
}

The following patterns are considered problems:

@media screen and (unknown) {}

@media screen and (unknown: 10px) {}

@media screen and (unknown > 10px) {}

The following patterns are not considered problems:

@media all and (monochrome) {}

@media (min-width: 700px) {}

@media (MIN-WIDTH: 700px) {}

@media (min-width: 700px) and (orientation: landscape) {}

@media (-webkit-min-device-pixel-ratio: 2) {}

{ "ignoreMediaFeatureNames": ["array", "of", "media-features", "/regex/"] }

Given:

{
  "media-feature-name-no-unknown": [
    true,
    { "ignoreMediaFeatureNames": ["/^my-/", "custom"] }
  ]
}

The following patterns are not considered problems:

@media screen and (my-media-feature-name) {}

@media screen and (custom: 10px) {}

@media screen and (100px < custom < 700px) {}

@media (min-width: 700px) and (custom: 10px) {}