Re: [csswg-drafts] [css-values-4] inherit() function: like var() for parent value, for any property (#2864)

I've hit a use-case for this that i will explain... 

I have a UI composed of components, where various components might have parts which are `position:sticky`. These components can be composed arbitrarily, and i want each of the sticky elements to stack on _top of_ one another, so that each sticky part is always visible. Imagine i have a tabs component whose tab buttons are sticky, and a table component whose headers are sticky. When nesting a table inside tabs, I want both the tab buttons and table headers to be visible always. 

To achieve this right now, you need to do something like:

```css
.tab {
  position: sticky;
  top: 0;
}

.table th {
  position: sticky;
  top: 40px; /* hard-coded height of tab */
}
```

This is brittle because you need to store the height of the tabs in the table component. Though at least it works! But, what happens if you have a set of tabs _inside_ a set of tabs, with a table inside them? Or what if you want a table _not inside_ tabs? You'll end up with a broken result in these, and many other, cases.

What would be ideal is if i could keep a running tally of how much top space has been taken up by sticky elements. So each component adds to the running total, which gets inherited by descendants, who add to it etc etc. 

I think with this proposal it could be achieved like this?

```css
:root {
  --sticky-tally: 0;
}

.tab {
  --tab-height: 80px;
  --sticky-tally: calc(parent(--sticky-tally) + var(--tab-height));

  height: 80px;
  position: sticky;
  top: calc(var(--sticky-tally) - var(--tab-height));
}

.table {
  --th-height: 40px;
  --sticky-tally: calc(parent(--sticky-tally) + var(--th-height));
}

.table th {
  height: var(--th-height); 
  position: sticky;
  top: calc(var(--sticky-tally) - var(--th-height));
}
```

This should support arbitrary nesting with all sticky elements stacking as intended, without resorting to JS or trying to enumerate every combination of component. Also it's nice because now table doesn't need to know about tab height, each component sets their own height and just adds to the total/tally.

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


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

Received on Thursday, 30 June 2022 15:26:31 UTC