Add utilities for safe area

[andreas-web]

Prerequisites

• [x] I have searched for duplicate or closed feature requests
• [X] I have read the contributing guidelines

Proposal

How about extending the spacer classes .p-*, .m-*, .top-* etc. with the safe-area spaces? The values env(safe-area-inset-*) must be used here.

Motivation and context

Mobile devices such as the iPhone or iPad in particular require these spaces. However, it also makes sense that existing spacer classes can override these values. Therefore, the new classes should be integrated into the existing network with great care.

[vardhanreddy27]

It sounds like you are suggesting adding support for the env(safe-area-inset-*) CSS function to the existing "spacer" classes in your project. The env() function is used to access the value of a custom property (also known as a "CSS variable") that has been set on the :root element of a document.

The safe-area-inset-* values are used to specify the safe area insets for a device, which represent the area of the viewport that is not obscured by the device's display hardware (e.g. bezels or rounded corners). These values can be used to ensure that content is not obscured by the hardware when the device is rotated or when the device's display zoom is changed.

Adding support for the env(safe-area-inset-) function to your project's "spacer" classes would likely involve updating the values of the relevant classes to use the env() function instead of fixed lengths. It would also involve setting custom properties for the safe-area-inset- values on the :root element of your document, so that the env() function can access them.

It is important to note that the env() function is not supported by all browsers, so you will need to consider this when deciding whether to use it in your project. You may need to provide fallbacks for browsers that do not support the env() function.