feat: Add support for iOS safe area

[WarningImHack3r]

Add support for iOS' safe area environment variables to prevent the navbar from being hidden behind the iPhone's home bar.

It works using the official Webkit guide, which was originally made after the introduction of the iPhone X with iOS 11.
It exposes the env() CSS function with 4 variables (safe-area-inset-{top,left,right,bottom}), requiring viewport-fit=cover in the viewport meta tag to get rid of natural viewport margins (edit: apparently not needed from my testing, removed it - probably only required for the left/right variants?).

These environment variables are smartly populated by the system based on the current Safari layout, giving them a value granularly as needed.

Note

You might note my PR doesn't include the outdated constant() function, the previous name of env() between iOS 11.0 and 11.2 beta versions: the already low range of concerned versions combined with the ancient age of this major iOS version isn’t worth the effort, in my opinion.
It can, however, be easily added at will with @supports queries or CSS rules fallbacks after bypassing calc() calls.

On desktop, the env() function is (supposedly) undefined, invalidating the CSS lines using it, leading to no repercussions on desktop browsers or other mobile browsers. I've tested it on Arc / Chrome desktop in responsive mode and noticed no impact.

Demo

Before (old Safari layout/in-app browser)	After (old Safari layout/in-app browser)

After (old Safari layout/in-app browser - "unscrolled" state)	After (new Safari layout - not impacted)

---

A note on documentation PRs

If this is a documentation PR (i.e. changing content within apps/svelte.dev/content/docs), then this is the wrong repository to make those changes. The content in this folder is synced from other repositories. Therefore, these changes should be made in their respective repositories (at https://github.com/sveltejs/svelte or https://github.com/sveltejs/kit, or example).

Before submitting the PR, please make sure you do the following

• It's really useful if your PR references an issue where it is discussed ahead of time.
• Prefix your PR title with feat:, fix:, chore:, or docs:.
• This message body should clearly illustrate what problems it solves.

[vercel]

@WarningImHack3r is attempting to deploy a commit to the Svelte Team on Vercel.

A member of the Team first needs to authorize it.