CSS

Etiqueta HTML en el menú de selección trucos CSS

Quiero presentarles un nuevo control experimental de la forma llamado <selectmenu>Profundizaremos en esto, incluido lo mucho más fácil que es peinar que el estilo tradicional. <select> Pero primero, llenemos un poco de contexto sobre por qué algo como esto <selectmenu> se necesita en primer lugar, ya que todavía está evolucionando y evolucionando.

Pregúntele a cualquier desarrollador web qué cree que le falta a la plataforma web hoy, existe la posibilidad de que los controles de estilo en el formulario estén en su lista. De hecho, la estilización de la forma fue votada como una de las 10 cosas que más faltan en El estado de la encuesta CSS en 2020Luego fue investigado más a fondo por greg whitworth Quién mostrado que <select> fue el control que los desarrolladores web tuvieron más problemas con el estilo CSS.

Aunque es relativamente fácil diseñar la apariencia de la pieza con los botones 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 emergente.

Muestra 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 introducen sus propios elementos personalizados creados desde cero utilizando marcado HTML personalizado, CSS y, a menudo, mucho JavaScript para tener algo que se integre bien con otros componentes.

Desafortunadamente, no es fácil hacer lo correcto con la semántica adecuada para la accesibilidad, la compatibilidad con el teclado y el posicionamiento de las ventanas emergentes. Los desarrolladores web han estado invirtiendo horas y horas a lo largo de los años, tratando de resolver los mismos problemas una y otra vez, y hay muchas opciones disponibles.

Ya es hora de que tengamos un estilo incorporado <select> ¡así que no necesitamos escribir este código nunca más!

La iniciativa de interfaz de usuario abierta

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

Abra la interfaz de usuario es un grupo de desarrolladores, diseñadores e implementadores de navegadores que están trabajando para resolver este problema y, mientras lo solucionan, están tratando con otros controles que faltan.

El propósito de la interfaz de usuario abierta es posiblemente permitir a los desarrolladores web diseñar y ampliar los controles integrados de la interfaz de usuario (esto incluye

Botón volver arriba