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

Open
wants to merge 1 commit into
base: master
from

Conversation

Projects
None yet
7 participants
@grorg
Contributor

grorg commented Sep 15, 2017

Another part of #1693

@jakearchibald

This comment has been minimized.

Show comment
Hide comment
@jakearchibald

jakearchibald Sep 15, 2017

Contributor

Any thoughts on safe-area-inset — a combination that can be used in shorthands? Seems useful as it's likely all will be applied as a padding/margin.

Contributor

jakearchibald commented Sep 15, 2017

Any thoughts on safe-area-inset — a combination that can be used in shorthands? Seems useful as it's likely all will be applied as a padding/margin.

@grorg

This comment has been minimized.

Show comment
Hide comment
@grorg

grorg Sep 15, 2017

Contributor

@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.

Contributor

grorg commented Sep 15, 2017

@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.

@grorg

This comment has been minimized.

Show comment
Hide comment
@grorg

grorg Sep 15, 2017

Contributor

You also tend to use them in calc expressions (i.e. adding to an existing padding amount).

Contributor

grorg commented Sep 15, 2017

You also tend to use them in calc expressions (i.e. adding to an existing padding amount).

@jihyerish

This comment has been minimized.

Show comment
Hide comment
@jihyerish

jihyerish Sep 18, 2017

Contributor

@grorg Thanks for the inspiring new features! 😄
I think the shorthand safe-area-inset would be useful.
In a circular display, mostly for the main menu page, the insets in all directions are the same.
But as you mentioned, something like the list, we don't need to consider safe-area-inset-top and safe-area-inset-bottom.

Contributor

jihyerish commented Sep 18, 2017

@grorg Thanks for the inspiring new features! 😄
I think the shorthand safe-area-inset would be useful.
In a circular display, mostly for the main menu page, the insets in all directions are the same.
But as you mentioned, something like the list, we don't need to consider safe-area-inset-top and safe-area-inset-bottom.

@jakearchibald

This comment has been minimized.

Show comment
Hide comment
@jakearchibald

jakearchibald Sep 18, 2017

Contributor

@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!

Contributor

jakearchibald commented Sep 18, 2017

@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!

@frivoal

This comment has been minimized.

Show comment
Hide comment
@frivoal

frivoal Sep 19, 2017

Contributor

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, safe-area-inset-* being 0, or safe-area-inset-* being large enough to reduce the remaining area of the screen to 0?

Contributor

frivoal commented Sep 19, 2017

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, safe-area-inset-* being 0, or safe-area-inset-* being large enough to reduce the remaining area of the screen to 0?

@Kovensky

This comment has been minimized.

Show comment
Hide comment
@Kovensky

Kovensky Sep 19, 2017

@frivoal I'm not overly familiar with this but the most trivial guess would be that the insets should then be the difference between viewport-fit=cover and viewport-fit=contain. This is probably not the best way to go about it, but it definitely is the easiest way to ensure rectangular content is not clipped if it abides by the safe area.

Kovensky commented Sep 19, 2017

@frivoal I'm not overly familiar with this but the most trivial guess would be that the insets should then be the difference between viewport-fit=cover and viewport-fit=contain. This is probably not the best way to go about it, but it definitely is the easiest way to ensure rectangular content is not clipped if it abides by the safe area.

@jakearchibald

This comment has been minimized.

Show comment
Hide comment
@jakearchibald

jakearchibald Sep 19, 2017

Contributor

@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.

Contributor

jakearchibald commented Sep 19, 2017

@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.

@frivoal

This comment has been minimized.

Show comment
Hide comment
@frivoal

frivoal Sep 19, 2017

Contributor

the insets should then be the difference between viewport-fit=cover and viewport-fit=contain

the largest square that can be contained within the circle is the safe area, no?

These are the same thing, and this is a good idea. 👍

Contributor

frivoal commented Sep 19, 2017

the insets should then be the difference between viewport-fit=cover and viewport-fit=contain

the largest square that can be contained within the circle is the safe area, no?

These are the same thing, and this is a good idea. 👍

@jihyerish

This comment has been minimized.

Show comment
Hide comment
@jihyerish

jihyerish Sep 20, 2017

Contributor

the largest square that can be contained within the circle is the safe area, no?
I agree with this.

safe-area-inset-* is also useful for viewport-fit: contain.
If there is enough clipped area between the display and the safe area (largest rectangle which is inscribed in the display), an element positioned there can be rendered because UA paints the element outside of the viewport.
When positioning an element in the clipped area, safe-area-inset-* is used.

Contributor

jihyerish commented Sep 20, 2017

the largest square that can be contained within the circle is the safe area, no?
I agree with this.

safe-area-inset-* is also useful for viewport-fit: contain.
If there is enough clipped area between the display and the safe area (largest rectangle which is inscribed in the display), an element positioned there can be rendered because UA paints the element outside of the viewport.
When positioning an element in the clipped area, safe-area-inset-* is used.

@smfr

This comment has been minimized.

Show comment
Hide comment
@smfr

smfr Sep 20, 2017

Contributor

We decided on the call to list these UA-specified variables in Variables Level 2.

Contributor

smfr commented Sep 20, 2017

We decided on the call to list these UA-specified variables in Variables Level 2.

@qinyuhang

This comment has been minimized.

Show comment
Hide comment
@qinyuhang

qinyuhang Sep 23, 2017

It seems work like a px value. How's it work on rem while set html font-size of 48px?

qinyuhang commented Sep 23, 2017

It seems work like a px value. How's it work on rem while set html font-size of 48px?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment