一个供应商前缀在不同供应商前缀内

Question

我最近发现一个项目有这样的 css 规则：

@media screen and (-webkit-min-device-pixel-ratio: 0) {
    #header .searchform input:-moz-placeholder, #header .searchform textarea:-moz-placeholder {
        line-height: 140%;
    }
}

在我看来这有点奇怪，因为我知道供应商前缀用于针对不同的浏览器。那么，当您使用与父级不同的供应商前缀时，这样的情况会怎样呢？这只是以前程序员的错字吗？还是适用于某些情况的完全有效的规则？如果是，应用此规则时会出现什么情况？

Answer 1

看起来是一个粗心的错误。没有已知的 Gecko 实现可以识别 -webkit-min-device-pixel-ratio——Gecko 使用的前缀是 min--moz-device-pixel-ratio¹，此后已被弃用，取而代之的是标准化 resolution。并且没有已知的 WebKit 或 Blink 实现可以识别 :-moz-placeholder.

无论如何，CSS 的这段代码对两个引擎都没有意义。充其量，在 WebKit/Blink 中，您得到一个空的 @media screen and (...) {} 规则，而在 Gecko 中，you theoretically get @media not all { ... }，这意味着 "this rule will never be applied in any situation".

¹ _{与问题中的代码不同，这不是错字。}

Answer 2

-webkit-min-device-pixel-ratio:0 是针对 Safari 3+ 和 Chrome 1+ 的浏览器 hack。

input:-moz-placeholder 是一个伪class，在 Firefox 19 中已被弃用，取而代之的是 ::-moz-placeholder 伪元素，并且仅针对 Firefox 浏览器。

根据您的代码，您的代码要求以 Safari 和 Chrome 为目标，然后运行仅针对 FireFox 的代码；它最终是在任何情况下都不会运行并且很可能是错误的代码。

可以在此处阅读有关 Safari 3+ / Chrome 1+ hack 的其他信息： https://css-tricks.com/snippets/css/browser-specific-hacks/

有关 -moz-placeholder 的更多信息可在此处找到： https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-placeholder

有关样式占位符文本的更多信息，请参见此处： https://css-tricks.com/snippets/css/style-placeholder-text/

一个供应商前缀在不同供应商前缀内

One vendor prefix inside a different vendor prefix

css

vendor-prefix

media-queries