Die Safe Area ist der Teil des Bildschirms, in dem Inhalte sicher stehen, weil ihn weder Systemelemente noch die Gehäuseform verdecken. Auf aktuellen Telefonen belegen Notch oder Dynamic Island den oberen Rand, unten liegt die Gestenleiste, und an den Ecken läuft das Panel in einem Radius aus. CSS macht die vier verbleibenden Abstände über die Umgebungsvariablen env(safe-area-inset-top), -right, -bottom und -left zugänglich.
- Safe Area
Bereich des Bildschirms, den weder Notch noch Systemleisten verdecken und in dem Inhalte sicher platziert werden können.
Beispiel: „Der Button klebte unter der Gestenleiste, bis wir die Safe Area berücksichtigt haben.“Herkunft: Apple hat den Bereich 2017 mit dem iPhone X eingeführt, dessen Bildschirm zum ersten Mal eine Aussparung für die Kamera hatte. Android-Geräte mit Display-Cutout melden dieselben Werte.
Achtung: Die Insets sind null, solange nichts in den Bildschirm hineinragt. Im Querformat wandern die Werte von oben und unten auf links und rechts.
Warum es den Bereich überhaupt gibt
Ein Telefonbildschirm ist längst kein sauberes Rechteck mehr. Die Kameraaussparung schneidet oben hinein, unten liegt die Leiste für die Wischgeste. Inhalt, der stur am Rand klebt, verschwindet dort teilweise oder wird unbedienbar, weil das Betriebssystem die Geste abfängt.
Die Safe Area beschreibt den Rest der Fläche. Das Gerät meldet für jede Seite einen Abstand in CSS-Pixeln, und dein Layout hält diesen Abstand ein. Bei einem Gerät ohne Aussparung sind alle vier Werte null, das Layout verhält sich dort also unverändert.
Wie du sie in CSS ansprichst
Zwei Dinge gehören zusammen. Erstens muss die Seite über die Meta-Angabe viewport-fit=cover erklären, dass sie den gesamten Bildschirm bespielen will, sonst bleiben die Insets bei null. Zweitens ziehst du die Werte über env() in dein Padding.
/* im Head: <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> */
.sticky-leiste {
padding-bottom: max(1rem, env(safe-area-inset-bottom));
padding-left: max(1rem, env(safe-area-inset-left));
padding-right: max(1rem, env(safe-area-inset-right));
}Der Umweg über max() sorgt dafür, dass der Innenabstand nie unter deinen gestalterischen Mindestwert fällt. Auf Geräten ohne Aussparung gewinnt das eine rem, auf dem iPhone der größere Inset.
Wo es in der Praxis schiefgeht
Am häufigsten trifft es Elemente, die am unteren Rand festkleben: Cookie-Banner, Bottom Sheets und fixierte Aktionsleisten. Sie werden im Entwurf am Ende des Viewports ausgerichtet und landen auf dem Gerät unter der Gestenleiste. Ein zweiter Klassiker sind Vollbild-Hintergründe mit Text in der Ecke, den der Eckradius anschneidet.
Dafür lohnt sich eine feste Regel: Jedes fixierte Element bekommt seinen Innenabstand über max() mit dem passenden Inset, und geprüft wird auf einem echten Gerät. In der Geräteansicht der Browser-Entwicklertools bleiben die Umgebungsvariablen meist bei null, der Fehler fällt dort also gar nicht auf.