-webkit-min-device-pixel-ratio 给出 CSS 验证错误答案

【问题标题】：-webkit-min-device-pixel-ratio gives a CSS validation error-webkit-min-device-pixel-ratio 给出 CSS 验证错误
【发布时间】：2015-01-02 10:10:43
【问题描述】：

我有以下 CSS 定义：

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx), (min-resolution: 192dpi) {
    .iconAnnotationGuideH {
        background-position: -456px -24px;
        background-size: auto 96px;
    }
}

当我将它提交给http://jigsaw.w3.org/css-validator/ 进行验证时，它会给我一些错误。

Feature -webkit-min-device-pixel-ratio 不存在媒体 null ), （最小分辨率：2dppx），（最小分辨率：192dpi）{ .iconAnnotationGuideH { 背景位置：-456px -24px; 背景尺寸：自动 96px； } }"

我该怎么办？

【问题讨论】：

因为它特定于浏览器渲染引擎。如果您删除了“-webket-”，它将验证。您使用特定浏览器选择器的任何原因？
@Papa - min-resolution 是标准，而不是 min-device-pixel-ratio，所以即使没有前缀也不会验证 :) 我不相信没有 -moz 或-webkit 前缀。它仅用于旧版浏览器支持（和 Safari）

标签： css media-queries

【解决方案1】：

我该怎么办？

绝对没有！ -webkit-min-device-pixel-ratio 不是标准的，不会验证。 没关系！仅将验证器用作指南。

-webkit-min-device-pixel-ratio 只会被旧的基于 webkit 的浏览器使用。如果您不担心旧浏览器，则可以将其删除，尽管 Safari 似乎需要它。 See browser support for min-resolution here。注意：

2 - 支持使用非标准的最小/最大设备像素比率

所以用这个可以吗？

是的，适用于旧版浏览器和 Safari。

From the MDN:

-moz-device-pixel-ratio 可用于与 16 岁以上的 Firefox 兼容，-webkit-device-pixel-ratio 与基于 WebKit 的不支持 dppx 的浏览器。

注意：这个媒体功能也被 Webkit 实现为 -webkit 设备像素比率。 Gecko 实现的 min 和 max 前缀被命名为 min--moz-device-pixel-ratio 和 max--moz-device-pixel-ratio;但与实现的前缀相同 Webkit 被命名为 -webkit-min-device-pixel-ratio 和 -webkit-max-device-pixel-ratio.

给我讲个故事！

Here is the story from the w3c blog:

曾几何时，Webkit 决定对屏幕进行媒体查询需要解决方案。但不是使用已经标准化的分辨率媒体查询，他们发明了-webkit-device-pixel-ratio。这分辨率媒体查询可以采用“每英寸点数”和“每英寸点数” 厘米”，而-webkit-device-pixel-ratio 采用“每像素点数”。但这些基本上都是一样的，因为 1in = 96px = 2.54 厘米。（当然，并不是所有这些在 2006 年都得到了很好的理解，所以我们可以原谅 Webkit 编造了一些东西。）

他们从此过上了幸福的生活。

结局

【讨论】：