[csswg-drafts] [css-images] image-set() syntax for color scheme specifc images (#9470)

nt1m has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-images] image-set() syntax for color scheme specifc images ==
This bit of code from @emilio in https://phabricator.services.mozilla.com/D190919 :
```
    &[progress] {
      list-style-image: image-set(
        url("chrome://browser/skin/tabbrowser/tab-loading.png"),
        url("chrome://browser/skin/tabbrowser/tab-loading@2x.png") 2x
      );

      /* FIXME: This should probably also apply in regular dark mode? */
      :root[lwt-popup="dark"] &[progress]:not([selected]) {
        list-style-image: image-set(
          url("chrome://browser/skin/tabbrowser/tab-loading-inverted.png"),
          url("chrome://browser/skin/tabbrowser/tab-loading-inverted@2x.png") 2x
        );
      }
 ```

inspired me to suggest this. It would be nice if image-set() could also select based on color-scheme.


Syntax to be bikeshed, but it would be nice if you could write this:
```
      list-style-image: image-set(
        url("chrome://browser/skin/tabbrowser/tab-loading.png") light,
        url("chrome://browser/skin/tabbrowser/tab-loading@2x.png") light 2x,
        url("chrome://browser/skin/tabbrowser/tab-loading-inverted.png") dark,
        url("chrome://browser/skin/tabbrowser/tab-loading-inverted@2x.png") dark 2x
      );
```

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/9470 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Monday, 16 October 2023 04:42:31 UTC