It is currently cumbersome to provide alternate high-resolution images to be used on a high-resolution display. Something like this is required: some complicated selector { /* Normal styles here, including things like: */ background-image: url(image.png); } /* Many more normal styles here. */ @media (min-device-pixel-ratio:2) { some complicated selector { background-image: url(hi-res-image.png); } } The hi-res image is often specified far away from the property it is overriding, and the selector has to be duplicated. This is hard to grok and hard to maintain. This problem only gets worse as the stylesheet gets more and more complicated. It would be much simpler if we had a new CSS function that took a media query and an image value. The function would only evaluate to the image value if the media query matched. When combined with the image() function (bug 68007), this could be used to simplify the above stylesheet to this (I've called the new function "match-media" below, but that is just a strawman): some complicated selector { background-image: image(match-media("min-device-pixel-ratio:2", url(hi-res-image.png)), url(image.png)); } No repetition is necessary, and the stylesheet is much easier to maintain because all the properties for this selector are in one place.
I think for CSS media queries are considered the right way to fix this (as in your first example). I'm not sure we want to extend image() for this.
After talking to Adam and hyatt I withdraw my objection. Using media queries forces you to have lots of selector duplication inside the @media block.
(In reply to comment #2) > After talking to Adam and hyatt I withdraw my objection. Using media queries forces you to have lots of selector duplication inside the @media block. This seems true for *all* MQ, though. Is there something special about images that makes the duplication worse?
Not specifically, but authoring for high-resolution displays means that you may need to replace every image with a higher-resolution one.
(In reply to comment #4) > Not specifically, but authoring for high-resolution displays means that you may need to replace every image with a higher-resolution one. Can we solve that just by always sending the high-resolution image, and using the image() function to tell CSS what the resolution is? (That functionality has been kicked to level 4.)
We want a way to be able to display a low-res image on non-hi-res displays, not just a way to display a downsampled hi-res image.
(In reply to comment #6) > We want a way to be able to display a low-res image on non-hi-res displays, not just a way to display a downsampled hi-res image. Okay. So, again, is this something that *only* images need? That is, is the "MQ makes us duplicate selectors" problem only a problem for images, or is it a more general problem? If it's more general, we should solve it more generally (like, for example, by pushing to let @media be nested within a declaration block). If it's specialized for images, is the problem confined to dpi queries, or are there other MQ that are expected to be commonly confined to images? If it's confined to dpi queries, we can produce a shorter, more specialized function.
The immediate use case is just for images of varying DPIs. This is an issue for websites that want to use different artwork on iPhone 3GS vs. iPhone 4, for example. It's certainly true that the problem is more general. But the different-DPI-image case is the only one I personally have experience with. I don't have a lot of experience building media-query-dependent websites, so can't speak to what the common issues are.
I could imagine someone wanting to supply different background-images when printing. I don't think we should limit this to high-DPI.
<rdar://problem/10189659>
Okay, so based on Simon's latest comment this functionality doesn't seem to be limited to just dpi queries - you want more types of media queries, and so we might as well just use the full MQ set and be done with it. Now, is this problem (styles for different MQ are defined separate from each other, with selectors repeated) usually unique to images, or is it a more general issue that will apply to other properties? If the former, we can make a function for MQ, or add a term to image() for it. If the latter, we should really push for a more general solution like nesting @media inside of declaration blocks. This is already present in preprocessors like SASS, so we can potentially look for SASS code to see how much this functionality is used in the wild and how it is used.
(In reply to comment #11) > If the former, we can make a function for MQ, or add a term to image() for it. If the latter, we should really push for a more general solution like nesting @media inside of declaration blocks. This is already present in preprocessors like SASS, so we can potentially look for SASS code to see how much this functionality is used in the wild and how it is used. Whatever solution we come up with, it would be nice if it were something that would work inside a style attribute and that could be specified via JavaScript.
I don't think this is needed anymore now that we have -webkit-image-set(). We haven't heard of any other use cases other than providing high-resolution images.