Qué es Generador CSS safe-area-insets?
Los safe-area insets son variables de entorno CSS que ayudan a mantener el contenido alejado de los notch del teléfono, esquinas redondeadas de la pantalla, áreas del indicador de inicio y otros recortes de pantalla. Son útiles para aplicaciones web móviles, encabezados fijos, barras inferiores fijas y diseños de sangría completa.
Respuesta rápida
Genere reglas CSS de padding, margin o posición usando env(safe-area-inset-*) con valores de respaldo. Esto mantiene el contenido alejado de notch, esquinas redondeadas e indicadores de inicio en dispositivos móviles modernos.
Last updated: 2026-06-11
Limitaciones
- Las variables safe-area solo son relevantes en dispositivos móviles con notch y esquinas redondeadas.
- Un valor de respaldo es esencial. Sin él, los navegadores que no soportan env() usan cero.
- La meta tag viewport-fit=cover debe estar presente en el head HTML para que las variables funcionen en iOS Safari.
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
Cómo usar esta herramienta
- Elija si desea generar reglas de padding, margin o inset.
- Establezca un valor de respaldo para navegadores y pantallas que no necesitan espaciado especial de safe-area.
- Ingrese el selector que debe recibir el espaciado de safe-area.
- Copie la meta tag viewport y el CSS en su página, luego pruebe en un dispositivo móvil o simulador.
Para qué puedes usarla
- Mantener encabezados fijos y barras inferiores alejados de los recortes de pantalla.
- Agregar padding seguro a aplicaciones web móviles.
- Crear variables CSS reutilizables para el espaciado de safe-area.