Documentation for the env(titlebar-area-*) vars

[captainbrosset]

Summary

As proposed in issue #10539, I am adding some documentation for the new env(titlebar-area-*) variables. These variables are useful for desktop-installed PWAs that use the Window Controls Overlay feature.

Another part of the documentation needed for #10539 is tracked in PR #10620.

Motivation

The documentation for env() only talks about the safe-area-inset-* variables for now, but since the Window Controls Overlay feature is coming with Chromium 97, it makes sense to complete this documentation and also add the titlebar-area-* variables to it.

Supporting details

To find out more about this, here are the 2 most up to date resources:

• https://web.dev/window-controls-overlay/
• https://docs.microsoft.com/en-us/microsoft-edge/progressive-web-apps-chromium/how-to/window-controls-overlay

Related issues

Part of #10539.

Metadata

• Adds a new document
• Rewrites (or significantly expands) a document
• Fixes a typo, bug, or other error

[captainbrosset]

There will be a broken link in there, but to fix this, we need #10620 first.

[github-actions]

Preview URLs

• https://pr10622.content.dev.mdn.mozit.cloud/en-US/docs/Web/CSS/env()

Flaws

None! 🎉

External URLs

URL: /en-US/docs/Web/CSS/env()
Title: env()
on GitHub

• https://alistapart.com/article/breaking-out-of-the-box/ (1 time) (Note! This may be a new URL 👀)
• https://docs.microsoft.com/microsoft-edge/progressive-web-apps-chromium/how-to/window-controls-overlay (1 time) (Note! This may be a new URL 👀)
• https://web.dev/window-controls-overlay/ (1 time) (Note! This may be a new URL 👀)

(this comment was updated 2021-12-16 09:53:08.229132)

[captainbrosset]

Note that I'm adding more detailed BCD information on this page via mdn/browser-compat-data#14035 as well.