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

> Overall `border-image` is a mess, and most authors won't touch it with a bargepole unless they really have to

I wouldn't go that far and say that it's a mess, though its handling around the 9-slice scaling is far from intuitive.

> ## Fixing `border-image`
> 
> It seems to me that there are three fundamental problems with `border-image`:
> 
> 1. It conflates two orthogonal concepts: 9-slice scaling is useful for images in general, and using images for borders is useful with or without 9-slice scaling.

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.

> 2. It doesn’t play well with other properties, like `border-radius`. Presumably this was done because `border-image` was designed  before `@supports`, so we probably thought `border-radius` and `border` can be used to provide a decent fallback?

Maybe someone can shed light on why this restriction actually exists.

> It’s probably not worth trying to reuse `border-image` for this, since `border-image: <image>` is valid syntax, it will impose severe restrictions in terms of what we can do.

Like @bradkemper (and the people behind the issues linked to in the issue description) I tend to believe it is better to fix and improve `border-image` rather than getting rid of it.

> Perhaps `border-layer` could work (since we [recently added `background-layer`](https://github.com/w3c/csswg-drafts/pull/9084)) and naturally affords multiple images.

That's something that should be pitched in #8802.

> We could even move the `<image-1D>` syntax to that, which currently [awkwardly sits in `border-color`](https://drafts.csswg.org/css-borders/#border-color).

I was also thinking of moving `<image-1D>` to the border images rather than `border-color`. Therefore, I've now created #9735.

> For 3, I think the main categories of use cases are, in order of less to more control:
> 
> 1. Entire image used in the border area (see use cases for [[css-backgrounds] background-clip: border-area #9456](https://github.com/w3c/csswg-drafts/issues/9456))
> 
> 2. 9-slice scaling
> 
> 3. Separate images for sides/corners with auto-flip/rotate
> 
> 4. Separate images for sides/corners with no modification

More generally, I'd say the use cases currently not covered by `border-image` are:

1. Multiple images
2. Positioning images within different parts of the border image area
3. Border images being influenced by `border-radius`
4. More control over image repetition

----

As a side note, mentally, I always separated borders from box decorations. Though I have to say, I like @SelenIT's suggestion to think of borders as a decorative layer.

Sebastian

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


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

Received on Wednesday, 20 December 2023 21:20:17 UTC