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

Question

我有以下 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 doesn't exist for media null ), (min-resolution: 2dppx), (min-resolution: 192dpi) { .iconAnnotationGuideH { background-position: -456px -24px; background-size: auto 96px; } }"

我该怎么办？

Answer 1

我该怎么办？

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

-webkit-min-device-pixel-ratio 将仅由旧的、基于 webkit 的浏览器使用。如果您不担心旧浏览器，那么您可以删除它，尽管 Safari 似乎需要它。 See browser support for min-resolution here .注意:

2 - Supported using the non-standard min/max-device-pixel-ratio

---

所以可以用这个吗？

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

From the MDN:

-moz-device-pixel-ratio may be used for compatibility with Firefox older than 16 and -webkit-device-pixel-ratio with WebKit-based browsers that do not support dppx.

Note: This media feature is also implemented by Webkit as -webkit-device-pixel-ratio. The min and max prefixes as implemented by Gecko are named min--moz-device-pixel-ratio and max--moz-device-pixel-ratio; but the same prefixes as implemented by Webkit are named -webkit-min-device-pixel-ratio and -webkit-max-device-pixel-ratio.

---

给我讲个故事!

Here is the story from the w3c blog:

Once upon a time, Webkit decided a media query for the screen resolution was needed. But rather than using the already-standardized resolution media query, they invented -webkit-device-pixel-ratio. The resolution media query can take “dots per inch” and “dots per centimeter”, while -webkit-device-pixel-ratio takes “dots per px”. But these are all fundamentally the same thing because 1in = 96px = 2.54cm. (Granted, not all of this was well-understood in 2006, so we can forgive Webkit for making something up.)

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

结束