Flipando con la etiqueta <dialog> de html5. En firefox, edge y chrome funciona súper bien, y solo con una puñetera etiqueta. Nada de modales con javascript con toneladas de código que enmierdan la experiencia y joden la accesibilidad en el 95% de los casos.
Pero claro, ¿cómo podemos esperar que se adopte si casi nadie conoce realmente HTML? Lo que molan son los frameworks. La base de la web, los ladrillos y la estandarización casi ni se estudian. La magia del JS es tentadora pero tramposa.
@kastwey Justo la he estado probando hace unos meses y controlarla como se la vendería diseño a un cliente... no es imposible, pero es tricky, porque hay unos rollos que solo están disponibles en chromiums por ahora y hay que picar un poquito de html, css y js de más.
Por la parte accesible, funciona como un tiro sin aprisionarte el foco y, claro, merece la pena.
@kastwey hace años hice un curso de accesibilidad web y en gran parte consistía en aprender a usar bien HTML.
@oneeyedman Ostras, entonces a nivel de diseño aún no funciona todo lo bien que debería? Es una pena esta heterogeneidad entre navegadores y características relativamente nuevas. Y digo relativamente nuevas porque esta etiqueta lleva años
@oneeyedman Y ya no solo por el foco, sino por ocultar la página Padre, por poner el foco en la cabecera, por poner el foco en el botón que provocó la apertura al cerrar…
@kastwey si es solo abrir y cerrar, weno, se puede. Si quieres que haya transiciones o pequeñas animaciones, se puede, pero hay que meter algunos contenedores de más, estilos para que se mueva la cosa y js para controlar apertura y cierre con lo animado. Por ejemplo: si se quiere que la capa oscurilla que cubre la página aparezca suavemente o si se quiere que la caja de contenido aparezca desde abajo.
@kastwey y si además quieres controlar el responsive, con estos contenedores extra, el tema scroll tb es tricky.
@oneeyedman ¿Crees que todo esto es un problema de falta de implementación en los navegadores? O es algo inherente a la etiqueta.
@oneeyedman reformulo la pregunta, porque evidentemente no hay nada inherente a una etiqueta. ¿crees que es un problema con la implementación? ¿se deberían añadir propiedades o eventos extra para hacer esto? ¿se trata de bugs en la implementación?
@kastwey PUES! Creo que se puede implementar mejor, sabiendo cómo se diseñan las cosas y cómo se le venden al cliente.
@kastwey De hecho, me apuesto el ojo bueno a que en todo el desarrollo de este elemento ha habido CERO diseñadores, y podría animarme a decir que CERO maquetadores.
@kastwey Sí, pero me lo apunto para otro momento que tengo una lista de cosas pendientes para hoy que me da hasta susto.