Re: [csswg-drafts] [css-variables] User Agent properties and variables

>From http://stephenradford.me/removing-the-white-bars-in-safari-on-iphone-x/:

> I added the following to the main container on the website.
>
> ```css
> padding: constant(safe-area-inset-right);  
> ```

Unless I'm mistaken, this will break when the phone is rotated. It also assumes that the right inset will be the largest, and padding by the largest value on all sides will look fine.

To avoid this kind of error, should we have `safe-area-inset` that could be used in shorthand properties like margin, padding, border-width? It would be equivalent to `constant(safe-area-inset-top) constant(safe-area-inset-right) constant(safe-area-inset-bottom) constant(safe-area-inset-left)`.

We might also consider ways to get the max/min inset value, via a generic `max` and `min` function.



-- 
GitHub Notification of comment by jakearchibald
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/1693#issuecomment-329563926 using your GitHub account

Received on Thursday, 14 September 2017 18:08:27 UTC