Safari 27 hace personalizable el select nativo

Safari 27.0 salió el 16 de septiembre de 2026. Las notas de versión de Apple listan la compilación 27.0 (20625.1.29) para iOS 27, iPadOS 27, visionOS 27, macOS 27, macOS 26 y macOS Sequoia. El resumen de Web Standards, publicado el 17 de septiembre, cuenta 83 funciones nuevas.

La versión es ancha más que profunda: un cargador de módulos ES reescrito, maquetación en línea con precisión subpíxel, anclaje de desplazamiento que no hay que activar, la API de enrutamiento estático del service worker y una cola larga de correcciones de accesibilidad. Dos de las 83 funciones deciden qué puede dar por hecho un formulario insertado en la página de otra persona: un select nativo al que se le puede dar estilo y una forma de anunciar un mensaje sin una región activa.

El select nativo, ahora con estilo

El elemento select era el control al que menos estilo se le daba y el que más se sustituía. El select personalizable cambia esa aritmética. Aplicar appearance: base-select cambia el elemento a los nuevos valores por defecto del agente de usuario y desbloquea el resto de la función.

select,
select::picker(select) {
  appearance: base-select;
}

• ::picker(select) apunta a la ventana emergente y ::picker-icon a su flecha.

• ::checkmark apunta a la marca de la fila elegida.

• selectedcontent decide qué muestra el control cerrado para la opción actual, así que el resumen puede ser marcado y no una copia de la etiqueta.

• Una opción puede contener ahora HTML, así que puede llevar un icono o una etiqueta de dos líneas.

Nada de eso sustituye al control. Sigue siendo un control de formulario real, así que la navegación por teclado, la semántica para lectores de pantalla, el envío del formulario, la validación de restricciones y el evento change siguen funcionando. Un desplegable reconstruido con elementos div tira todo eso y luego reconstruye una versión peor. Optar por base-select no lo hace.

ariaNotify() sin región activa

Las notas de versión de Apple añaden compatibilidad con la API ariaNotify, que pone texto en cola para que un lector de pantalla lo anuncie sin una región activa de ARIA. En un formulario esto cierra una brecha concreta. Una región activa habla cuando cambia su contenido, así que un resumen de errores que repite la misma frase no produce cambio ni anuncio. ariaNotify() pone en cola el mensaje mismo.

El riesgo es el volumen. Un anuncio no es un mensaje de validación. Si un formulario insertado anuncia cada cambio de campo, quien usa un lector de pantalla oye un comentario continuo y se va de la página. Anuncia lo que la persona tiene que atender: el primer campo no válido después de Enviar, un envío que no pasó, un paso que acaba de abrirse.

Qué probar en un formulario insertado

• El select cerrado con una lista larga de opciones, en modo claro y oscuro.

• Un select dentro de la maquetación del propio componente generado, a 320px.

• Un resumen de errores que se anuncia una vez, no dos.

• El modo forced-colors, porque base-select trae sus propios valores por defecto.

El componente generado de FormFlow renderiza controles de formulario HTML nativos, así que los nuevos valores por defecto de Safari pueden llegar a un formulario insertado sin ningún cambio por nuestra parte. No hemos verificado el componente generado contra Safari 27 para este artículo, y no vamos a insinuar que lo hayamos hecho. Si insertas un formulario, renderízalo en las versiones de Safari que soportas antes de confiar en el aspecto por defecto.

Qué no decide esto

Que Safari lance el select personalizable no lo hace interoperable. El resumen de Web Standards dice que el nuevo diseño por defecto pasó al grupo de trabajo de CSS para seguir refinándolo, y que un punto de partida idéntico depende de que otros navegadores actualicen sus implementaciones. Un estilo que se ve bien en Safari 27 puede verse mal en otro motor el mismo día.

ariaNotify() es una adición del navegador, no un estándar de formularios. No decide qué anuncios son apropiados y no sustituye a una etiqueta, a un fieldset con un legend ni a un error visible junto al campo.

Nada de esto es una declaración de soporte de FormFlow para Safari 27, ni cambia cómo se comporta un formulario insertado en una versión de Safari que no trae estas funciones. Para el contrato POST al que envía el formulario insertado, lee la referencia de la API.