noUnknownMediaFeatureName

このコンテンツはまだ日本語訳がありません。

Diagnostic Category: lint/correctness/noUnknownMediaFeatureName

Since: v1.8.0

Sources:

Same as: stylelint/media-feature-name-no-unknown

Description

Disallow unknown media feature names.

This rule considers media feature names defined in the CSS Specifications, up to and including Editor’s Drafts, to be known. This rule also checks vendor-prefixed media feature names.

Data sources of known CSS media feature are:

MDN reference on CSS media feature
W3C reference on Media Queries Level 3
W3C reference on Media Queries Level 4
W3C reference on Media Queries Level 5

Examples

Invalid

@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.

@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.

@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.

@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

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

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

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

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

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

How to configure

{
  "linter": {
    "rules": {
      "correctness": {
        "noUnknownMediaFeatureName": "error"
      }
    }
  }
}