Si desarrollas para el ecosistema de Apple, Safari es mucho más que un simple navegador: es una pieza clave para crear experiencias web rápidas, seguras y con una integración profunda en iOS, iPadOS, macOS, tvOS y xrOS. Apple lleva años añadiendo tooling, APIs y tecnologías específicas para que, sin salir del navegador, puedas depurar, probar diseños responsive, automatizar tests y conectar tu web con tus apps nativas.
En este artículo vamos a hacer un repaso a fondo por los recursos más útiles de Safari para desarrolladores web: desde extensiones, enlaces universales y banners inteligentes, hasta Web Inspector, modo de diseño adaptable, WebDriver, nuevas capacidades CSS, soporte multimedia avanzado y todo el ecosistema de herramientas para experimentar con las últimas funciones de WebKit.
Safari como plataforma para desarrolladores web
Safari es el navegador por defecto en iPhone, iPad y Mac, y destaca por su alto rendimiento y eficiencia energética, algo crucial en dispositivos móviles y en entornos como visionOS/xrOS. Para los desarrolladores, esto se traduce en un objetivo claro: diseñar sitios y apps web que sean rápidos, accesibles y respetuosos con la privacidad, aprovechando las APIs propias del navegador sin sacrificar compatibilidad.
El motor de renderizado de Safari es el proyecto WebKit, un proyecto abierto que Apple impulsa desde hace años y que sigue incorporando las especificaciones web más avanzadas en animación, diseño, tipografía y medios. La mayoría de novedades que ves en las últimas versiones de Safari vienen directamente de mejoras en WebKit.
Además del propio navegador, Apple proporciona documentación técnica, vídeos de la WWDC y ejemplos que explican cómo usar cada nueva característica: desde CSS de última generación hasta APIs como WebGPU, notificaciones web declarativas o mejoras en privacidad.
Extensiones, enlaces universales y banners inteligentes
Las extensiones de Safari permiten añadir funcionalidades personalizadas al navegador reutilizando tecnologías web: HTML5, CSS3 y JavaScript, integradas con APIs nativas gracias a Xcode. Puedes empaquetar tus extensiones como apps y distribuirlas en la App Store para Mac, iPhone y iPad, monetizándolas igual que cualquier otra aplicación.
Para conectar la web con tus apps nativas, Apple ofrece los enlaces universales (Universal Links). Con ellos, un enlace HTTP estándar puede abrir contenido directamente dentro de tu app en iOS, iPadOS y macOS si está instalada; si no, el usuario sigue navegando en la web sin romper el flujo. Todo se configura mediante ficheros JSON alojados en tu dominio y la correspondiente configuración en Xcode.
Otra pieza clave son los Smart App Banners. Se trata de una franja discreta en la parte superior de la página que invita al usuario a abrir o descargar tu app desde el App Store. Si ya la tiene instalada, tapear el banner lanza la app; si no, lo lleva directamente a su ficha. Implementarlos es tan simple como añadir una meta tag en el HTML con el identificador de tu app.
En materia de contenido multimedia, Safari soporta HTTP Live Streaming (HLS), el sistema de Apple para servir vídeo adaptable usando servidores web estándar. Puedes entregar streams a apps nativas en iOS/iPadOS y a webs HTML5, beneficiándote de adaptative bitrate, cifrado y compatibilidad con la infraestructura de vídeo actual.
Autenticación, notificaciones y automatización de pruebas
La integración con iCloud Keychain permite que tus formularios de login se beneficien de relleno automático seguro y códigos de verificación sin que tengas que montar soluciones complejas. En iOS 15, iPadOS 15, macOS Monterey y posteriores puedes apoyarte en los códigos de verificación de iCloud Keychain y su sincronización para simplificar procesos de autenticación en varios pasos.
Safari también admite notificaciones push para sitios web en macOS, usando Apple Push Notification service (APNs). Con esta función puedes enviar avisos a usuarios que hayan dado permiso, incluso cuando Safari no está abierto. Las notificaciones muestran el icono de tu sitio y el texto que definas, y al hacer clic, el usuario aterriza en la URL que elijas.
En el terreno del testeo automático, Safari implementa WebDriver, un estándar multiplataforma para automatizar navegadores. Gracias a WebDriver puedes escribir tests que interactúan con tu sitio como lo haría un usuario real: clicar, escribir, ejecutar JavaScript, capturar pantallazos o consultar roles de accesibilidad, y reutilizar los mismos scripts contra otros navegadores con drivers compatibles.
Estas pruebas suelen orquestarse con librerías como Selenium, que ofrecen bindings en lenguajes como Python, Java, JavaScript o PHP. Safari expone un servidor WebDriver local que acepta comandos vía HTTP, lo que simplifica la integración con pipelines de CI/CD y suites de testing existentes.
Menú Desarrollo de Safari y Web Inspector
Si creas o mantienes sitios web, el menú Desarrollo de Safari es tu puerta de entrada a un conjunto de herramientas avanzadas para depurar e inspeccionar contenido. Desde ahí puedes abrir el Web Inspector, activar el modo de diseño adaptable, conectar simuladores o dispositivos reales y gestionar flags de características experimentales.
El menú Desarrollo no viene activado de serie. Para mostrarlo, en Mac debes ir a Safari > Ajustes (o Configuración), abrir la pestaña Avanzado y marcar la casilla “Mostrar funciones para desarrolladores web”. Con eso aparecerá un nuevo menú “Desarrollo” en la barra superior, y varias secciones extra en los ajustes del navegador.
Web Inspector es el panel central de depuración. Puedes abrirlo desde el menú Desarrollo con la opción “Mostrar Web Inspector” o usando el clic con Control (botón derecho) sobre cualquier elemento y eligiendo “Inspeccionar elemento”. Esta última opción abre el inspector con el nodo HTML correspondiente ya seleccionado, mostrando sus estilos, layout, accesibilidad y demás detalles.
Dentro del inspector encontrarás pestañas para la estructura del DOM, reglas CSS activas, red, consola JavaScript, almacenamiento, performance y más. La herramienta de selección de elementos te permite ir pasando el ratón por el contenido para ver márgenes, paddings, outlines de formas y roles de accesibilidad, lo que acelera muchísimo la corrección de estilos o problemas de layout.
Modo de diseño adaptable y pruebas en simuladores
Safari incluye un modo de diseño adaptable (Responsive Design Mode) pensado para comprobar cómo se ajusta tu web a diferentes tamaños de pantalla. Accedes a él desde el menú Desarrollo con la opción “Entrar en el modo de diseño adaptable”. El navegador abre tu página dentro de un marco ajustable, con controles para ancho, alto y escala.
Al arrastrar los tiradores laterales, puedes simular viewports mucho mayores o menores que tu ventana real, mientras Safari reescala la vista y fuerza el reflow de textos, imágenes y layouts. También puedes introducir manualmente el ancho y alto exactos que quieras probar, y ver el factor de escala al que se está renderizando la página.
El modo adaptable permite modificar el ratio de píxeles del dispositivo, algo esencial para testear assets de alta densidad (2x, 3x) y media queries de resolución. Entre las opciones sugeridas: usar srcset en imágenes, la función image-set en CSS y consultas de resolución para ajustar bordes, iconos u otros detalles según la densidad de pantalla.
Desde el propio Safari en macOS puedes abrir tu web en simuladores de iOS, iPadOS y xrOS. Una vez tengas Xcode instalado y ejecutado al menos una vez, se habilita la opción “Abrir con Simulador” en el menú Desarrollo. Esto te deja elegir entre los simuladores instalados o en ejecución y lanzar la página actual directamente en el Safari de ese entorno simulado.
Los simuladores no solo replican dimensiones de pantalla, sino también comportamientos específicos de cada plataforma, como el desplazamiento suave, el doble toque para hacer zoom o los patrones de usabilidad de iPhone, iPad y dispositivos xrOS. Además, puedes usar Web Inspector desde tu Mac para inspeccionar páginas abiertas en el simulador, igual que harías con Safari en macOS.
Depuración remota en iPhone, iPad, tvOS y xrOS
Más allá de los simuladores, Safari permite inspeccionar contenido que se está ejecutando en dispositivos físicos conectados a tu Mac, ya sea un iPhone, un iPad, un Apple TV (tvOS) o un dispositivo con xrOS. Esto incluye tanto páginas abiertas en Safari como web apps en la pantalla de inicio y hasta service workers asociados.
En iOS y iPadOS, para habilitar la inspección remota tienes que ir a Ajustes > Safari > Avanzado y activar la opción Web Inspector. Después conectas el dispositivo al Mac con un cable, y en el menú Desarrollo de Safari en macOS aparece el dispositivo con la lista de contenidos inspeccionables. Seleccionas la página o app que quieres depurar y se abre un Web Inspector específico para ese contexto.
Si te molesta usar cable todo el rato, puedes activar la opción “Conectar mediante red” en el menú Desarrollo, lo que permite que el Mac se comunique con el dispositivo a través de la misma red Wi‑Fi. Una vez emparejado, podrás desenchufar el cable y seguir depurando de forma inalámbrica mientras ambos estén en la misma red local.
En xrOS el proceso es parecido, pero el emparejamiento se basa desde el principio en la red. Tienes que entrar en Ajustes > Apps > Safari > Avanzado, activar Web Inspector y luego, desde Ajustes > General > Dispositivos remotos, dejar visible la pantalla de emparejamiento. Desde tu Mac, en Safari, usas el menú Desarrollo para seleccionar “Usar para desarrollo” y introduces el código de seis dígitos que ves en el casco o dispositivo xrOS. Una vez pareado, podrás inspeccionar webs en xrOS de la misma manera que en iOS.
Un detalle interesante es que incluso en xrOS se soporta un modo de selección de elementos: entras en el modo de selección en Web Inspector, miras al nodo que quieres sobre la página y realizas un gesto de pellizco para seleccionar, lo que envía ese elemento de vuelta al inspector del Mac.
Web content dentro de apps nativas: WKWebView y JSContext
Más de un millón de apps en las plataformas de Apple incorporan contenido web o JavaScript incrustado para partes de su interfaz o lógica. Safari y WebKit proporcionan APIs para hacer ese contenido inspeccionable incluso en versiones de producción, tanto si usas WKWebView como si ejecutas JavaScript en JSContext.
Desde macOS 13.3, iOS y iPadOS 16.4 y posteriores, así como en xrOS, existe API para marcar tus webviews y contextos de JS como depurables. Puedes asignar nombres descriptivos a cada JSContext, que aparecerán luego en el menú Desarrollo de Safari, facilitando identificar en qué parte de la app estás inspeccionando.
Una vez la app activa la inspección, esos contextos se muestran en el menú Desarrollo igual que cualquier otra página web, y se abren con Web Inspector. Esto permite debuggear HTML, CSS y script integrados en tu app nativa con las mismas herramientas que ya conoces del navegador, sin tener que recurrir a soluciones ad hoc.
Nuevas capacidades CSS en Safari y WebKit
Apple está empujando con fuerza las capacidades de CSS en WebKit. Uno de los campos donde más se ha invertido es la animación. Safari 19 incorpora las animaciones ligadas al desplazamiento (scroll-linked animations), que permiten sincronizar animaciones con el scroll solo con CSS, sin necesidad de JavaScript.
El concepto clave aquí son las líneas de tiempo. Por defecto, las animaciones CSS progresan con el tiempo, pero ahora puedes usar líneas de tiempo basadas en scroll como scroll() o en la visibilidad de la vista, como view(). Con scroll() se pueden crear barras de progreso que crecen mientras el usuario recorre la página; view() permite disparar animaciones cuando los elementos entran en el viewport y detenerlas en un rango específico con la propiedad animation-range.
Safari ha puesto especial énfasis en la accesibilidad del movimiento. Se anima a que, antes de implementar efectos vistosos, se valore el impacto en personas sensibles al mareo o con trastornos vestibulares. La recomendación es adaptar o desactivar las animaciones intensas cuando el usuario tenga configurada la preferencia de “reducir movimiento”, apoyándose en media queries como prefers-reduced-motion.
Otra novedad potente son las transiciones de vista entre documentos (view transitions), introducidas en Safari 18 y ampliadas en 18.2. Estas transiciones permiten suavizar el cambio entre páginas completas capturando instantáneas antes y después del cambio y animando entre ellas. Basta con definir @view-transition y establecer navigation: auto para obtener un fundido básico sin escribir JavaScript.
Para efectos más avanzados, como deslizamientos de página, puedes jugar con los pseudo-elementos view-transition-old y view-transition-new y asociarlos a un view-transition-name. De nuevo, se anima a encapsular los efectos más agresivos en consultas de medios de movimiento reducido, de forma que solo se ejecuten si el usuario no ha pedido menos animación.
Posicionamiento de anclaje y popovers en CSS
En el área de layout, Safari incorpora el posicionamiento de anclaje, pensado para facilitar la creación de menús contextuales, tooltips y popovers que respondan bien a cambios de viewport sin recurrir a JavaScript. Esta funcionalidad se combina con la API de popover nativa de HTML para mostrar/ocultar elementos flotantes.
El flujo típico: defines un elemento que actuará como ancla, por ejemplo el botón de foto de perfil, y le asignas un anchor-name con un nombre propio (que debe empezar por dos guiones). Luego, el menú que quieres mostrar se convierte en el objetivo, se le aplica position-anchor con el nombre del ancla y se especifica su área de posición con la propiedad position-area.
El área de posición se imagina como una cuadrícula de 3×3 en torno al ancla: arriba, centro, abajo; izquierda, centro, derecha. Con valores como bottom center o bottom span-right puedes ubicar el menú justo debajo del avatar, alineado al centro o extendido hacia la derecha, ajustando la alineación visual sin quebraderos de cabeza.
Para mejorar la adaptabilidad, la propiedad position-try permite declarar posiciones alternativas si la principal no encaja en pantalla. Entre los valores posibles están palabras clave como flip-inline o flip-block, que indican al navegador que invierta el eje inline o de bloque para buscar otra colocación que no se corte en pantallas estrechas u orientaciones diferentes.
En paralelo, la función anchor() ofrece un control más granular: en lugar de cuadrículas, alineas lados concretos del objetivo con los del ancla, combinando anchor(bottom), anchor(left), etc., con calc() y unidades relativas como em. Esto viene muy bien para animar entre varias posiciones o usar varios anclajes a la vez, cuando los casos de uso se complican.
Efectos visuales avanzados: background-clip, shape() y tipografía
En el terreno visual, Safari lleva años permitiendo rellenos avanzados con background-clip: text, que deja rellenar el texto con degradados o imágenes en lugar de un color liso. Para usarlo, se aplica un background-image (degradado o imagen), se establece background-clip: text y se hace el color del texto transparente, dejando ver el fondo solo dentro de las letras.
Ahora, WebKit extiende el concepto a los bordes con background-clip: border-area. Esto permite que el degradado o imagen se aplique únicamente en el área del borde, creando botones y marcos con bordes degradados, círculos de progreso o incluso efectos de doble marco con fotos. Es fundamental ajustar background-origin al área del borde para evitar que el degradado se repita de forma rara dentro del contenido.
En cuanto a formas, la función shape() llega a Safari 18.4 para complementar a path(). Mientras path permite dibujar formas SVG complejas pero no responde bien a cambios de viewport, shape() está pensada para crear formas adaptables donde solo ciertas partes escalan. Puedes combinar unidades como porcentajes, unidades de consulta de contenedor y calc() para mantener ángulos y curvas mientras la longitud y altura varían con el ancho disponible.
Esto resulta ideal para fondos con flechas, burbujas de diálogo y otras decoraciones que deben mantenerse reconocibles en pantallas grandes y pequeñas. Al usar shape() en propiedades como clip-path, consigues que las siluetas conserven su carácter visual mientras se adaptan a layouts fluidos.
En tipografía, Safari 19 introduce text-wrap: pretty, una pequeña joya para pulir el aspecto de párrafos largos. En lugar de exprimir cada línea hasta el máximo ancho disponible, esta opción busca un rango de longitudes de línea más agradables a la vista, evitando que queden palabras sueltas muy cortas al final o varias líneas seguidas rotas con guiones.
Con text-wrap: pretty el navegador intenta que la “silueta” del margen derecho del texto quede más uniforme, reduce la aparición de viudas y huérfanas y utiliza la silabación de forma más contenida. Es una característica de mejora progresiva: si el navegador no la soporta, el contenido sigue viéndose bien con el comportamiento estándar.
Iconos SVG, imágenes HDR y control del rango dinámico
En medios estáticos, Safari incorpora soporte para faviconos en formato SVG, algo que muchos desarrolladores reclamaban. Gracias a esto, puedes definir un solo recurso vectorial que se ve nítido en marcadores, página de inicio de Safari, dock y otros contextos, con tamaños y escalados diferentes. Además, los SVG suelen pesar menos que los PNG equivalentes.
Otro salto importante son las imágenes HDR (High Dynamic Range), que Safari añade a su soporte multimedia tras años admitiendo vídeo HDR desde Safari 14. Las imágenes HDR, normalmente en formatos como HEIC o AVIF, ofrecen más bits por canal (10-16 frente a los 8 del SDR) y se benefician de espacios de color más amplios como Display P3, dando como resultado colores más vivos, sombras más profundas y luces más brillantes.
El problema práctico es que, junto a imágenes SDR, las HDR pueden destacar demasiado, por ejemplo, en listados de resultados o galerías mixtas. Para gestionar esto, Safari introduce la propiedad CSS dynamic-range-limit, que te permite ajustar el rango dinámico efectivo del contenido HDR.
Con dynamic-range-limit: none (valor por defecto), se respeta el brillo completo. Con dynamic-range-limit: standard, las imágenes y vídeos HDR se renderizan como si fueran SDR, igualando el nivel global. Un valor intermedio, dynamic-range-limit: constrained, busca mantener el beneficio visual del HDR sin que el recurso “grite” respecto a los demás, aunque este modo aún no está disponible en la beta de Safari 19.
Si el navegador no soporta HDR, no es necesario duplicar assets: el propio navegador se encarga de hacer un mapeo de tono del contenido HDR a SDR, por lo que puedes servir una sola imagen HDR de máxima calidad y confiar en que se verá razonable en entornos antiguos.
Más formatos de medios, MediaRecorder y web espacial
Safari ha ido ampliando su lista de códecs y contenedores soportados para que puedas usar formatos modernos y eficientes. Entre otros, se soportan JPEG XL y HEIC en la web, y en Safari 19 se añaden Ogg Opus y Ogg Vorbis, elevando a unos quince los formatos de medios admitidos entre audio e imagen.
En Safari 18.4 se cierra una brecha importante añadiendo soporte para WebM en la API MediaRecorder, lo que significa que tus apps web pueden grabar vídeo o audio en tiempo real y exportar archivos WebM con códecs como VP8/VP9 para vídeo y Opus para audio, tanto en Safari como en vistas WKWebView.
De cara a la web espacial, Apple ha trabajado en la renderización estereoscópica de modelos 3D y la reproducción de vídeos envolventes directamente en Safari, sin plugins extra. Esto habilita experiencias donde modelos 3D y contenido 2D conviven en la misma página, especialmente relevantes en xrOS. Apple promete más capacidades, como entornos tridimensionales completos integrables en tu web.
En las sesiones específicas de la WWDC sobre web espacial se explican patrones recomendados para integrar modelos, gestionar performance y ofrecer interfaces cómodas para el usuario final, todo apoyado en WebKit y Safari como base.
Feature Flags, Safari Technology Preview y recursos de referencia
Para experimentar con tecnologías de la plataforma web antes de que lleguen al Safari estable, Apple ofrece las opciones de conmutación de funciones (feature flags) y la app Safari Technology Preview, que se actualiza cada dos semanas con lo último de WebKit.
Los feature flags se abren desde el menú Desarrollo eligiendo “Conmutación de funciones” o “Feature Flags”. En esa ventana verás las características agrupadas por tema (Animación, CSS, JavaScript, Medios, etc.), con buscador y un indicador de estado: Stable, Testable, Preview o Developer Features. Cada flag puede activarse o desactivarse con una simple casilla.
Las funciones en estado Stable son las que acaban de empezar a enviarse de forma predeterminada y se mantienen temporalmente conmutables para diagnosticar problemas o probar retrocompatibilidad. Las Testable son prototipos en desarrollo pensados para recabar feedback temprano y ajustar los estándares. Las Preview están lo suficientemente maduras para que los desarrolladores las prueben con fuerza; vienen desactivadas en Safari normal pero se activan por defecto en Safari Technology Preview.
También hay banderas clasificadas como Developer Features, pensadas para comportamiento de desarrollo o para reactivar APIs obsoletas temporalmente. Apple recuerda que los flags se restablecen a sus valores por defecto con cada actualización de Safari, y que la configuración por defecto representa cómo verán tu contenido la mayoría de usuarios.
Además de estas herramientas, Apple mantiene notas de versión detalladas de Safari y WebKit en webkit.org, artículos sobre “Lo nuevo en Safari” por cada gran versión y documentación en profundidad del Web Inspector. Para saber qué soporta exactamente cada versión de Safari, se recomienda consultar caniuse.com, y si quieres ir siempre por delante, descargar Safari Technology Preview desde la web oficial.
Ajustes avanzados de Safari para desarrollo y privacidad
Dentro de los ajustes avanzados de Safari hay varias opciones útiles tanto para desarrolladores como para usuarios avanzados. Por ejemplo, puedes hacer que el campo de búsqueda inteligente muestre la URL completa del sitio en lugar solo del dominio, algo práctico cuando quieres ver rápidamente rutas completas como www.apple.com/es/safari/ en vez de apple.com/es.
También puedes definir un tamaño de letra mínimo para el texto de las páginas web, lo que evita tipografías diminutas que fuerzan la vista. Apple sugiere valores como 12 o 14 puntos si tienes dudas, aunque avisa de que esta configuración puede cambiar la apariencia de algunos sitios.
Otra opción interesante es permitir que la tecla Tab recorra todos los elementos interactivos de una página (enlaces, botones, etc.), algo clave para mejorar la navegación con teclado. A nivel de privacidad, tienes herramientas para aplicar medidas avanzadas de protección antirrastreo y protección de huella digital, bien solo en navegación privada o en toda la navegación, limitando la capacidad de seguimiento de terceros.
Safari también dispone de ajustes finos relacionados con Apple Pay y Apple Card, permitiendo que sitios compatibles comprueben si el usuario tiene Apple Pay configurado en su Mac, iPhone o Apple Watch, o si dispone de Apple Card. Todo esto se puede revocar desde Ajustes > Avanzado, desactivando la casilla “Permitir que los sitios web comprueben si Apple Pay y Apple Card están disponibles”, manteniendo así un control claro sobre qué datos expone el navegador.
Otros controles avanzados incluyen el bloqueo total de cookies (aunque puede romper funcionalidades en muchos sitios), la posibilidad de compartir de forma anónima URLs destacadas con Apple para mejorar productos, el guardado automático de artículos para lectura sin conexión, el uso de una hoja de estilo propia en lugar de la del sitio, la elección de codificación por omisión para evitar textos corruptos y la configuración de proxies para salir a internet a través de firewalls corporativos.
Combinando todas estas capacidades —extensiones, APIs de integración con apps, herramientas de inspección, soporte CSS de última generación, mejora continua en medios y una batería de ajustes avanzados y banderas experimentales—, Safari y WebKit ponen en manos de los desarrolladores un ecosistema muy completo para diseñar, probar y pulir experiencias web de alto nivel dentro del universo Apple, con un foco constante en rendimiento, accesibilidad y privacidad del usuario.
