Chrome and Safari Start Supporting Retina Displays with CSS4 Background Images

Retina displays are only now starting to become a reality. They're not going to be common let alone the majority for a long time to come, but it's nice to see browser makers get ready for the eventual switch. We've already seen Chrome roll out a retina display-ready UI.

Now, a proposal for CSS4 would enable websites to allow browsers to select high-res images if they're running on devices with retina or hidpi displays.

The proposal came from Apple, obviously, and it's already in WebKit. Note that this is restricted to background images for now, not regular <img> tags.

In fact, Chrome 21, the latest stable release as well as Safari 6 already support the feature. The image-set specification, part of the CSS4 proposal, is designed to give the browser options, for both regular resolution and high resolution graphics.

Of course, web designers already had the tools to do this, media queries. The advantage of using image-set is that the browser gets to choose which image to display, the website only provides options.

So a browser may choose to load the regular resolution image even if it's running on a hidpi display if the internet connection is poor or limited, for example over 3G. Of course, at this point, no browser does this, but it leaves the door open.

Here's the CSS code for image-set, in practice:

CODE

background-image: -webkit-image-set(url("image url") 1x, url("high res image url") 2x);

The property is vendor prefixed in Chrome and Safari, for obvious reasons. Once other browsers start supporting this, you'll see the -moz, -o and -ms versions popping up.

While WebKit already supports this, the spec is by no means final and may change by the time CSS4 comes anywhere near standardization. If you're planning to use this in anything but experimental stuff, you should keep this in mind.

Via: Chrome and Safari Start Supporting Retina Displays with CSS4 Background Images