-
-
Notifications
You must be signed in to change notification settings - Fork 71
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
add detection for env()
functions
#921
add detection for env()
functions
#921
Conversation
env()
functions
@@ -0,0 +1,7 @@ | |||
@media (min-height: calc((safe-area-inset-top) + 0.02px)) {} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Just curious here, why is it 0.02 and not 0.01 ? Is that the limit?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
0.02
is the smallest fraction that works well for some older Safari versions.
This is something that was tested by bootstrap and reported to postcss-media-minmax
.
Anything smaller than 0.02
is rounded away.
So 900.01 === 900
but 900.02 !== 900
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks a lot!!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM! Nice one!
Stuff like this should be supported in browsers :
@media (height > env(safe-area-inset-top)) {}
But I don't know how to test this in a browser to verify.
Anyone knows what the magic incantation is to get
env(safe-area-inset-top)
be not0
?https://w3c.github.io/csswg-drafts/css-env/#env-function:~:text=Because%20environment%20variables%20don%E2%80%99t%20depend%20on%20the%20value%20of%20anything%20drawn%20from%20a%20particular%20element%2C%20they%20can%20be%20used%20in%20places%20where%20there%20is%20no%20obvious%20element%20to%20draw%20from%2C%20such%20as%20in%20%40media%20rules%2C%20where%20the%20var()%20function%20would%20not%20be%20valid.