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

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

The inset values adjust when you rotate, so it probably won't break on rotation, but it is indeed wrong.

> To avoid this kind of error, should we have safe-area-inset that could be used in shorthand properties like margin, padding, border-width?

If it's possible to have variables/constants produce multiple values, then yes, it would help avoid wrongly over-applying a single edge's value.

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

CSS calc(), min() and max() are super useful with this, they are already in the CSS Units and Values Level 4 Editor's Draft. https://drafts.csswg.org/css-values/#funcdef-min

Besides the use you describe, it's often useful to padding or margin to the minimum of the inset or a fixed padding for the case where there's no inset.


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

Received on Thursday, 14 September 2017 20:31:08 UTC