Safe Areas with CSS Environmental Variables

[00:00:00]
>> Maximiliano Firtman: Safe areas, this is a problem that we already have in our app. By default now we have in browsers non-safe areas. That I'm not sure if you have encountered this before as a web developer. Because while you are working in the browser, you don't care about this, because the browser interface takes care of that.

[00:00:26]
But now we are the app, we are in a standalone app, we need to care about that. Look at this at the bottom, let me do this so we can see. I have a button here Learn that opens actually frontendmaster.com, and you can see that it opens in a browser because it's a different scope, okay?

[00:00:49]
So I'm still in the Codepad M app, but I have an inner browser there, so it happens on Android and iOS and desktop. But I have a problem when-, let's reload the app, oops.
>> Maximiliano Firtman: At the bottom you can see that that button is on top of that line that is actually part of the gesture.

[00:01:16]
And it's not just a a visual problem, it's actually a clickable area problem. There is a whole area here that is not actually clickable, so the user won't be able to touch there, that makes sense. So I need to somehow move that, and we can do that with CSS Environmental Variables.

[00:01:40]
>> Maximiliano Firtman: So there are some constants available with M function safe area in the top right, bottom left. So we can apply that to, you need to find the HTML element, the selector that you want to apply this to, okay, makes sense? And that happens also at the left and right when you are in landscape.

[00:02:02]
So you need to find a container and apply this. So we need to go here and find-, when you go to the index.html, I have a form, I have a toolbar, I have a note. I can apply maybe to the body first and then start playing with this.

[00:02:21]
So I just copy and paste, I think you have it also in the snippets to copy and paste.
>> Maximiliano Firtman: By the way, this has one margin, okay, one margin declaration. There is no comma here, so the colon is at the end, if you are defining the four margin, okay?

[00:02:40]
Maybe body is not the best place, because colors will not be right, just to see if that works,
>> Maximiliano Firtman: By the way, it's not taking many change, you say why.
>> Maximiliano Firtman: So I'm killing the app, I'm opening the app again it's not taking my change.
>> Student 1: CSS file is cached.

[00:03:05]
>> Maximiliano Firtman: CSS file is cached, forever actually forever. Do we have any way to update that? No if you want a way delete and install the app again. When we're using cache first, if we don't have any button or something now our UI, they will do that forever. That's why for now, I'm going to comment this, because, we didn't finish our app, okay while debugging.

[00:03:38]
And remember I mentioned that Chrome has better debugging tools. So on Chrome, I have this update on reload but not on iOS. I don't have a way to force a reload. So I need to go install the app again.
>> Maximiliano Firtman: And this new version should take my change, okay?

[00:03:59]
Actually, I'm not sure if it's taking it anyway. I shouldn't apply it to the body. So I have, let's see. Also I'm replacing this here, that's why it's not working. But believe me, before it was because of the service worker. So I have another body declaration, okay? That is replacing the 0 with 0.

[00:04:21]
So it was replacing my declaration with 0, okay? Things like that, now should I reinstall it? I don't have cache first, so no, I should just reopen, yeah. Something when you're doing this, when you're develop, why you are developing maybe it's a good idea to create a Refresh button within your UI, that's just called JavaScript Reload.

[00:04:44]
Okay, so then you can reload directly from the PWA interface, okay make sense? It's just that, not a big deal. Also, what happens with, is every browser supporting that? Well what happens if there is no safe area? For example, if you open this in the browser, browsers typically don't have the safe problem.

[00:05:07]
This has to do with mobile devices, with rounded corners, and things like that. The margin will be zero and maybe you don't want zero, you want a minimum. Okay, I want a minimum margin. So then you can apply a second argument that is the default value. And what happens if a browser doesn't support safe areas?

[00:05:32]
It's not common these days, but then you provide two margin declaration. I'm not sure if you know this in CSS, it's a CSS rule, you can put two values, and the browser will take the last one that is that has valid values. So if the browser is not supporting the M function, it will ignore it, and it will keep the previous one, anyway.

[00:05:56]
Something that is I mean, it's not so important, to be honest, but if you're doing PWA, sometimes we will find this problem. Devices with a Notch. When they have a notch, also you have the problem of safe areas, but we can solve that with safe areas, the problem is that when you go landscape.

[00:06:15]
When you go landscape, the problem is that by default, the viewport goes only in the safe area. And what you see here will be your background color.
>> Maximiliano Firtman: Okay, that you define in the manifest. But if you have an image the image is not taking the whole width, does that make sense?

[00:06:39]
Well, to solve the problem, because your content is only there, so your body in CSS is that one. The rest is outside of your viewport, outside of your Canvas. You cannot render content only on landscape. So that's why you can ask for cover viewport, and then you save areas to again add those margins.

[00:07:05]
What is cover viewport? It's just an addition that you add to your viewport metadata, it's viewport fit cover. In this case you are saying you know what, I wanna take always 100% of the viewport even if it's not safe, I don't care. But I wanna have 100% of the canvas.

[00:07:25]
So when you do that, then now your content will take the whole available space. And the problem if you do that is that by default now, if you are rendering a calculator, that calculator is behind the notch. To solve a problem, you are margin, using the safe areas we mentioned before, yeah.

[00:07:51]
>> Student 2: How does a safe area interact with the keyboard area?
>> Maximiliano Firtman: That's interesting, the keyboard is always, let me answer that, it depends on the platform. On IOS, the keyboard is always over your PWA, so it's not moving your PWA. When you're doing native apps, you have control of what you wanna do, but not here.

[00:08:16]
On Android, there is an API that will help you with that, let me show you the API. And the API also adds some CSS property, it's called the virtual keyboard API. Does anyone know that that one existed? The virtual keyboard API, full control with the virtual keyboard API.

[00:08:35]
Let's go to the Chrome website. So then it's actually exactly what you were asking, okay? So if you wanna render elements on your PWA on top of the keyboard or above the keyboard when the keyboard appears and so on. Well, you have an API in JavaScript, so you can see here how it works and some events.

[00:08:56]
You can specify if you want to overlay the content or not. And also you have some CSS environmental variables that will tell you if the keyword is there or not, and vice versa. It's not yet available in Safari, I think that Safari should implement it that at any time, but not yet.

[00:09:14]
Well, important Apple had many meta tags available for web apps before the web manifest spec was created. Okay, we mentioned a couple, we saw that PWA compact was adding some of them, don't add those meta tags if you don't know what they are actually doing. We already mentioned that, I gave you already the warning spoiler before, but one that I will show you now, it's full screen in iOS, it's kind of an old hack that still works.

[00:09:43]
Remember I mentioned that we don't have full screen on iOS, on iOS, it's only standalone, the display mode only standalone. But using Apple mobile web app-status-bar-style, black-translucent, exactly that. What will happen is that you will take 100% of the space for you, but the status content will actually be on top of it.

[00:10:11]
So in this case, you can see the clock and you can see the battery status and all the icons will appear, they will appear, but now you can render from the top content, okay? It's kind of a full screen, in Android, the status bar disappears completely, so you don't see the clock, okay you don't see the hour [COUGH].

[00:10:32]
So it's kind of a hack that has been since forever on iOS. With Web M manifest spec, there is no way to actually implement that.