`env() (safe-area-inset pentru ecrane cu decupaj)` în CSS

Funcții și unități CSS Chrome 69, Firefox 65, Safari 11.1

Citește valori definite de browser sau de dispozitiv, cum ar fi zonele ocupate de decupajul camerei sau de bara de gesturi a telefonului.

Sintaxă CSS

/* în HTML: <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> */

.bara-jos {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

Ce face `env() (safe-area-inset pentru ecrane cu decupaj)`

env() seamănă cu var(), dar valorile nu le definești tu, ci browserul. Cele mai folosite sunt safe-area-inset-top, -right, -bottom și -left: distanțele de la marginea ecranului până la zona sigură, neacoperită de decupajul camerei, colțurile rotunjite sau bara de gesturi.

Implicit, browserele mobile afișează pagina doar în zona sigură, așa că aceste valori sunt 0. Când adaugi viewport-fit=cover în meta viewport, pagina se întinde pe tot ecranul, iar env(safe-area-inset-*) primește valori reale pe care le folosești ca padding.

Al doilea argument este o valoare de rezervă, folosită când variabila nu există în browserul respectiv: env(safe-area-inset-bottom, 16px). Funcția se combină des cu max() sau calc().

Valori uzuale

Valoare	Descriere
`env(safe-area-inset-top)`	Distanța ocupată sus (decupajul camerei, bara de stare).
`env(safe-area-inset-bottom)`	Distanța ocupată jos (bara de gesturi pentru „acasă”).
`env(safe-area-inset-left / right)`	Distanțele laterale, importante în modul peisaj.
`env(nume, rezervă)`	Valoarea de rezervă folosită dacă variabila nu este definită.

Exemple

Exemplul 1: Bară de navigare fixă jos, deasupra barei de gesturi

Fără padding, butoanele din bară s-ar suprapune peste linia de gesturi a telefonului.

.navigare-mobil {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: space-around;
  background: #ffffff;
  padding-top: 8px;
  padding-bottom: max(8px, env(safe-area-inset-bottom));
}

Efect vizual în browser

Pe un iPhone cu bara de gesturi, meniul „Acasă / Comenzi / Coș / Cont” are un spațiu alb suplimentar sub iconițe, iar linia de gesturi nu mai acoperă butoanele. Pe un telefon fără bară de gesturi, padding-ul de jos rămâne 8px.

Exemplul 2: Antet colorat pe tot ecranul, cu textul ferit de decupaj

Fundalul trece pe sub decupajul camerei, dar titlul și butoanele rămân în zona sigură.

.antet-aplicatie {
  background: #7c3aed;
  color: #ffffff;
  padding-top: calc(env(safe-area-inset-top, 0px) + 12px);
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
}