Pixel ratio media queries aren't being autoprefixed

[borodean]

There are no option to write such things with no prefixes to be completed with Autoprefixer:

@media
  only screen and (-webkit-min-device-pixel-ratio: 1.3),
  only screen and (-o-min-device-pixel-ratio: 13/10),
  only screen and (min-resolution: 120dpi) {}

Source of the snippet: https://gist.github.com/marcedwards/3446599
More prefixes hell: http://css-tricks.com/snippets/css/retina-display-media-query/

[ai]

Unfortunately, I can fix it only after my vacantion.

Can you send pull request to Can I Use, what browser versions required prefix? Or just find good source?

[akashivskyy]

👍

[NathanBowers]

👍

The "Retina" media query prefix fallbacks are indeed yucky.

It wasn't until I started using AutoPrefixer that I realized CanIUse.com is far from complete :-)

[hparra]

I can confirm that CanIUse is incomplete here.

Bootstrap and Preboot have used similar code for a long time. See https://github.com/twbs/bootstrap/blob/master/less/mixins.less#L522

[rstacruz]

👍 would really love this!

[outaTiME]

👍

[ai]

Do somebody new resource, which describe wich media query is needed for which browsers? For exampe, what browsers already support min-resolution and what require -webkit-min-device-pixel-ratio?

I need this docs to make PR to Can I Use.

[hparra]

From https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries:

@media (-webkit-min-device-pixel-ratio: 2), /* Webkit-based browsers */
       (min--moz-device-pixel-ratio: 2),    /* Older Firefox browsers (prior to Firefox 16) */
       (min-resolution: 2dppx),             /* The standard way */
       (min-resolution: 192dpi)             /* dppx fallback */ 

See also:

• https://developer.mozilla.org/en-US/docs/Web/CSS/resolution
• http://www.browsersupport.net/CSS/@media_(-webkit-min-device-pixel-ratio)
• http://www.browsersupport.net/CSS/%40media_%28min--moz-device-pixel-ratio%29
• http://www.browsersupport.net/CSS/%40media_%28-o-min-device-pixel-ratio%29
• http://bjango.com/articles/min-device-pixel-ratio/

So assuming using (min-resolution: 2dppx) is the ideal way then:

Safari: Always use -webkit-min-device-pixel-ratio
Android: Always use -webkit-min-device-pixel-ratio
Chrome: Need -webkit-min-device-pixel-ratio in versions < 29
Firefox: Need min--moz-device-pixel-ratio in versions < 16
Opera: Need -o-min-device-pixel-ratio in versions < 12.10
IE: Need min-resolution in DPI in versions => 9

What a mess. I'm sure that's why they're not in CanIUse.

[ai]

@hparra really helpful data. I try to crate PR to caniuse and after this will start to work with Autoprefixer code.

Not in 2.2, but maybt in 2.3.

[timbru31]

Would be a great to have a nice clean auto-prefxing option for this 👍

[ai]

Yeap, task is planned on next 2.3 release. I think we can expect release in August.