Estuve revisando las novedades de Safari 15 presentadas en la WWDC21.

La actualización llegaba a iOS, iPadOS y macOS, y traía cambios visuales que afectaban directamente a quienes desarrollamos webs.

Barra de navegación y theme-color

Safari 15 permitía que la barra del navegador se adaptara al color de una web.

Para indicarlo, se podía añadir una etiqueta en el <head>:

<meta name="theme-color" content="#ffffff">

Si una web usaba modo oscuro, también podía declarar colores distintos:

<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#111111" media="(prefers-color-scheme: dark)">

Si no se añadía esa metaetiqueta, Safari intentaba elegir un color automáticamente.

La idea era interesante, pero también obligaba a probar bien contrastes y legibilidad. Si el color elegido interfería con la usabilidad de los controles del navegador, Safari podía ajustarlo.

Esto conectaba con trabajos previos de diseño web como el modo oscuro y el cuidado de rendimiento visual que también afecta a PageSpeed.

La barra inferior en iOS

En iOS 15, Safari movía la barra de navegación a la parte inferior.

Era más cómoda para usar el iPhone con una mano, pero cambiaba una zona crítica de la pantalla.

Las webs con elementos fijos en la parte inferior podían tener problemas si no respetaban las zonas seguras.

Para eso entraban en juego valores como:

padding-bottom: env(safe-area-inset-bottom);

También era importante revisar el viewport:

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">

Y tener en cuenta otras zonas:

env(safe-area-inset-top)
env(safe-area-inset-left)
env(safe-area-inset-right)

Previsualizaciones y texto en imágenes

Safari 15 también añadía la posibilidad de usar vídeo en previsualizaciones compartidas mediante Open Graph:

<meta property="og:video" content="video.mp4">

Otra novedad llamativa era la selección de texto dentro de imágenes.

Esto abría preguntas interesantes para accesibilidad y SEO. Que el sistema pueda reconocer texto en una imagen no elimina la necesidad de usar buen contenido HTML ni atributos descriptivos, como ya comenté al hablar del atributo ALT.

Safari 15 fue una actualización que recordaba algo básico: los navegadores también cambian la interfaz de nuestras webs, no solo el motor que las renderiza.

Si quieres revisar una web para Safari móvil, zonas seguras, modo oscuro o metadatos sociales, puedes escribirme a ajra@ajra.es.