New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[css-round-display] Add safe area properties/constants #1819
base: main
Are you sure you want to change the base?
Conversation
Any thoughts on |
@jakearchibald Maybe. But generally you don't use them all at once. For example, if you have a bottom bar you don't really care about the top inset. You just want to make sure any content in your bar avoids the bottom, left and right edges. |
You also tend to use them in calc expressions (i.e. adding to an existing padding amount). |
@grorg Thanks for the inspiring new features! 😄 |
@grorg you're right. Outside of simple demos, you'd rarely use all 4 on a single element. I guess it's more productive to watch out for mistakes in documentation & correct them. Ta! |
Should we (normatively) say what happens when the screen, instead of a rounded corner rectangle, is a circle? Strictly speaking, there's not safe are, but some areas are safer than others. Should this be up to the UA, |
@frivoal I'm not overly familiar with this but the most trivial guess would be that the insets should then be the difference between |
@frivoal the largest square that can be contained within the circle is the safe area, no? I agree that there's ambiguity with curved corners, but it feels like the safe area should be the largest possible rectangular area of usable pixels. |
These are the same thing, and this is a good idea. 👍 |
|
We decided on the call to list these UA-specified variables in Variables Level 2. |
It seems work like a |
@grorg do you want to re-work this PR to add the explanatory text and examples to css-env-1, or close this PR and do that part separately? |
Another part of #1693