CSS media queries for pixel density: -moz-min-device-pixel-ratio vs. min--moz-device-pixel-ratio

Question

When using CSS media queries for device pixel density, I have seen both -moz-min-device-pixel-ratio and min--moz-device-pixel-ratio.

For example:

@media 
  only screen and (-moz-min-device-pixel-ratio: 1.5) {
  /* styles go here */
}

vs.

@media 
  only screen and (min--moz-device-pixel-ratio: 1.5) {
  /* styles go here*/
}

Which is correct?

Some tutorials/blogs that use the former:

• http://menacingcloud.com/?c=highPixelDensityDisplays
• http://css3.bradshawenterprises.com/blog/retina-image-replacement-for-new-ipad/

Some tutorials/blogs that use the later, including mozilla.org:

• http://www.slideshare.net/zomigi/css3-using-media-queries-to-improve-the-web-site-experience
• https://developer.mozilla.org/en/CSS/Media_queries/

Answer 1

The second one is correct.

This is from http://www.quirksmode.org/blog/archives/2012/07/vendor_prefixes.html

-webkit-min-device-pixel-ratio: 1.5
min--moz-device-pixel-ratio: 1.5
-o-min-device-pixel-ratio: 3/2

Answer 2

I'm the author of the menacing cloud article referenced above. The device-pixel-ratio listed in my article was incorrect since it was written quite a while ago (iPhone4 launch).

It has been updated to reference the correct Mozilla syntax.

I have no idea why Mozilla chose to go with min--moz-device-pixel-ratio, but that is the official form chosen it seems.