- From: Anthony Frehner via GitHub <sysbot+gh@w3.org>
- Date: Tue, 29 Oct 2019 17:54:56 +0000
- To: public-css-archive@w3.org
I thought it might be useful to write down some of the pros/cons of each proposal so far.
## `vhc`
Pros:
* easy to use and understand
Cons:
* A new unit
* Isn't dynamic; would possibly consider adding additional unit(s) to cover other cases (e.g. popup UA chrome sizing?)
Progressive enhancement usage, and [a codepen example](https://codepen.io/afrehner/pen/gOOGpNq)
```css
.container {
height: 100vh;
height: 100vhc;
}
```
## `env(inset-collapsable-height)`
Pros:
* Clear and explicit
Cons:
* is more difficult to use: `height: calc(100vh - env(inset-collapsable-height));`
* Doesn't appear to have an easy way to do progressive enhancement, see [this example](https://codepen.io/afrehner/pen/dyyVYyK) - (I tested in firefox)
* Isn't dynamic; would possibly consider adding additional unit(s) to cover other cases (e.g. popup UA chrome sizing?)
## `vh-sizing`
Pros:
* Uses the same `vh` unit but changes its behavior where supported
* Cascades
Cons:
* Cannot use different `vh` definitions in the same block
* Cascades ;)
* Less clear / direct than a new unit
Progressive enhancement usage, and a [codepen example](https://codepen.io/afrehner/pen/bGGoVWV)
```css
.container {
height: 100vh;
vh-sizing: expanded-viewport-height;
}
```
<hr>
Hopefully this is helpful. Let me know if you want me to change/add something to this list as well.
--
GitHub Notification of comment by frehner
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/4329#issuecomment-547551485 using your GitHub account
Received on Tuesday, 29 October 2019 17:55:03 UTC