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.

Examples

Invalid

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

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

  ✖ Don't use unknown media feature names.
  
  > 1 │ @media screen and (unknown > 320px) {}
      │        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Unexpected unknown media feature name.
  
  ℹ 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 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Don't use unknown media feature names.
  
  > 1 │ @media only screen and (min-width: 320px) and (max-width: 480px) and (unknown: 150dpi) {}
      │        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Unexpected unknown media feature name.
  
  ℹ 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 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Don't use unknown media feature names.
  
  > 1 │ @media (not(unknown < 320px)) and (max-width > 640px) {}
      │        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Unexpected unknown media feature name.
  
  ℹ You should use media feature names defined in the CSS Specifications.

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

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

  ✖ Don't use unknown media feature names.
  
  > 1 │ @media (400px <= unknown <= 700px) {}
      │        ^^^^^^^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Unexpected unknown media feature name.
  
  ℹ 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) {}