Safari 27 e iOS 27: qué cambia para su sitio web

Una parte de sus visitantes llega a su sitio con Safari, y puede ver su proporción en su propia analítica. Por eso cada versión de Safari importa para saber si una función nueva de CSS o HTML funcionará con visitantes reales. La entrada beta del blog de WebKit dio para Safari 27 una lista larga: select personalizable, posicionamiento de anclaje consciente de transformaciones, anclaje de desplazamiento, la pseudoclase :heading, revert-rule, la palabra clave stretch y más.

Por larga que parezca la lista, no necesita conocerla entera. La mayoría de las funciones facilita la vida de quien escribe el código del sitio; el visitante no las ve directamente y solo nota que las páginas se rompen menos. Como propietario, pregúntese qué parte de su sitio necesita alguna de ellas. La respuesta suele ser formularios y zonas de imágenes.

El blog de WebKit explica que con appearance: base-select las listas desplegables pueden estilizarse por completo. Una lista en la que se elige una ciudad, un servicio o una hora de cita puede dibujarse, por tanto, con los colores y la tipografía de su marca. El blog también indica que se conserva el comportamiento con teclado y lector de pantalla, lo que es un camino más tranquilo para la accesibilidad que sustituir la lista por un componente escrito desde cero.

No es una obligación. Si su lista actual funciona, déjela como está. La nueva función tiene más sentido para listas con aspecto propio que hasta ahora se imitaban con código. Nuestras fuentes no dicen si otros navegadores admiten esta función de la misma manera, así que haga que el diseño se construya de modo que, donde falte la función, vuelva a una lista sencilla.

En imágenes, lo más llamativo es el valor auto para el atributo sizes del elemento img. El blog de WebKit lo describe como el navegador calculando por sí mismo el tamaño de la imagen en las de carga diferida, lo que alivia la carga de escribir a mano un valor sizes para cada imagen. El anclaje de desplazamiento, también del blog, evita que el punto donde usted lee se desplace cuando más tarde se carga contenido por encima.

La lista siguiente reúne los puntos útiles para probar su sitio o para preguntar a su desarrollador. Puede medir antes y después qué efecto tienen los cambios de imágenes en la velocidad con la herramienta de velocidad de sitio de rabbitclip.

• Lista desplegable personalizable: campos de formulario acordes con la marca
• El valor auto para sizes en img: el navegador calcula el tamaño de las imágenes de carga diferida
• Anclaje de desplazamiento: la página no salta cuando se carga contenido por encima
• El elemento model: contenido 3D en iOS, iPadOS y macOS
• Novedades de nivel desarrollador como la API de enrutamiento estático de Service Worker, ReadableStream.from() y maxAge en la Cookie Store API

Citando el blog de WebKit, 9to5Mac informa de que Safari 27 incluye un servidor MCP local. Cuando la automatización remota está activada en los ajustes de desarrollador, los agentes de programación pueden usar la ventana del navegador. MCP es un protocolo de comunicación que permite a los agentes de IA conectarse con herramientas; aquí la herramienta es el propio Safari.

Para el propietario de un sitio, el significado directo es este: un agente también puede navegar por su sitio, y si un desarrollador lo ha activado para probar en su propio equipo, lo hace con un navegador real. Su desarrollador podría usarlo para probar sus formularios de forma automática; es una posibilidad, no una conclusión de las fuentes. La misma fuente menciona también un empaquetador de extensiones web de Safari que no necesita ni un Mac ni Xcode.

El primer error es poner una función nueva en el sitio en producción en cuanto se lee la noticia. Que una función ande en Safari 27 no significa que ande para todos los visitantes; algunos dispositivos se quedan en versiones anteriores. El segundo es sustituir una lista desplegable que funciona solo porque existe una nueva, y romper el formulario móvil.

El tercero es probar solo en el ordenador. El aspecto en un iPhone, el comportamiento con teclado y lector de pantalla y las zonas táctiles deben probarse por separado.

• Poner en producción una función nueva sin probarla
• Sustituir un componente que funciona solo porque es nuevo
• Probar únicamente en un navegador de escritorio
• No pensar en qué ocurre donde la función no es compatible

Si su sitio no tiene ningún campo de formulario con estilo propio, ni contenido 3D, ni una maquetación complicada, no hay nada que hacer por Safari 27. Para un sitio de presentación pequeño, el paso correcto es abrirlo una vez en un iPhone y revisar a simple vista el formulario y las imágenes.

Probar el elemento model para contenido 3D tampoco es para todos. Si una vista 3D de su producto no ayuda a vender, la función solo trae carga de mantenimiento. Mire primero qué quiere hacer el visitante y después elija la función.