Re: [csswg-drafts] [css-borders][css-images] Properly address border image use cases, and kill `border-image` with fire (#9714)

> I don't believe 9-slice scaling is useful beyond border images. I'd even say it is not useful at all besides reducing network requests.

Well, yes, 9-slice scaling definitely seems specific to this use case. But the slicing is effectively creating a sprite sheet or [texture atlas](https://en.wikipedia.org/wiki/Texture_atlas). It's something authors have been doing for decades and using `background-position` to get the sprite that they want from the sprite sheet. And having a more generic syntax for creating a sprite sheet would definitely be useful.

For example, let's take this [character sprite sheet from an OpenClipart user](https://openclipart.org/detail/248259/retro-character-sprite-sheet):

![A 4 by 4 sprite sheet of a character walking.](https://github.com/user-attachments/assets/2c07be64-643b-4a4d-84b7-d64c122b833f)

Maybe we could have some kind of syntax to define the sprite sheet:

```css
@spritesheet --character-walking {
  src: url(spritesheet.png);
  slices-x: repeat(4, 32px);
  slices-y: repeat(4, 40px)
}
```

And then some way to reference each sprite. Maybe a `sprite()` function, which would be an `<image>` type. In my example below, I'm using an index to reference each sprite on the sheet, but maybe there could be a way to name them too.

```css
background-image: sprite(--character-walking, 0)
```

That's just an idea. You could then apply it to border image areas.

-- 
GitHub Notification of comment by JoshTumath
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/9714#issuecomment-2321655419 using your GitHub account


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

Received on Friday, 30 August 2024 15:36:24 UTC