Bug 68008 - Would like a CSS function that represents an image that will only be loaded if a given media query is matched
Summary: Would like a CSS function that represents an image that will only be loaded i...
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: 528+ (Nightly build)
Hardware: All All
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2011-09-13 09:42 PDT by Adam Roben (:aroben)
Modified: 2012-06-20 05:53 PDT (History)
6 users (show)

See Also:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description Adam Roben (:aroben) 2011-09-13 09:42:12 PDT
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.
Comment 1 Simon Fraser (smfr) 2011-09-13 10:26:02 PDT
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.
Comment 2 Simon Fraser (smfr) 2011-09-13 10:53:53 PDT
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.
Comment 3 Tab Atkins 2011-09-13 10:59:56 PDT
(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?
Comment 4 Simon Fraser (smfr) 2011-09-13 11:06:57 PDT
Not specifically, but authoring for high-resolution displays means that you may need to replace every image with a higher-resolution one.
Comment 5 Tab Atkins 2011-09-13 11:23:07 PDT
(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.)
Comment 6 Adam Roben (:aroben) 2011-09-13 11:26:30 PDT
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.
Comment 7 Tab Atkins 2011-09-13 11:46:49 PDT
(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.
Comment 8 Adam Roben (:aroben) 2011-09-13 11:51:32 PDT
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.
Comment 9 Simon Fraser (smfr) 2011-09-13 12:06:24 PDT
I could imagine someone wanting to supply different background-images when printing. I don't think we should limit this to high-DPI.
Comment 10 Simon Fraser (smfr) 2011-09-26 16:48:42 PDT
<rdar://problem/10189659>
Comment 11 Tab Atkins 2011-09-28 14:57:26 PDT
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.
Comment 12 Adam Roben (:aroben) 2011-09-29 04:58:46 PDT
(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.
Comment 13 Adam Roben (:aroben) 2012-06-20 05:53:43 PDT
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.