[csswg-drafts] [css-backgrounds] Add replacement-box to background-origin and background-clip (#8243)

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

== [css-backgrounds] Add replacement-box to background-origin and background-clip ==

Add `replacement-box` as an option to `background-origin` and `background-clip`. 
(box name up for bikeshedding)

### Motivation
While an image is loading, a low resolution image or the average color can be presented as a preview. 
In the simple case this is easy to do by setting a background-colour or a background-image. But this only works as long as `object-fit` is fill. 

If the image has `object-fit` and `object-position` set it can be cumbersome to match the final clip and position of the replaced image. It's even more complicated when the final image dimensions are art-directed and varies based on a media-query.

`loading=lazy` and source width and height presentational hints for `aspect-ratio` have now landed in most browsers. This allows us to "reserve" space for the image until it's loaded. 

We should provide a simple way to add a low quality image placeholder as well. 

### Proposal

Add `replacement-box` as an option to `background-origin` and `background-clip`. 

The replacement-box should match the area the replaced content is rendered into, before being clipped, so that any content rendered into this box matches the final replaced element. If the element is still loading, the area should be determined by the aspect-ratio presentational hint in combination with `object-fit` and `object-position`.

Adding a low quality replacement image should then be as easy as 

```html
<picture>
  <source srcset="./desktop-image.webp" width="400" height="200" media="(min-width=800px)"/>
  <source srcset="./mobile-image.webp" width="300" height="400"/>
  <img alt="..."/>
</picture>
```

```css
img {
  width: 400px;
  height: 400px;
  background-color: --average-color;
  background-clip: replacement-box;

  /* Not necessary for background-color */  
  background-origin: replacement-box; 
  background-size: 100% 100%;
}
```

With [the proposed `:loading` pseudo-element](https://github.com/w3c/csswg-drafts/issues/7467), we can even do
```css
img:loading {
  filter: blur(10px);
}
```

Being able to position and clip a background-color or background-image into the `replacement-box` would also allow for adding a background to transparent images as well. 



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


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

Received on Sunday, 18 December 2022 19:50:07 UTC