Re: [csswg-drafts] [css-borders-4] Allow to define separate border images for different border regions (#9183)

> Also cannot count the number of times people have "corrected" me when I tell them that the pixel value cannot have a `px` unit.

Agree that that's another pain point but let's keep that discussion in #6739.

> 1. Under "Allow to target specific regions" you mention "all eight regions." This seems to ignore the possibility of including a `fill` image. Is that intentional?

Yes, because I see the `fill` image as another source of confusion. Border images are meant to be placed within the border area.
For consistency reasons, a ninth image _could_ be added, though I am strongly against that. For filling the background area we have the `background-*` properties.

The same accounts for `border-image-width`, which should not have existed, in my opinion. Or it shouldn't be possible for it to extend the actual border area, at least.

So my approach was to restrict it to the eight border regions.

> 2. Maybe a `grid-template` like syntax could be used when specifying all images?
> 
> 
> ```css
> border-image-source:
> "url(top-left-corner.svg)    url(just_a_solid_line.svg)                         url(top-right-corner.svg)"
> ".                           .                                                  ."
> "url(bottom-left-corner.svg) linear-gradinet(to top, #000 0 3px, transparent 0) url(bottom-right-corner.svg)";
> ```

You mean `grid-template-areas`. The issue with that is that the string syntax conflicts with the `<image>` data type. You'd rather need to keep the `<string>`s for the dots separated from the `<image>`s. I.e. the example might look like this:

```css
border-image-source:
  url(top-left-corner.svg)    url(just_a_solid_line.svg)                         url(top-right-corner.svg)
  ".                           .                                                  ."
  url(bottom-left-corner.svg) linear-gradient(to top, #000 0 3px, transparent 0) url(bottom-right-corner.svg);
```

But yeah, that could be another approach.

Another approach could be to target the different regions by name. Taking your example, that might then look like this:

```css
border-image-source:
  url('top-left-corner.svg') top left
  url('just_a_solid_line.svg') top center
  url('top-right-corner.svg') top right
  url('bottom-left-corner.svg') bottom left
  linear-gradient(to top, #000 0 3px, transparent 0) bottom center
  url('bottom-right-corner.svg') bottom right;
```

Or maybe something that aligns with the [grid syntax proposed for anchor positioning](https://fantasai.inkedblade.net/style/specs/css-anchor-exploration/#track-compartment), allowing to fill multiple border regions with one image. Though I guess we might then run into similar issues again as we have them now with slicing.

>     3. How would alignment of images work if for example the top corner images and top edge image where not the same height? Outer, center/middle, or inner aligned?

They are layed out using `border-image-width`, i.e. they are shrunk or stretched so that they are equal in size. As I said, all other `border-image-*` properties besides `border-image-slice` would still have an effect on the images.

We might still extend the features to allow aligning the images within their regions, but I explicitly only wanted to target the slicing issue for now and don't introduce new features besides that.

> 4. I can see a lot of `just_a_solid_line.svg`/solid gradient being used to mimic solid bordered edges as part of the source. Could it be made possible to use something like `border solid 3px` as an image?? Or as a keyword in place of an image??

Authors could achieve that by placing a `linear-gradient(transparent calc(50% - 1px), black calc(50% - 1px), black calc(50% + 2px), transparent calc(50% + 2px))`. Pretty hacky, I know, but again, something better would be for a future extension. (And authors do have to fake that right now as well by creating an image tile like that.)

We might allow the `stripes()` function we just introduced for `border-color` for that, though. Which would reduce this to the much nicer `stripes(transparent, black 2px, transparent)`.

Sebastian

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


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

Received on Monday, 14 August 2023 00:32:33 UTC