[csswg-drafts] Proposing new `env()` variables to enable title bar customization on installed Web Apps (#6367)

diekus has just created a new issue for https://github.com/w3c/csswg-drafts:

== Proposing new `env()` variables to enable title bar customization on installed Web Apps ==
Hola everyone! Diego here from the Edge team. I've been working with my colleagues on a feature that allows to customize the title bar for installed Web applications. The feature we are working on is called [Window Controls Overlay](https://github.com/WICG/window-controls-overlay/blob/main/explainer.md) and it proposes a set of new [env() variables](https://github.com/WICG/window-controls-overlay/blob/main/explainer.md#css-environment-variables) that define the area of the mentioned title bar. 

![image](https://user-images.githubusercontent.com/73939538/121362831-519f3900-c92e-11eb-88a8-4f4e803c07d9.png)

These variables are:

- `titlebar-area-x`
- `titlebar-area-y`
- `titlebar-area-width`
- `titlebar-area-height`

We want to add these env() variables since they provide a responsive CSS solution that the JS counterpart can't easily replicate. This is necessary when a window is resized or when the overlay area dynamically accommodates an extension icon for example. 

We'd love to get this into the CSS spec, and I'd love to read your thoughts and feedback, so please feel free to use this GitHub thread as a discussion forum. 

You can see the [sample code](https://github.com/WICG/window-controls-overlay/blob/main/explainer.md#example) to get an idea of how this works. 

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/6367 using your GitHub account


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

Received on Wednesday, 9 June 2021 13:27:25 UTC