noUnknownMediaFeatureName
Summary
Section titled Summary- Rule available since:
v1.8.0 - Diagnostic Category:
lint/correctness/noUnknownMediaFeatureName - This rule is recommended, which means is enabled by default.
- This rule doesn’t have a fix.
- The default severity of this rule is error.
- Sources:
Description
Section titled DescriptionDisallow 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
Section titled ExamplesInvalid
Section titled 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
Section titled 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
Section titled How to configure{ "linter": { "rules": { "correctness": { "noUnknownMediaFeatureName": "error" } } }}