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]

:+1:

[NathanBowers]

:+1:

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]

:+1: would really love this!

[outaTiME]

:+1:

[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 :+1:

[ai]

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

[rstacruz]

Thank you so much, @ai! You're doing the frontend development world a great service.

[Grawl]

Still waiting for this cool feature. Or at least for Can I Use article about this.

[ai]

@Grawl maybe you want to make PR to Can I Use? You need just edit one JSON file. It will very help to implement this feature to Autoprefixer.

[Grawl]

@ai we need a proofs from browser developers I think.

Let's try to collect them.

• Gecko
  • <16 will use min/max``--moz-device-pixel-ratio and a number like 2 for @2x screens
  • >16 will use min/max``resolution and dppx
• Presto
  • Presto<2.12/Opera<12.17 will use -o-device-pixel-ratio and a number
• Blink
  • Opera>15
  • I cannot find any info about blink engine to proof that it supports dppx or unprefixed min/max``-``device-pixel-ratio but think it does.
• Webkit
  • Same story. Where is the Webkit actual css support status page? All that I can find is an article on Safari Developer Library that says about -webkit-``min/max``-``device-pixel-ratio support in Safari>1.
• Trident (IE)
  • Same story.

Gecko, Presto, Blink, Webkit, Trident. Firefox, Opera, Safari/Chrome/Opera/…, IE. It's all?

So we can test it manually (and we need to) with bjango.com article and a gist on a bottom of that page but also we need to have a proofs so other developers can trust us and browser developers.

[tiye]

It's nice and I'm looking forward.

[mietek]

:+1:

[pepelsbey]

Do want :+1:

[ai]

If sombody want this feature you can help :). We need PR to Can I Use about this feature. It will really help and feature will come to Autoprefixer faster.

[mahnunchik]

+1

[Grawl]

So we need a proofs or just tests?

[ai]

We need Can I Use page. Or data, that I can used in Can I Use PR. 10 окт. 2014 г. 19:55 пользователь "Даниил Пронин" notifications@github.com написал:

So we need a proofs or just tests?

— Reply to this email directly or view it on GitHub https://github.com/postcss/autoprefixer/issues/122#issuecomment-58675673 .

[Grawl]

I can write anything in PR to CIU, but will it be merged?

[ai]

Yeap, CIU author is very friendly. 10 окт. 2014 г. 20:03 пользователь "Даниил Пронин" notifications@github.com написал:

I can write anything in PR to CIU, but will it be merged?

— Reply to this email directly or view it on GitHub https://github.com/postcss/autoprefixer/issues/122#issuecomment-58676669 .

[Grawl]

Okay, I will try to PR something from existing information tomorrow.

[Grawl]

Created PR to CIU with a lot of collected info… and questions.

[Grawl]

All data is ready to use and shipped yesterday.

[akashivskyy]

:shipit:

[ai]

@Grawl awesome! I will start to implement it after 22 of October.

[Grawl]

@ai cool! Will wait for it and use my Grawl/sass-media-resolution Sass mixin (will update it soon with actual prefixes and settings).

[jacobmellin]

@Grawl Wow, your mixin is amazing! Thanks for sharing, this will help me a lot. Also looking forward to the new autoprefixer feature.

[Grawl]

@limonenblau it's very nice to see my work is useful.

[ai]

Sorry, this features goes to 3.3 release.

[yisibl]

@ai For reference only (_^_^)

-webkit-min-device-pixel-ratio: 1 = -o-min-device-pixel-ratio: 2/1
min-resolution: 1dppx = 96dpi ≈ 0.39dpcm

dpi This unit represents the number of dots per inch. A screen typically contains 72 or 96 dpi; a printed document usually reach much greater dpi. As 1 inch is 2.54 cm, 1dpi ≈ 0.39dpcm.

dpcm This unit represents the number of dots per centimeter. As 1 inch is 2.54 cm, 1dpcm ≈ 2.54dpi.

dppx This unit represents the number of dots per px unit. Due to the 1:96 fixed ratio of CSS in to CSS px, 1dppx is equivalent to 96dpi, that corresponds to the default resolution of images displayed in CSS as defined by image-resolution.

https://developer.mozilla.org/en-US/docs/Web/CSS/resolution

[andreicojea]

:+1: I need this too

[pepelsbey]

@ai you’re rescheduling this for the 4th time already :(

[ai]

@pepelsbey because PostCSS and Browserslist also need my support :).

[pepelsbey]

@ai, since Autoprefixer is the most useful & popular application for PostCSS and Browserslist there should be a balance ;)

[andreicojea]

Maybe an option to skip certain properties? I'm using @media screen and (-webkit-min-device-pixel-ratio: 0) to write webkit only styles, but this breaks autoprefixer... :-(

[ai]

@pepelsbey don’t forgeet that Autoprefixer is open source ;). media.coffee will be like supports.coffee and CoffeeScript is very familiar to JS codes (coffeescript.org’s examples should be enough to write Coffee code in same day).

[pepelsbey]

@ai, I’m allergic to coffee :P

[ai]

@Grawl can you fix your Can I Use feature JSON and add -o- for old Opera?

[ai]

Autoprefixer Core master now can add prefixes for min-resolution and max-resolution. https://github.com/postcss/autoprefixer-core/commit/b659bed1e2b3763f23b0795e26734b23b4c2ca2f

Next I add code to remove old resolution prefixes and task will be finished.

[ai]

Important notice. Autoprefixer will not convert dppx to dpi for IE. It will only add -webkit-min-device-pixel-ratio and convert dpi or dppx to old value.

Don’t forget, that Autoprefixer is about prefixes, not polyfills.

If you want to conver dppx to dpi you should ask @yisibl to add this feature to his awesome polyfills packe CSS Grace.

[ai]

Now Autoprefixer can clean resolution queries from old prefixes too https://github.com/postcss/autoprefixer-core/commit/1bfefcc4869ecff30fad4d46763013aeb88768f4

[ai]

@Grawl I fix Can I Use data https://github.com/Fyrd/caniuse/pull/863

[Grawl]

@ai good

[yisibl]

[Fix]Support decimal value https://github.com/postcss/autoprefixer-core/commit/5b5d211721931ce2eb4851a3077d84d8ea03281b

input:

@media (min-resolution: 2.5dppx) { }

@media (min-resolution: 144dpi) { }

output:

@media (-webkit-min-device-pixel-ratio: 2.5), (min-resolution: 2.5dppx) { }

@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { }

@ai Do you intend to let it support word wrap?

Like this:

@media
screen and (-webkit-min-device-pixel-ratio: 1.5), 
screen and (min-resolution: 144dpi) {
    display: block;
}

dppx , dpi are both standard value, why not support their mutual conversion?

This is a complete list:

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi), /* fallback */
only screen and (                min-resolution: 2dppx) { 

  /* Retina-specific stuff here */

}

[ai]

@yisibl yeap, screen and is no a problem for Autoprefixer :).

[ai]

@yisibl unfortunately, Autoprefixer can’t insert fallbacks without prefixes. We need other tool for IE fallbacks. This is a same logic as with opacity for IE. I really think that CSS Grace can do it better.