One vendor prefix inside a different vendor prefix

Question

I've recently came across a project with css rules like this:

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

In my opinion this is kinda weird, as I know vendor prefixes are used to target different browsers. What about a situation like this then, when you use a different vendor prefix compared to the parent? Is it just a typo from a previous programmer? Or is it a perfectly valid rule that would apply in certain scenarios? If yes, what would the scenario be when this rule gets applied?

Answer 1

Looks like a careless mistake. There are no known implementations of Gecko that recognize -webkit-min-device-pixel-ratio — the prefix that Gecko uses is min--moz-device-pixel-ratio¹ instead, which has since been deprecated in favor of the standardized resolution. And there are no known implementations of WebKit or Blink that recognize :-moz-placeholder.

Either way, this snippet of CSS is meaningless to both engines. At best, in WebKit/Blink, you get an empty @media screen and (...) {} rule, and in Gecko, you theoretically get @media not all { ... }, which means "this rule will never be applied in any situation".

---

¹ _{Unlike the code in the question, this is not a typo.}