Wat is CSS safe-area-insets generator?
Safe-area-insets zijn CSS-omgevingsvariabelen die helpen om inhoud weg te houden van telefooninkepingen, afgeronde schermhoeken, home-indicatorgebieden en andere display-uitsparingen. Ze zijn nuttig voor mobiele webapps, vaste koppen, sticky bottom bars en full-bleed layouts.
Snel antwoord
Genereer CSS padding-, margin- of positie-offset-regels met env(safe-area-inset-*) en fallback-waarden. Dit houdt inhoud weg van telefooninkepingen, afgeronde schermhoeken en home-indicatoren op moderne mobiele apparaten.
Last updated: 2026-06-11
Beperkingen
- Safe-area-inset-variabelen zijn alleen relevant op mobiele apparaten met inkepingen en telefoons met afgeronde hoeken of home-indicatoren. Desktop- en oudere mobiele browsers retourneren nul voor alle safe-area-waarden.
- Een fallback-waarde is essentieel. Zonder fallback gebruiken browsers die geen env()-variabelen ondersteunen de standaardwaarde nul, wat ervoor kan zorgen dat inhoud overlapt met paginaranden.
- De viewport-fit=cover meta-tag moet aanwezig zijn in de HTML-head voor safe-area-variabelen om het beoogde effect op iOS Safari te produceren. Zonder dit kan de pagina worden weergegeven met brievenbus-effect.
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
Zo gebruik je deze tool
- Kies of u padding-, margin- of inset-regels wilt genereren.
- Stel een fallback-waarde in voor browsers en schermen die geen speciale safe-area-afstanden nodig hebben.
- Voer de selector in die de safe-area-afstand moet krijgen.
- Kopieer de meta viewport-tag en CSS naar uw pagina en test vervolgens op een mobiel apparaat of simulator.
Waarvoor je het kunt gebruiken
- Houd vaste koppen en onderste balken weg van schermuitsparingen.
- Voeg veilige padding toe aan mobiele webapps.
- Maak herbruikbare CSS-variabelen voor safe-area-afstanden.