noUnknownMediaFeatureName

诊断类别：lint/correctness/noUnknownMediaFeatureName

¥Diagnostic Category: lint/correctness/noUnknownMediaFeatureName

自从：v1.8.0

¥Since: v1.8.0

来源：

¥Sources:

与以下相同：stylelint/media-feature-name-no-unknown

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

禁止未知的媒体功能名称。

¥Disallow unknown media feature names.

此规则认为 CSS 规范中定义的媒体功能名称（包括编辑草稿）是已知的。此规则还检查供应商前缀的媒体功能名称。

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

已知 CSS 媒体功能的数据源是：

¥Data sources of known CSS media feature are:

CSS 媒体功能上的 MDN 参考

¥MDN reference on CSS media feature
媒体查询级别 3 上的 W3C 参考

¥W3C reference on Media Queries Level 3
媒体查询级别 4 上的 W3C 参考

¥W3C reference on Media Queries Level 4
媒体查询级别 5 上的 W3C 参考

¥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) {}

noUnknownMediaFeatureName

示例

无效

有效

相关链接