[css-env] Add environment variable for left/right bounds of notch #4721

CSS Environment Variables

On mobile devices with notches, developers can use the safe-area-inset-* environment variable to shift the web content and ensure that all content is hidden behind the notch. However, with limited space on small devices, developers want to be able to place content in the area next to the notch as well.

This is something that we would also like to use in our proposed feature for Title Bar Customization in PWAs. If we treat the caption control overlay proposed in the document like a notch, then these new CSS variables would make it easier for developers to style the remaining area next to the overlay.

Although using shape-inside and shape-outside would provide a more accurate representation of the notch, these have not yet been implemented in Chromium or Safari. Below is a less robust, but simpler solution to working around a notch

Proposal:

Following the pattern of safe-area-inset-*s, we propose new CSS environment variables to define the insets of the unsafe notch area in more detail: 

• Horizontal insets of the notch on the top edge of the screen
    - unsafe-area-top-inset-left
    - unsafe-area-top-inset-right
  - Horizontal insets of the notch on the bottom edge of the screen
    - unsafe-area-bottom-inset-left
    - unsafe-area-bottom-inset-right
  - Vertical insets of the notch on the left edge of the screen
    - unsafe-area-left-inset-top
    - unsafe-area-left-inset-bottom
  - Vertical insets of the notch on the right edge of the screen
    - unsafe-area-right-inset-top
    - unsafe-area-right-inset-bottom

For example, when defining a notch on the top of the screen, you can define its position via the insets from the edges of the window:
  - top inset: 0
  - left inset: env(unsafe-area-top-inset-left)
  - bottom inset: env(safe-area-inset-top)
  - right inset: env(unsafe-area-top-inset-right)