noUnknownMediaFeatureName (CSS)

Language CSS

Summary

Rule available since: v1.8.0
Diagnostic Category: lint/correctness/noUnknownMediaFeatureName
This rule is recommended, meaning it is enabled by default.
This rule doesn’t have a fix.
The default severity of this rule is error.
Sources:
- Same as media-feature-name-no-unknown

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "correctness": {
5
        "noUnknownMediaFeatureName": "error"
6
      }
7
    }
8
  }
9
}

Description

Disallow unrecognized feature names in media queries.

Media features describe conditions such as viewport width, display resolution, or user preferences. The rule recognizes names from CSS specifications, including editor drafts, and validates vendor-prefixed names.

See MDN’s media-query reference and the W3C specifications for Media Queries Level 4 and Level 5.

SCSS limitations

Media feature names containing SCSS interpolation are ignored because the emitted name cannot be determined statically.

Examples

Invalid

1
@media screen and (unknown > 320px) {}

code-block.css:1:8 lint/correctness/noUnknownMediaFeatureName ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Unexpected unknown media feature name.
  
  > 1 │ @media screen and (unknown > 320px) {}
      │        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Browsers treat a media query that contains an unknown feature as not matching. Another query in a comma-separated list can still match.
  
  ℹ You should use media feature names defined in the CSS Specifications.

1
@media only screen and (min-width: 320px) and (max-width: 480px) and (unknown: 150dpi) {}

code-block.css:1:8 lint/correctness/noUnknownMediaFeatureName ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Unexpected unknown media feature name.
  
  > 1 │ @media only screen and (min-width: 320px) and (max-width: 480px) and (unknown: 150dpi) {}
      │        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Browsers treat a media query that contains an unknown feature as not matching. Another query in a comma-separated list can still match.
  
  ℹ You should use media feature names defined in the CSS Specifications.

1
@media (not(unknown < 320px)) and (max-width > 640px) {}

code-block.css:1:8 lint/correctness/noUnknownMediaFeatureName ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Unexpected unknown media feature name.
  
  > 1 │ @media (not(unknown < 320px)) and (max-width > 640px) {}
      │        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Browsers treat a media query that contains an unknown feature as not matching. Another query in a comma-separated list can still match.
  
  ℹ You should use media feature names defined in the CSS Specifications.

1
@media (400px <= unknown <= 700px) {}

code-block.css:1:8 lint/correctness/noUnknownMediaFeatureName ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Unexpected unknown media feature name.
  
  > 1 │ @media (400px <= unknown <= 700px) {}
      │        ^^^^^^^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Browsers treat a media query that contains an unknown feature as not matching. Another query in a comma-separated list can still match.
  
  ℹ You should use media feature names defined in the CSS Specifications.

Valid

1
@media screen and (width > 320px) {}

1
@media only screen and (min-width: 320px) and (max-width: 480px) and (resolution: 150dpi) {}

1
@media (not(min-width < 320px)) and (max-width > 640px) {}

1
@media (400px <= width <= 700px) {}

1
@media screen and (-webkit-width > 320px) {}

1
@custom-media --mobile (max-width: 768px);
2
@media screen and (--mobile) {}