noUnknownMediaFeatureName (since v1.8.0)
Diagnostic Category: lint/nursery/noUnknownMediaFeatureName
Sources:
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
Section titled ExamplesInvalid
Section titled Invalid@media screen and (unknown > 320px) {}code-block.css:1:8 lint/nursery/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/nursery/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/nursery/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/nursery/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) {}