La etiqueta HTML selectmenu | consejos CSS

Quiero presentarles un nuevo control de forma experimental llamado <selectmenu>. Profundizaremos en esto, incluyendo cuánto más fácil es peinar que un estilo tradicional. <select> elemento. Pero primero, expliquemos un poco por qué algo como <selectmenu> es necesario en primer lugar, porque siempre está evolucionando y desarrollándose.

Una captura de pantalla animada que muestra un elemento de menú seleccionado con emojis como opciones sobre un fondo verde azulado brillante.

Pregúntele a cualquier desarrollador web qué le falta a la plataforma web hoy en día, es probable que la capacidad de diseñar controles de formulario esté en su lista. De hecho, Form Style fue votado como uno de los 10 elementos faltantes en la encuesta State of CSS 2020. Más tarde fue investigado por Greg Whitworth, quien demostró que <select> fue el control que los desarrolladores web tuvieron más problemas de estilo con CSS.

Aunque es relativamente fácil diseñar la apariencia de la parte del botón de un <select> (lo que ve en la página cuando la ventana emergente está cerrada), es casi imposible diseñar las opciones (lo que ve cuando la ventana emergente está abierta), y mucho menos agregar más contenido a la ventana contextual.

Visualización de la interfaz de usuario predeterminada del elemento seleccionado en Safari.
La interfaz de usuario predeterminada para un <select> elemento en Safari

Como resultado, los sistemas de diseño y las bibliotecas de componentes implementaron sus propias listas de reproducción, creadas desde cero utilizando marcado HTML personalizado, CSS y, a menudo, mucho JavaScript, para tener algo que se integre bien con otros componentes.

Desafortunadamente, hacerlo bien con la semántica de accesibilidad, la compatibilidad con el teclado y el posicionamiento de las ventanas emergentes correctos no es fácil. Los desarrolladores web han pasado horas y horas a lo largo de los años tratando de resolver los mismos problemas una y otra vez, y hay muchas selecciones inalcanzables.

Es hora de que tengamos un estilo incorporado con el estilo adecuado <select> ¡así que nunca más tendremos que escribir ese código!

La iniciativa de interfaz de usuario abierta

El logotipo de Open UI, que es un óvalo verde con forma de tenedor redondeado con tres puntas en el interior.

Open UI es un grupo de desarrolladores, diseñadores e implementadores de navegadores que se propusieron solucionar este problema exacto y, mientras lo hacen, abordar también otros controles faltantes.

El propósito de Open UI es permitir que los desarrolladores web personalicen y amplíen los controles integrados de la interfaz de usuario (esto incluye

Subir

Esta página web utiliza cookies para analizar de forma anónima y estadística el uso que haces de la web, mejorar los contenidos y tu experiencia de navegación. Para más información accede a la Política de Cookies . Ver mas