src/content/docs/linter/rules/no-unknown-media-feature-name.mdx
import { Tabs, TabItem } from '@astrojs/starlight/components';
<Tabs> <TabItem label="CSS" icon="seti:css"> ## Summary - Rule available since: `v1.8.0` - Diagnostic Category: [`lint/correctness/noUnknownMediaFeatureName`](/reference/diagnostics#diagnostic-category) - 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**](/reference/diagnostics#error). - Sources: - Same as [`media-feature-name-no-unknown`](https://github.com/stylelint/stylelint/blob/main/lib/rules/media-feature-name-no-unknown/README.md){
"linter": {
"rules": {
"correctness": {
"noUnknownMediaFeatureName": "error"
}
}
}
}
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:
@media screen and (unknown > 320px) {}
@media only screen and (min-width: 320px) and (max-width: 480px) and (unknown: 150dpi) {}
@media (not(unknown < 320px)) and (max-width > 640px) {}
@media (400px <= unknown <= 700px) {}
@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) {}