Re: [csswg-drafts] [css-backgrounds] background-clip: border-area (#9456)

Love the idea. Definitely something that I’ve needed before.

I like the “quick win” aspect of this proposal, but worry that by using the background as a border it could create issues.

Possible accessibility concern: in a non-supporting UA, users may end up with text contrast issues when the background intended for the border is _not_ clipped.

```css
section {
  border: solid 10px transparent;
  color: black;
  background: linear-gradient(to bottom, black, gray);
  background-clip: border-area;
}
```

This can be avoided when authors make use of `@supports`:

```css
section {
  border: solid 10px transparent;
  color: black;
}

@supports (background-clip: border-area) {
  section {
    background: linear-gradient(to bottom, black, gray);
    background-clip: border-area;
  }
}
```

But we can expect that many authors will not do that (usually because they were testing in a supporting browser, and didn’t realize this was a need). So a better failure mode would be great.

Another related concern is how High Contrast / Forced Colors modes would handle this. Maybe better if they force the background color or replace it with a backplate, and force the border color too.


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


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

Received on Thursday, 12 October 2023 08:28:45 UTC