Qu'est-ce que Generateur CSS safe-area-insets ?
Les encarts de zone sure (safe-area insets) sont des variables d'environnement CSS qui aident a maintenir le contenu a l'ecart des encoches de telephone, des coins d'ecran arrondis, des zones d'indicateur d'accueil et autres decoupes d'affichage. Elles sont utiles pour les applications web mobiles, les en-tetes fixes, les barres inferieures collantes et les mises en page plein ecran.
Réponse rapide
Generez des regles CSS de padding, margin ou decalage de position utilisant env(safe-area-inset-*) avec des valeurs de fallback. Cela maintient le contenu a l'ecart des encoches de telephone, des coins d'ecran arrondis et des indicateurs d'accueil sur les appareils mobiles modernes.
Last updated: 2026-06-11
Limites
- Les variables d'encart de zone sure ne sont pertinentes que sur les appareils mobiles a encoche et les telephones avec coins arrondis ou indicateurs d'accueil. Les navigateurs de bureau et les anciens mobiles retournent zero pour toutes les valeurs de zone sure.
- Une valeur de fallback est essentielle. Sans fallback, les navigateurs qui ne supportent pas les variables env() utiliseront la valeur par defaut de zero, ce qui peut entrainer un chevauchement du contenu avec les bords de la page.
- La balise meta viewport-fit=cover doit etre presente dans l'en-tete HTML pour que les variables de zone sure produisent l'effet prevu sur iOS Safari. Sans elle, la page peut etre lettrisee.
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
Comment utiliser cet outil
- Choisissez si vous voulez generer des regles de padding, margin ou inset.
- Definissez une valeur de fallback pour les navigateurs et ecrans qui n'ont pas besoin d'espacement special pour zone sure.
- Saisissez le selecteur qui doit recevoir l'espacement de zone sure.
- Copiez la balise meta viewport et le CSS dans votre page, puis testez sur un appareil mobile ou un simulateur.
A quoi il sert
- Maintenir les en-tetes fixes et les barres inferieures a l'ecart des decoupes d'ecran.
- Ajouter un padding de securite aux applications web mobiles.
- Creer des variables CSS reutilisables pour l'espacement de zone sure.