Ya hemos cubierto “The Notch” y las opciones para tratarlo desde una perspectiva HTML y CSS. Hay un poco más de detalles disponibles ahora, directamente de la boca del caballo:
Los insertos de área segura no reemplazan los márgenes.
… queremos especificar que nuestro relleno debe ser el relleno predeterminado o el recuadro de área segura, el que sea mayor. Esto se puede lograr con las nuevas funciones CSS min() y max() que estará disponible en una futura versión de Safari Technology Preview.
@supports(padding: max(0px)) {
.post {
padding-left: max(12px, constant(safe-area-inset-left));
padding-right: max(12px, constant(safe-area-inset-right));
}
}Es importante usar @supports para detectar características mínimas y máximas, porque no son compatibles en todas partes, y debido al tratamiento de CSS de las variables no válidas, para no especificar una variable dentro de su consulta @supports.
Las tomas calientes de Jeremey Keith han sido especialmente sabrosas, como:
Podrías agregar un montón de CSS patentado que Apple acaba de sacar de su trasero.
O puede asegurarse de establecer un color de fondo en su body elemento.
Recomiendo este último.
Y:
Este podría ser un artículo de una sola palabra: no lo hagas.
Más específicamente, no diseñe sitios web para ningún dispositivo específico.
Aunque si esto impulsa el apoyo hacia adelante min() y max() como funciones genéricas, eso es genial.
Enlace directo →