- From: Sebastian Zartner via GitHub <sysbot+gh@w3.org>
- Date: Wed, 20 Dec 2023 21:20:15 +0000
- To: public-css-archive@w3.org
> 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