Skip to main content

media-feature-name-value-no-unknown

Disallow unknown values for media features.

@media (color: red) {}
/**     ↑      ↑
 * feature and value pairs like these */

This rule considers values for media features defined within the CSS specifications to be known.

warning

This rule is only appropriate for CSS. You should not turn it on for CSS-like languages, such as SCSS or Less.

note

When using this rule, we recommend turning off these overlapping rules or configuring them to ignore the overlaps:

If duplicate problems are flagged, you can turn off the corresponding rule.

This rule supports 2 message arguments: the media feature name and the unknown value.

Options​

true​

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

The following patterns are considered problems:

@media (color: red) { top: 1px; }
@media (width: 10) { top: 1px; }
@media (width: auto) { top: 1px; }

The following patterns are not considered problems:

@media (color: 8) { top: 1px; }
@media (width: 10px) { top: 1px; }

Optional secondary options​

ignoreMediaFeatureNameValues​

{
  "ignoreMediaFeatureNameValues": {
    "media-feature-name": ["array", "of", "values", "/regex/"]
  }
}

Ignore the specified media feature name and value pairs. You can specify a regex for a media feature name, such as { "/^color/": [] }.

Given:

{
  "media-feature-name-value-no-unknown": [
    true,
    {
      "ignoreMediaFeatureNameValues": {
        "/^color/": ["--foo", "/^--bar/"]
      }
    }
  ]
}

The following patterns are not considered problems:

@media (color: --foo) {}
@media (color-gamut: --bar-baz) {}