[Webkit-unassigned] [Bug 68008] New: Would like a CSS function that represents an image that will only be loaded if a given media query is matched

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=68008

           Summary: Would like a CSS function that represents an image
                    that will only be loaded if a given media query is
                    matched
           Product: WebKit
           Version: 528+ (Nightly build)
          Platform: All
        OS/Version: All
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: CSS
        AssignedTo: webkit-unassigned at lists.webkit.org
        ReportedBy: aroben at apple.com
                CC: hyatt at apple.com, mitz at webkit.org, bdakin at apple.com,
                    simon.fraser at apple.com


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.

-- 
Configure bugmail: https://bugs.webkit.org/userprefs.cgi?tab=email
------- You are receiving this mail because: -------
You are the assignee for the bug.