- From: Tab Atkins Jr. <jackalmage@gmail.com>
- Date: Tue, 21 Feb 2012 18:16:21 -0800
- To: "Edward O'Connor" <eoconnor@apple.com>
- Cc: www-style@w3.org
On Tue, Feb 21, 2012 at 4:57 PM, Edward O'Connor <eoconnor@apple.com> wrote: > Hi all, > > It's all too easy for authors to make mistakes when adapting their sites > for high-resolution displays such as the iPhone's Retina display. > Consider the following stylesheet: > > … > selector { > background: url(foo-lowres.png) center; > } > … > @media mq { > … > selector { > background: url(foo-highres.png) center / 100px 100px; > } > … > } > … > > The references to the low- and high-resolution variants of foo.png are > far apart from one another in the stylesheet, and the (potentially > complicated) selector has been duplicated. On a large site with many > image assets, this causes stylesheets to become very large and less > maintainable. Here are just a few of the problems with the current > situation: > > * Bugs due to non-locality: One developer fixes a bug in the selector, > but only in the low-resolution case. Another developer changes an > image reference to refer to a different icon, but only in the > high-resolution case. > > * Both assets may be loaded by the browser, which may degrade > performance in a constrained bandwidth environment. > > * Authors can't specify both assets inside a style="" attribute. > > I'd like to propose a new function for the Images module. This function > will allow developers to provide, in a compact manner, multiple variants > of the same image at differing resolutions. Using @media pushes the two > asset references apart from one another, whereas such a function keeps > related asset references together. It also helps keep selectors DRY. > We've called it image-set(), and it takes one or more image specifiers. > Image specifiers consist of an asset reference and a scale factor: > > image-set( imagespec [ ',' imagespec ]* ) > imagespec ::= <image> S {num} 'x' > > The above example could be rewritten using image-set() like so: > > selector { > background: image-set(url(foo-lowres.png) 1x, > url(foo-highres.png) 2x) center; > } > > By using image-set() here, the author is saying that foo-highres.png is > twice the resolution of foo-lowres.png. UAs which support image-set() > could then use the 2x image on a high-resolution display, and the 1x > image on a low-resolution display. UAs aren't required to fetch the > assets in order to determine which should be displayed, so we avoid > redundant asset loading. The image() function previously had the ability to specify the resolution of an image layer. I've punted it to level 4 for now. Can we just piggyback on that, and allow browsers to prioritize images of "appropriate" resolutions? ~TJ
Received on Wednesday, 22 February 2012 02:17:08 UTC