W3C home > Mailing lists > Public > public-css-archive@w3.org > October 2019

Re: [csswg-drafts] [css-values-4] Add vhc value (#4329)

From: Anthony Frehner via GitHub <sysbot+gh@w3.org>
Date: Tue, 29 Oct 2019 17:54:56 +0000
To: public-css-archive@w3.org
Message-ID: <issue_comment.created-547551485-1572371695-sysbot+gh@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

This archive was generated by hypermail 2.4.0 : Tuesday, 5 July 2022 06:41:55 UTC