Re: [csswg-drafts] New `border-radius` value for perfectly matching nested radii (#7707)

I've been thinking about how to solve a separate issue of allowing some elements to ignore the padding of a container in order to make full-bleed elements (images in cards, highlight of list-items, etc.) and I wonder if there some shared primitives here in terms of getting a parent's properties without custom variables in order to make the `calc()` easier to use.

I think there are two things possibly shared:
 * Getting a property value from a "parent". [`inherit()`](https://github.com/w3c/csswg-drafts/issues/2864) seem relevant
 * Exactly what constitutes a parent (as @dbaron brings us). Maybe that could be a container?
 
So maybe something similar in spirit to this could work:

```css
.card {
  container: card / normal;
  border-radius: 24px;
}

@container card style(border-radius: /* unsure what goes here */) {
  .card picture {
    /* this isn't actually right because inherit() will produce a serialized value that won't work in calc() */
    border-radius: calc(inherit(border-radius) - inherit(padding));
  }
}
```

This might not be workable. The difficulty of doing math on multi-valued properties like `border-*-radius` might push towards a built-in keyword, though it'd be cool to be able to distribute the calc over the individual values, or pick apart the values into a complex rule and spread that in with a mixin.

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


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

Received on Sunday, 5 March 2023 20:52:28 UTC