ContextQMD
Back to Biomejs

noDeprecatedMediaType

src/content/docs/linter/rules/no-deprecated-media-type.mdx

latest5.8 KB
Original Source

import { Tabs, TabItem } from '@astrojs/starlight/components';

<Tabs> <TabItem label="CSS" icon="seti:css"> :::caution This rule is part of the [nursery](/linter/#nursery) group. This means that it is experimental and the behavior can change at any time. ::: ## Summary - Rule available since: `v2.3.14` - Diagnostic Category: [`lint/nursery/noDeprecatedMediaType`](/reference/diagnostics#diagnostic-category) - This rule doesn't have a fix. - The default severity of this rule is [**information**](/reference/diagnostics#information). - Sources: - Same as [`media-type-no-deprecated`](https://github.com/stylelint/stylelint/blob/main/lib/rules/media-type-no-deprecated/README.md)

How to configure

json
{
	"linter": {
		"rules": {
			"nursery": {
				"noDeprecatedMediaType": "error"
			}
		}
	}
}

Description

Disallow deprecated media types.

Several media types defined in earlier specifications have been deprecated and should no longer be used. The deprecated media types are still recognized, but they match nothing.

For details on media types, see the Media Queries Level 5 specification.

Examples

Invalid

css
@media tv {}
<pre class="language-text"><code class="language-text">code-block.css:1:8 <a href="https://biomejs.dev/linter/rules/no-deprecated-media-type">lint/nursery/noDeprecatedMediaType</a> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">Unexpected deprecated media type: </span><span style="color: lightgreen;"><strong>tv</strong></span> <strong><span style="color: Tomato;">&gt;</span></strong> <strong>1 │ </strong>@media tv &#123;&#125; <strong> │ </strong> <strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong> <strong>2 │ </strong> <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">Deprecated media types are recognized but match nothing; prefer using media features or recommended media types.</span> <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit </span><span style="color: lightgreen;"><a href="https://biomejs.dev/linter/#nursery">https://biomejs.dev/linter/#nursery</a></span><span style="color: lightgreen;"> for more information.</span> <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">Recommended media types include:</span> - all - print - screen </code></pre>
css
@media handheld and (min-width: 480px) {}
<pre class="language-text"><code class="language-text">code-block.css:1:8 <a href="https://biomejs.dev/linter/rules/no-deprecated-media-type">lint/nursery/noDeprecatedMediaType</a> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">Unexpected deprecated media type: </span><span style="color: lightgreen;"><strong>handheld</strong></span> <strong><span style="color: Tomato;">&gt;</span></strong> <strong>1 │ </strong>@media handheld and (min-width: 480px) &#123;&#125; <strong> │ </strong> <strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong><strong><span style="color: Tomato;">^</span></strong> <strong>2 │ </strong> <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">Deprecated media types are recognized but match nothing; prefer using media features or recommended media types.</span> <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit </span><span style="color: lightgreen;"><a href="https://biomejs.dev/linter/#nursery">https://biomejs.dev/linter/#nursery</a></span><span style="color: lightgreen;"> for more information.</span> <strong><span style="color: lightgreen;">ℹ</span></strong> <span style="color: lightgreen;">Recommended media types include:</span> - all - print - screen </code></pre>

Valid

css
@media screen {}
css
@media print and (min-resolution: 300dpi) {}

Options

allow

Media types to allow (case-insensitive).

json
{
	"linter": {
		"rules": {
			"nursery": {
				"noDeprecatedMediaType": {
					"options": {
						"allow": [
							"tv",
							"speech"
						]
					}
				}
			}
		}
	}
}

Valid

css
@media tv {}
@media speech {}
</TabItem> </Tabs>