El estado actual de las selecciones de estilo en 2019 | Programar Plus

Lo mejor que pude ver desde la última vez que compilé las características más deseadas de CSS, diseñar controles de formulario fue una pregunta importante. Los 5 primeros, diría yo. Y de los elementos de forma nativos que la gente quiere diseñar, Greg Whitworth tiene algunos datos que el <select> El elemento es más solicitado que cualquier otro elemento, más del doble que el siguiente elemento, y es el que los desarrolladores personalizan con mayor frecuencia de alguna manera.

Los desarrolladores claramente quieren diseñar los menús desplegables de selección.

En realidad haces un poco. Quizás más de lo que te das cuenta.

La mejor grieta en esto proviene de Scott Jehl en el blog de Filament Group. Incrustaré una copia aquí para que sea fácil de ver:

ver la pluma
select-css por Scott/Filament Group por Chris Coyier (@chriscoyier)
en CodePen.

En particular, esta es una solución completamente cruzada entre navegadores. No es algo limitado solo a los navegadores de escritorio más avanzados. Hay algunas diferencias visuales entre navegadores y plataformas, pero en general es bastante consistente y le brinda una línea de base a partir de la cual puede personalizarlo aún más.

Eso es solo el “afuera”

Abra la selección. Hmm, se ve y se comporta como si no le hubieras hecho nada.

Estilizando un <select> no hace nada con el menú desplegable abierto de elementos. (Captura de pantalla de macOS Chrome)

Algunos navegadores te permiten diseñar el interior, pero es muy limitado. Cada vez que he ido por este camino, he tenido problemas para hacer que las cosas sean compatibles con todos los navegadores.

Firefox me permite establecer el fondo del menú desplegable y el color de una opción flotante.

Los datos de Greg muestran que solo el 14% (tercer lugar) de los desarrolladores encontraron que diseñar el exterior era la parte más dolorosa de los elementos seleccionados. Voy a robar su gráfico porque es absolutamente fascinante:

Frustración % Contar
No poder crear una buena experiencia de usuario para buscar dentro de la lista 27,43% 186
No poder diseñar el elemento 17,85% 121
No poder cambiar el estilo del estado predeterminado (flecha desplegable, etc.) 14,01% 95
No poder diseñar la ventana emergente en el escritorio (por ejemplo, el borde, las sombras paralelas, etc.) 11,36% 77
Inserción de contenido más allá del texto simple en el control 11,21% 76
Inserción de contenido HTML arbitrario en un elemento 7,82% 53
No ser capaz de crear un estilo y comportamiento distintivo no seleccionado/marcador de posición 3,39% 23
Ser capaz de generar nuevas opciones a partir de un gran conjunto de datos mientras la ventana emergente está abierta 3,10% 21
No poder aplicar estilo a las actualmente seleccionadas en la medida en que lo necesitaba 1,77% 12
No poder cambiar el estilo de la ventana emergente en el móvil 1,03% 7
Poder hacer que las opciones se repitan automáticamente al desplazarse (es decir, si tiene una lista de opciones 1 a 100, cuando llegue a 100 en lugar de que el usuario se desplace hacia atrás hasta la parte superior, muestre 1 debajo de 100) 1,03% 7

Resumiendo, las partes más dolorosas de las selecciones de estilo son:

  • Búsqueda
  • Diseñar el menú desplegable abierto, incluidas las opciones individuales, que incluye más que solo texto
  • Actualizar el elemento sin cerrarlo
  • Estilo para casos en los que se selecciona “nada” y cuando se selecciona un elemento

Me sorprende que la selección múltiple no haya hecho el corte. Tal vez no esté sobre la mesa para <select> ya que no sería compatible con versiones anteriores?

evolución del navegador

Edge anunció recientemente que están mejorando el aspecto de los controles de formulario, pero aún no se sabe nada sobre los estándares o cómo personalizarlos.

Seleccionar estilos en Edge/Chromium antes (izquierda) y después (derecha)

Sin embargo, parece que hay un buen impulso. Si quieres más información y seguir todo este progreso (¡sé que lo haré!):

  • Escuche a Nicole Sullivan hablar al respecto (comienza aproximadamente en el minuto 16).
  • Lea el libro de Greg Whitworth “¿Podemos diseñar el <select> ¡¿control?!” Se profundiza en todo esto.
(Visited 7 times, 1 visits today)