image-set: dealing with DPI in specific terms
Posted by Dion Almaer about a year ago on css dpi retina
Edward O’Connor has started an interesting conversation with his post on www-style on the image-set() function.
He argues that while the tools exist (via media queries and min-device-pixel-ratio and it’s JavaScript friend) to deal with various DPI screens such as the iPhone 4+ retina display, it is too easy to make mistakes, and this is something that you should be doing time and time again, and thus it would be nice to have a dedicated syntax (such as this:)
selector {
background: image-set(url(foo-lowres.png) 1x,
url(foo-highres.png) 2x) center;
}
I agree that life is too error prone, and have seen annoying bugs in browsers. The one that always surprises me is the extra download of CSS.
Saw you have separate style sheets like this:
<link rel="stylesheet" type="text/css" href="retina.css" media="only screen and (-webkit-min-device-pixel-ratio: 2)">
<link rel="stylesheet" type="text/css" href="regular.css" media="screen">
Load that up in your browser and use the tools to see what the browser has downloaded, and you will probably see that both CSS files were downloaded. That could make sense if the media query was tied to the size of the browser (as that can change) but is your desktop browser suddenly going to double its DPI?
The other issue that I have with the media query solution is that it is easy to “miss” an image or two.
Now, with the proliferation of tools such as stylus, SASS, less and friends, you can work around the issues now. We wrap our images as image-element('images/someimage.png') and our tools make sure the background-size is set and the right image is referenced in our foo@2x.css.