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 and it proposes a set of new env() variables that define the area of the mentioned title bar.

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 to get an idea of how this works.

Start with the linked Window Controls Overlay explainer, especially its CSS environment variables and sample code. Review the proposal and the three-comment discussion to understand the requested CSSWG feedback; done would require a decision on whether and how these variables should enter the CSS specification.