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

Thank you @fabb - I hadn't seen that. The Virtual Keyboard API proposal looks excellent to me.

My revised points are:
* The CSS developer ergonomics of positioning/sizing using virtual keyboard environment variables and the proposed browser chrome-aware viewport units should be considered. They will often be used together.
* Both proposals are limited in usefulness without the other.

I think my previous example can be used to illustrate this. Consider an element that occupies the bottom quarter of the visible viewport,  and that remains visible above browser chrome, and above the virtual keyboard. And, the Virtual Keyboard proposal and viewport relative lengths are in place. And, we want it to work on browsers that don't support the 2 new proposals. The CSS would look like this:

```css
.bottomQuarter {
  position: fixed;
  bottom: 0;
  bottom: env(keyboard-inset-bottom, 0px);
  width: 100vw;
  width: 100dvw;
  height: 25vh;
  height: calc(25dvh - env(keyboard-inset-height, 0px)/4);
```

I think this is fine, but there's a case for adding environment variables for browser chrome offsets too. We will hopefully have environment variables for safe areas, virtual keyboard borders, and foldable device screens; for completeness it seems like browser chrome offsets should be added.

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


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

Received on Tuesday, 22 June 2021 16:12:14 UTC