Re: [csswg-drafts] [css-conditional] [css-contain] "container width" and "container height" units (#5888)

Beyond the naming question (which should be considered in tandem with bikeshedding a [new container property](https://github.com/w3c/csswg-drafts/issues/6174)), there's a bigger question about how these units work.

1. if there is no ancestor container
2. if the nearest ancestor container does not have the appropriate dimension contained (eg a block-dimension unit in an inline-container)

For normal `@container` queries, we've concluded that: 

1. the query [fails when no container is available](https://github.com/w3c/csswg-drafts/issues/6178)
2. the query fails when the queried container has improper containment (This hasn't been discussed officially, but the alternative isn't viable to begin with. Browsers would have to parse each query condition before knowing what container to resolve against, and conditions could either resolve against different containers, or impact the meaning of other conditions)

But relative units don't usually "fail" in the same way as query-blocks. My immediate instinct is that they would:

1. Resolve against the viewport, if no container is present
2. Resolve based on the nearest _relevant_ container

But that could have some unexpected behavior: 

1. the viewport is likely much larger than any expected layout containers
2. inline and block units could resolve against different containers in confusing ways

Maybe that's workable for authors, but it feels very fragile and unpredictable. Would we need some way to provide a more customizable fallback value in the "failed query" situations? Either by allowing them to "fail" and fallback on a previous value:

```css
p {
  padding: 1em;
  padding: 10cw; /* ignored if no width-query is possible */
}
```

Or using some function fallback logic?

```css
p {
  /* container(<container-relative-value>, <fallback value>) */
  padding: container(calc(1em + 1w), 1em);
}
```

I'm not sure either of those is quite right. Just trying to think through the options here.

(The `cw` and `w` units above represent a container width unit, but are not actual unit name proposals. I know that `cw` will not work.)

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


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

Received on Monday, 7 June 2021 22:43:18 UTC