Pixel ratio media queries aren't being autoprefixed #122

Closed
borodean opened this Issue Oct 31, 2013 · 65 comments

Projects

None yet
@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
Member
ai commented Oct 31, 2013

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 :-)

@ai ai added 1.1 1.2 and removed 1.1 labels Feb 7, 2014
@hparra
hparra commented Mar 10, 2014

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
Member
ai commented Jun 22, 2014

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
hparra commented Jul 18, 2014

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:

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
Member
ai commented Jul 18, 2014

@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
Member
ai commented Jul 30, 2014

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

@rstacruz
rstacruz commented Aug 9, 2014

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

@Grawl Grawl referenced this issue in Sebastian-Fitzner/grunt-data-separator Aug 20, 2014
Closed

Split rule based on `data-uri` in `@media` requests? #1

@Grawl
Contributor
Grawl commented Aug 20, 2014

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

@ai
Member
ai commented Aug 20, 2014

@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
Contributor
Grawl commented Aug 20, 2014

@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.

@jiyinyiyong

It's nice and I'm looking forward.

@mietek
mietek commented Sep 7, 2014

👍

@pepelsbey

Do want 👍

@ai
Member
ai commented Sep 21, 2014

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
Contributor
Grawl commented Oct 10, 2014

So we need a proofs or just tests?

@ai
Member
ai commented Oct 10, 2014

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
#122 (comment)
.

@Grawl
Contributor
Grawl commented Oct 10, 2014

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

@ai
Member
ai commented Oct 10, 2014

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
#122 (comment)
.

@Grawl
Contributor
Grawl commented Oct 10, 2014

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

@Grawl
Contributor
Grawl commented Oct 11, 2014

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

@AntonTrollback AntonTrollback referenced this issue in MoOx/postcss-cssnext Oct 13, 2014
Open

Add `image-set()` support #43

@Grawl
Contributor
Grawl commented Oct 15, 2014

All data is ready to use and shipped yesterday.

@ai
Member
ai commented Oct 15, 2014

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

@Grawl
Contributor
Grawl commented Oct 16, 2014

@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.

@ai ai added the 3.2 label Oct 20, 2014
@Grawl
Contributor
Grawl commented Oct 20, 2014

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

@ggaulard ggaulard referenced this issue in jhipster/generator-jhipster Oct 22, 2014
Merged

Replace home picture and favicon by JHipster logo #676

@ai
Member
ai commented Nov 12, 2014

Sorry, this features goes to 3.3 release.

@ai ai added 3.3 and removed 3.2 labels Nov 12, 2014
@yisibl
Contributor
yisibl commented Dec 9, 2014

@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

@ai ai added 5.1 and removed 5.0 labels Jan 12, 2015
@andreicojea

👍 I need this too

@pepelsbey

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

@ai
Member
ai commented Jan 20, 2015

@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
Member
ai commented Jan 20, 2015

@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
Member
ai commented Jan 24, 2015

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

@ai
Member
ai commented Jan 24, 2015

Autoprefixer Core master now can add prefixes for min-resolution and max-resolution. ai/autoprefixer-core@b659bed

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

@ai
Member
ai commented Jan 24, 2015

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
Member
ai commented Jan 24, 2015

Now Autoprefixer can clean resolution queries from old prefixes too ai/autoprefixer-core@1bfefcc

@ai ai closed this Jan 24, 2015
@ai
Member
ai commented Jan 24, 2015

@Grawl I fix Can I Use data Fyrd/caniuse#863

@Grawl
Contributor
Grawl commented Jan 25, 2015

@ai good

@yisibl
Contributor
yisibl commented Jan 26, 2015

[Fix]Support decimal value ai/autoprefixer-core@5b5d211

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
Member
ai commented Jan 26, 2015

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

@ai
Member
ai commented Jan 26, 2015

@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.

@yisibl
Contributor
yisibl commented Jan 26, 2015

@ai Well, CSS Grace deals with the problem of fallback.
However, has already supported the -webkit-min-device-pixel-ratio property, why not support other prefix?

@yisibl
Contributor
yisibl commented Jan 26, 2015

@ai

Do you intend to let it support word wrap?

output:

@media
(-webkit-min-device-pixel-ratio: 1.5), 
(min-resolution: 144dpi) {
    display: block;
}
@ai
Member
ai commented Jan 26, 2015

@yisibl support is in Autoprefixer, but I wait for Can I Use update.

@yisibl
Contributor
yisibl commented Jan 26, 2015

Okey, Thanks!

@ai
Member
ai commented Jan 26, 2015

@yisibl now Autoprefixer 5.1 has support for -moz- and -o- resolutions ai/autoprefixer-core@30db19e

@yisibl
Contributor
yisibl commented Jan 27, 2015

@ai
ai/autoprefixer-core@30db19e#diff-780050d78c22949ea582bf8b8c58713cR1

I created a npm module, converting Number to Fraction, you can use it 👻 .

https://github.com/yisibl/num2fraction

var n2f = require('num2fraction')

console.log(n2f(0))            // => 0
console.log(n2f(1.3))          // => 13/10
console.log(n2f(1.4))          // => 7/5
@yisibl
Contributor
yisibl commented Jan 27, 2015

Too great. 👻

@akashivskyy

🎉

@yisibl
Contributor
yisibl commented Jan 29, 2015

@ai

input:

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

output:

@media (-webkit-min-device-pixel-ratio: 1), (-o-min-device-pixel-ratio: 1/1), (min-resolution: 96dpi) {}

Missing -moz

In addition, we need to consider a nested case. Like @keyframes.

@viewport{
  @media (min-resolution: 96dpi) {}
}

output:

@-ms-viewport{
  @media (min-resolution: 96dpi) {}
}
@-o-viewport{
  @media (min-resolution: 96dpi) {}
}
@viewport{
  @media (-webkit-min-device-pixel-ratio: 1), (-o-min-device-pixel-ratio: 1/1), (min-resolution: 96dpi) {}
}

Demo: http://jsbin.com/lovopoxipi

@ai
Member
ai commented Jan 29, 2015

@yisibl because Firefox supports min-resolution: 96dpi, so I add min--moz-device-pixel-ratio only if you use dppx.

@yisibl
Contributor
yisibl commented Jan 29, 2015

Ok!

@ai
Member
ai commented Jan 30, 2015

Released today in 5.1

@andreicojea

👍 great, thanks!

@silvenon silvenon added a commit to silvenon/mint that referenced this issue Feb 15, 2015
@silvenon silvenon Inline classes and remove mixins and variables
- border-box-sizing mixin is a one-off, it won't be reused, therefore doesn't need be a mixin
- font-size mixin assumes px, but I use (r)ems now, sometimes viewport units
- hidpi mixin existed because of the lack of support in Autoprefixer, but not the support is here (postcss/autoprefixer#122)
- vertically-center mixin is unnecessarily hacky because now we have Flexbox!
- query mixin should be replaced with a text editor snippet
- typographic variables are silly to assume and I'm not wasting any effort on vertical rhythm anymore
- this set of brand colors is arbitrary and incomplete, use http://brandcolors.net
a8c8620
@rguanghui

🎉

@ai ai modified the milestone: 5.1 Jan 14, 2016
@ai ai removed the 5.1 label Jan 14, 2016
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment