Cómo los Popovers Están a Punto de Ser Mucho Más Fáciles de Construir

¿Quién tiene popovers en su sistema design? Levanten la mano. Genial. La mayoría de esta audiencia.

Solo descubrí recientemente que en los Estados Unidos, los Yorkshire Puddings se llaman popovers. Incluso encontré este video en la cocina de texto de América, donde dicen que los popovers pueden ser realmente complicados, como vamos a descubrir en esta charla. Tienen una custodia por dentro. No puedo prometer eso para la charla de hoy.

Sí, nos centraremos en el contenido que se superpone a otro contenido. Muy común, no siempre fue así en la web, ¿verdad? Teníamos largos fragmentos de contenido lineal, y ahora nos gusta poner cosas encima de otras cosas. En algunos sitios web, realmente se pasan con esto, donde te aparecen banners para, ¿quieres enviar a las cookies? ¿Quieres registrarte en nuestro sitio? Hay anuncios que son bastante malos e invasivos. Y luego, a veces, incluso obtienes más cosas encima de eso. Como en este caso, ¿por qué? No es bueno. No es bueno, y ves un problema aquí en este ejemplo es que su modal para pedirte que te suscribas al boletín está realmente debajo de la cosa de consentimiento de cookies. No está bien.

Y sí, probablemente estés al tanto de este sitio web llamado ModalsModalsModals.com. Es modal con una z. Explica, con bastante detalle, por qué no deberías estar usando modales, y eso es algo que no cubriré hoy. No voy a hablar de por qué deberías usarlos. Voy a hablar de si los estás usando o si alguien en tu equipo decidió que los usamos, cómo construirlos bien.

Y la razón por la que me interesé en esto es que recientemente en HTML, tenemos dos características emocionantes que te permiten construir popovers y diálogos bastante bien. Un poco de spoiler aquí, no solo voy a hablar de popovers sino también de diálogos porque son bastante similares, y quiero que salgan de esta sala con conocimiento sobre cómo son realmente diferentes.

Así que el diálogo es un elemento HTML que tiene un amplio soporte de navegador que, recientemente, también funciona muy bien en términos de accesibilidad. Como que es seguro usarlo. Todavía hay algunas cosas por pulir. Solía haber muchos más problemas de accessibility con él, y ahora es bastante seguro usarlo. Y luego está el popover, que es bastante nuevo. Pero también, está soportado en Chrome y Edge, Safari, y está en Firefox detrás de la bandera. Así que muy pronto, podremos usar esto. Y recomiendo experimentar con él hoy. Todavía hay algunas consideraciones de accessibility a tener en cuenta.

Pronto publicaré una entrada de blog sobre eso porque hay algunas cosas que considerar. Hoy, hablaremos sobre las consideraciones de UI para estas cosas, y también sobre la semántica, que es realmente importante, especialmente cuando estás pensando en diálogos y popovers, ¿cómo son realmente diferentes? Es un desafío bastante grande averiguarlo.

Ahora, como mencioné, soy Hedda. Trabajo en NL Design System para el gobierno holandés. Soy una persona freelance relacionada con la accessibility. Y también participo en el Grupo de la Comunidad de Open UI, que es un grupo en W3C que crea cosas como popovers. Así que estamos trabajando en ello allí. Ahora tengo mi propio blog en Hedda.blog. Puedes darle me gusta y suscribirte. El otro día, alguien pensó que realmente podías darle me gusta y suscribirte. Necesitas obtener el feed RSS. Así que eso es algo que puedes usar.

Entonces, veamos algunos ejemplos de popovers. Están en todas partes. No sé si alguien ya tiene el nuevo Slack, pero ellos usan un popover para explicarte cómo usarlo. A eso se le llama enseñar UI. Tampoco siempre se usa de muy buenas maneras. Hemos visto ejemplos anteriores. Cuando estaba usando Teams para chatear con mi colega, obtuve este popover de feedback que simplemente apareció sobre mi contenido, mi conversación que estaba teniendo. Y el otro día, cuando estaba en una reunión de negocios muy seria, Microsoft me promocionó sus otros productos en Microsoft Teams. Dijeron, ¿quieres usar Excel, porque también lo hacemos. No estoy seguro, como, estaba un poco en el camino, porque me estaba preparando para tener algunas conversaciones muy serias allí. Y a veces se pone aún más raro. También me animaron a ser mi yo expresivo. Crea algunos avatares. No, gracias. Estoy en una reunión seria. Hay cosas mejores como Slack que te dan este popover que dice, te ves bien hoy. Y ni siquiera revisan las imágenes de tu cámara para ello. Realmente te dicen que te ves bien todos los días, lo cual aprecio.

También hay cosas más serias. Como, en la banca, encontrarás popovers para hacer, como, cuadros combinados, selectores de fecha, todo este tipo de cosas. Así que existen muchos popovers en la web. Y quiero ver ahora cómo estos patterns son diferentes, porque algunos de estos son diálogos y algunos de ellos son popovers. Y muchos de ellos son ambos.

Entonces, veamos cuáles son las diferencias, empezando con el diálogo. Así que un diálogo es una ventana adicional a tu ventana principal o una subventana. Una de las cosas que descubrí trabajando en esto es que no hay una definición central. Así que te daré un par para que te guíen. Otra definición es algo que contiene una acción o una tarea o información crucial o información crítica. A menudo es una conversación entre tú y el sistema. Serán cosas como ¿quieres continuar, sí o no? O si estás empezando un nuevo archivo, ¿qué quieres hacer con el actual? Todas estas cosas donde realmente necesitas hablar con el usuario y necesitas obtener su feedback inmediatamente. Por lo tanto, está justificado interrumpirlos y hacer esas preguntas.

Ahora, para construir diálogos, está el elemento de diálogo en HTML. Y puedes usarlo con scripts. No tengo ningún ejemplo de React aquí, pero puedes adaptar estos a React, porque es todo JavaScript puro. Así que cuando encuentras el elemento o tienes una referencia al elemento, puedes llamar a show modal en un diálogo o puedes llamar a show. Así que show modal va a mostrarlo como un modal, y show va a mostrarlo como un no modal. Entraremos en las diferencias en un momento. Así que esto es importante para hablar de la palabra diálogo. Así que si usas el elemento de diálogo, obtienes muchas cosas gratis del navegador. Así que lo hará modal para ti. Hará las cosas del teclado por ti, y hará un montón de otras cosas. Eso es diferente de usar un rol de diálogo en un div, porque el rol de diálogo te dará esa semántica, pero no te dará ninguno de los comportamientos. Y luego eso también es diferente de usar simplemente la palabra diálogo, que podrías hacer en conversaciones con tus colegas. Eso es algo completamente diferente. Así que podrías estar usando un rol de diálogo o incluso un elemento de diálogo, pero esos son diferentes niveles de uso del diálogo en el trabajo. Ahora el diálogo está bastante bien soportado en todos los principales navegadores. Y solía haber una gran cantidad de problemas de accessibility, y ahora hay muchos menos. Y para más detalles sobre eso, yo recomiendo las publicaciones de blog de Scott O'Hara sobre ellos.

Este último utilizó el elemento de diálogo de manera razonable. Pasando de los diálogos a popover, un popover es una pieza flotante de UI que es suplementaria, contextual, y lo más importante, un diálogo no modal. Así que con el diálogo, puedes hacer diálogos modales, con popover puedes hacer diálogos no modales. Y también son para contenido transitorio.

En HTML, vienen en forma de un atributo, así que no un elemento. Y cuando añades ese atributo a un elemento, va a añadir un montón de comportamientos, que podrían incluir como descartar, teclado, presencia en la capa superior, también cierre de otros popovers. Va a lidiar con todas estas cosas por ti. Ahora esto es para elementos que están encima de otras páginas contenido que no siempre es visible y que normalmente se muestra uno a la vez. Esa es la idea.

Y de hecho está siendo utilizado por algunas personas. Esto es de Chrome, una estadística que claramente está subiendo. Es el 0.3% de las cargas de página en los navegadores basados en Chromium. Y no sé si conoces este sitio web llamado github.com, pero ellos lo están utilizando en producción en este momento. Experimentando con él, creo, pero lo están utilizando ahora. Así que tienen un popover manual. Eso significa que lo están activando con scripts porque lo hacen funcionar en Hover. Así que cuando pasas el ratón sobre los iconos y obtienes un pequeño tooltip, eso es un popover. En esta captura de pantalla, ves un menú justo debajo. Eso también es un popover. Y puedes ver que también aparece en la capa superior cuando lo inspeccionas en el navegador. También está llegando a Photoshop en la web. No sé si has visto, pero han construido todo Photoshop en la web. Muy emocionante. Y también están pensando en usar popover allí. Así que popover es para figuras de contenido. Es para sugerencias de elementos de formulario, para menús de acción, para cuadros de lista, y como se mencionó para enseñar UI. Así que muchos casos de uso diferentes y muy variados allí. Así es como funciona. Básicamente, si tienes un botón y un div y el div es tu popover, lo que puedes hacer es añadir el atributo popover. Y en React, en JSX, tendrás que darle algún valor así que puedes darle la cadena vacía como valor.

Entonces, cuando añades un ID a él y le das a popover target igual a ese ID en el botón, esto es ahora un popover en funcionamiento. El botón va a alternar el popover por ti. Eso es bastante genial. Funciona sin JavaScript. Sé que estoy en la Conferencia de React y aquí estamos todos sobre JavaScript, pero es una oportunidad realmente genial para reducir el tamaño de tus paquetes porque antes tal vez necesitarías ejecutar algunos scripts, ahora el navegador se encargará de ello por ti y se encargará de muchas otras cosas mientras lo hace. Y eso es bastante genial.

De hecho, es tan genial que ahora también están trabajando en conseguir esto en diálogos y otros tipos de elementos. Así que con algo llamado los atributos de invocación, harán que más botones hagan cosas sin JavaScript. Es simplemente algo genial. Hay otros atributos que puedes usar como popover target action, donde puedes decir que este botón solo puede mostrar algo o solo puede ocultar algo. Y hay diferentes tipos de popovers. El auto cerrará otros popovers y va a descartar, es decir, cuando haces clic fuera de él, desaparecerá. Y el manual, que no descartará y no cerrará a otros, y generalmente se abrirá cuando sea correcto. También puedes abrirlos en JavaScript. Así que puedes hacer element.showPopover. De nuevo, necesitarás la referencia al elemento real en el dom para eso.

Ahora, como se mencionó, el popover es compatible con todos los navegadores. En Firefox, está detrás de la bandera. En otros navegadores, está disponible. Tus usuarios pueden no estar usando la última versión de Safari, por ejemplo, pero está llegando. Y creo que eso es genial. Es hora de experimentar con él. Ahora, cuando estaba trabajando en popover y uniendo estas reuniones de UI abierta, seguimos hablando de popovers y diálogos. Y me di cuenta de que no lo entendía realmente tan bien como pensaba, porque seguía escuchando todas estas frases como, esto es modal, esto no es modal, esto es esto, esto es aquello. Así que empecé a pensar en ¿cómo son realmente diferentes estas cosas? Y quiero compartir lo que encontré. Hay un par de ejes diferentes en los que son diferentes. Así que el primero siendo modal versus no modal. Así que modal es un poco de contenido que es lo único con lo que puedes interactuar. Así que si estás rastreando a tus usuarios de acuerdo a la ley de la UE, necesitas obtener permiso. Y si no tienes el permiso, no pueden interactuar con el sitio.

Entonces, es un buen caso de uso. Es algo molesto de tener, pero es un buen caso de uso para bloquear el acceso al resto de la página. Otro ejemplo es cuando estás en un sitio web del gobierno holandés y tu tiempo de sesión se agota, eso es después de 50 minutos, normalmente muestras un modal para pedir a las personas que extiendan su sesión. Porque si están a mitad de su declaración de impuestos, que dura dos horas y presionan enviar, es posible que no puedan enviarla si ya no están autenticados. Entonces, este tipo de cosas son ejemplos típicos de modales. Necesitas interrumpir al usuario. Es un poco como un despertador por la mañana. Necesitas interrumpir a la persona incluso si puede que no les guste, por razones. Otro ejemplo es una pantalla de fin de juego. Estás jugando un juego. Ya no puedes jugar el juego porque estás muerto. No puedes volver al juego, solo puedes interactuar con esta pantalla de fin de juego. Es lo único disponible para ti.

Ahora, no modal es lo opuesto a eso. Así que es algo que se abre encima de otros contenidos, pero también puedes seguir interactuando con todo lo demás en la página. Así que es más bien una parte del resto del contenido. Son cosas como los tips de conmutación y los menús y también los chatbots. Imagina un chatbot donde solo podrías chatear y no mirar el resto del sitio. Así que hacer algo modal es una medida drástica. Probablemente no querrás hacerlo con muchas cosas, pero a veces tienes que hacerlo.

Ahora, otro eje es el cierre ligero versus el cierre explícito. Básicamente, la diferencia es que con el cierre explícito, presionarás un botón para cerrar el diálogo, mientras que con el cierre ligero, desaparece automáticamente. Así que cuando estás eligiendo una fuente en Google Docs y haces scroll o haces clic fuera, eso simplemente va a desaparecer. Y eso está bien. No esperas que se quede allí para siempre, simplemente se irá. Así que es ese tipo de interfaz de usuario que necesita un cierre ligero.

Luego Z-index versus capa superior. Con Z-index en CSS, puedes cambiar el orden de las cosas. A veces tienes varias cosas en el mismo lugar. Y con Z-index puedes cambiar el orden y decir, esto va a estar encima y eso no. La capa superior es bastante diferente porque es una capa que está encima de todo. Así que incluso tu Z-index más alto, si tienes como un 9,999, la capa superior todavía va a estar encima de eso. Es algo separado. Y así es como se renderiza en navegadores como Chromium, y nos mostrará una cosa que está al lado del elemento HTML. Así que es realmente como su propio mundo. Y la forma en que funciona la superposición allí no es a través de Z-index, sino a través del orden en el que las cosas se añaden a la capa superior. Así que para conseguir que esta segunda cosa esté encima de la primera, necesitas editarla segundos, básicamente, o sacar todo si quieres reordenar cosas.

Luego los fondos. Algunos de estos patterns también tienen fondos. Pueden estar en cosas modales y no modales, pero normalmente son parte de los diálogos modales. Así que a veces tienen fondos, y si están en la capa superior, tienen un fondo estilizable incorporado. Así que con colon colon backdrop puedes estilizar a través de CSS, el poder de CSS, genial, estiliza tu fondo para que sea del color que quieras, tenga un efecto borroso, todas estas cosas. Y luego están las trampas de enfoque del teclado que a veces necesitan suceder en elementos modales, se suele usar y a veces en cosas no modales también, como calendarios, donde realmente no quieres que los usuarios escapen de la cosa, porque podría ser molesto para ellos perder la pista de dónde estaban.

Las trampas de enfoque a veces son útiles, pero siempre temporalmente. Estas son las cosas, cómo son diferentes, y quiero mostrarte cómo interactuar con popover y el diálogo.

Modal es lo que obtienes cuando usas diálogo con ese método show modal, esa es la única forma de hacer que el navegador haga algo modal para ti. Luego, no modal es lo que obtienes con cualquier otra cosa. Así que modal, un diálogo con el método show, o popovers, serán no modales. Luego, el cierre ligero, solo puedes obtenerlo cuando popover es igual a auto. Y el cierre explícito es lo que obtienes con popover igual a manual, o con cualquier tipo de diálogo que estés construyendo. Luego ZnX, siempre obtienes ZnX, obtienes acceso a la capa superior cuando usas popover o diálogo con show modal. No hay otra forma de entrar en la capa superior. Bueno, la API de pantalla completa es una si la estás utilizando. Pero popover y diálogo con show modal son las únicas formas de obtener esto. Así que ninguna biblioteca te proporcionará esto sin usar estos primitivos. Porque esta es la única forma en que los navegadores te permitirán entrar en esa capa superior especial. Ahora, ZnX es lo que obtienes cuando usas diálogos con show, o cualquier tipo de contenido que estás construyendo. Luego, los fondos, están integrados en cualquier elemento de la capa superior. Entonces, igual que antes, es popover y es diálogo con show modal. Y luego, una trampa de enfoque del teclado es lo que obtienes cuando usas diálogo con show modal. Así que el navegador se encargará de ello por ti. Parece bastante emocionante. Ahora quiero sumergirme rápidamente en la semántica de esto. Porque esa es una parte realmente importante para hacer diálogos accesibles en popover. Necesitas saber qué es cada cosa. Ahora, estudié filosofía, así que para mí, la semántica sería como, ¿qué es esto? Pero si hablas de desarrolladores web, probablemente sea ¿qué es esto en esta página o aplicación? Eso es más o menos de lo que trata la ciencia de la semántica. Y tendrás semántica en tu sitio, como cuando usas encabezados, obtienes semántica de encabezados. Y son muy útiles porque un usuario de lector de pantalla puede sacar una lista de encabezados y luego navegar por encabezados. De hecho, una de las formas más comunes en que las personas con lectores de pantalla navegan por los sitios web. Así que mirarán tus encabezados. Así que proporciona una API, básicamente, de encabezados. Una etiqueta de anclaje viene con el enlace, un elemento de lista viene con el elemento de lista, diálogo viene con diálogo. Los divs no vienen con nada, lo cual está bien en algunos casos, si no hay nada que transmitir.

También puedes añadir roles a los divs y puedes añadir como se mencionó esos atributos de popover. Y lo que hay que notar aquí es que el atributo de popover no va a añadir ninguna semántica para ti. Así como una etiqueta de encabezado te dará una semántica de encabezado, popover no te dará nada. Va a añadir comportamiento y no semántica.

Y en las siguientes diapositivas, te mostraré un par de semánticas diferentes que puedes añadir tú mismo. Así que si tienes un div con elemento popover en sus atributos, puedes añadir un atributo de rol para decidir qué rol va a tener esto dentro de la página. El más común es diálogo. Así que puedes tener popovers que son diálogos. Son muy comunes. Como dije antes, son ventanas más pequeñas, subventanas, y básicamente es el caso cuando tienes varias cosas allí, elementos interactivos, quizás algunos botones, algunos enlaces, eso suele ser un diálogo con el que la gente puede interactuar. La enseñanza de la UI a menudo es un diálogo, las mega navegaciones podrían serlo porque tienen muchas cosas allí. Y luego está listbox. Eso es básicamente lo que usas cuando tu popover es algo de lo que la gente necesita elegir. Así que un selector de emojis o algo para comprobar una moneda, todas estas cosas diferentes. Así que los listbox también son parte de los combo boxes, pero entonces estás anidando cosas, ¿verdad? Así que el listbox es el tipo de cosa de la que la gente elige, y podrías tener otras cosas allí también.

Luego el rol de menú también es bastante común. Así que eso es lo que usas cuando tienes un montón de acciones que los usuarios pueden hacer. Así que un menú no es para navegación. Si tienes una cosa de navegación en la parte superior de tu página, eso es la navegación. Un menú realmente tiene acciones en él. Así que tendrá botones, cosas que la gente puede hacer. Ejecuta funciones básicamente. Así que en este caso, hay una función para eliminar un elemento, para duplicarlo, es básicamente como una cosa de tipo aplicación. También es lo que se usa para un menú como en Google Docs, el menú de archivos que abres, eso es un menú típico también. Luego los tooltips, son casos de uso de popover bastante comunes. Lo que hay que notar sobre los tooltips es que son texto plano. Así que cuando tienes una cadena de texto que va en un tooltip, cuando tienes algo más, suele ser un toggle tip que es más como un diálogo. Así que si tienes texto allí, pero también un encabezado y también un botón para descartarlo, eso probablemente sea un diálogo, aunque se sienta un poco como un tooltip. No sé si perdimos la conexión allí. Eso está bien.

Podría volver. Entonces, en términos de semántica, el elemento diálogo tiene semántica de diálogo, está incorporado. El popover no tiene semántica y necesitas elegirla tú mismo.

Ahora, pasando de la semántica, quiero hablar un poco sobre el posicionamiento y no tengo mucho tiempo para cubrir mucho sobre eso. Pero lo que hay que notar sobre el posicionamiento es que tanto los diálogos como los popovers están centrados por defecto porque están en la capa superior, el navegador no sabe dónde ponerlos. Así que no van a ser relativos a otros contenidos en tu página. En realidad van a estar en el centro. Así que eso es algo a tener en cuenta.

Si quieres anclar tu popover a la cosa que lo invocó, entonces necesitas pensar en cómo puedes hacer eso porque solo uno de ellos está en la capa superior. Así que tu popover está en la capa superior pero el botón que lo abrió no está en la capa superior. No saben el uno del otro porque son capas muy separadas. Así que eso es importante tener en cuenta porque a menudo quieres adquirir un popover relativo a la cosa que lo abrió porque están visualmente cerca el uno del otro.

Entonces, dos soluciones básicamente para el posicionamiento de popover. Una es que uses una biblioteca como floating UI y calcules dónde necesita estar la cosa y pongas algo como celdas y lo pongas donde pueda ir. O puedes usar el posicionamiento de anclaje, que es una nueva propuesta. Aún no está disponible, aunque está en Chrome, pero todavía está en desarrollo. Y eso va a resolverlo en CSS. Así que en lugar de importar una biblioteca para el posicionamiento, esto te permitirá en CSS decir, haz que esta cosa esté anclada a esa cosa y te dará una forma de hacerlo automáticamente. De nuevo, sin bibliotecas. Como no tengo mucho tiempo para entrar en ello, te remitiré a mi post en el blog llamado Posicionamiento de Popovers. Te cuenta más detalles sobre cómo funcionaría eso.

Por ahora, quiero concluir. Así que hemos hablado de consideraciones de UI y semántica. Un par de cosas que espero que hayas sacado de esta charla. Una es que las APIs de diálogo y popover, pueden reducir tu paquete de JavaScript. Y eso es muy emocionante, creo. Ya no necesitas la biblioteca para hacer diálogos. Muchas cosas pueden ser cuidadas por el navegador. El atributo popover también solo añade comportamiento. No añade semántica.

Eso es lo que sucede con muchas cosas, ¿verdad? También está el atributo TEF index y el atributo content editable. También añaden comportamiento. Realmente no hacen nada más. Es muy común para los atributos, pero importante notarlo.

Luego, el acceso a la capa superior es una faceta importante de esto. Así que los popovers y diálogos con showModal, obtienen acceso a la capa superior, nada más lo hará. Así que no puedes obtener acceso a la capa superior con ninguna otra cosa que no sean estas APIs. Y la última cosa a mencionar es, no uses popovers para promocionar tus productos de forma cruzada. Eso no es para lo que están. Y con eso en mente, quiero agradecerte mucho y referirte a mis diapositivas que están en ese código QR. Gracias.

Así que creo que hay una que estaba generando más emoción entre la gente, que es ¿cuál es tu opinión sobre los popovers o modales en móviles y el espacio de las aplicaciones móviles? Desde los puntos que has mencionado aquí, parece que las mobile apps implementan de manera más elegante en general. ¿Tenderías a estar de acuerdo con eso? Sí, sí, creo que es justo. Sí, sí, estoy de acuerdo con el punto. ¡Sí, genial! ¡Excelente! Esta siguiente persona ha planteado la dificultad que los popovers y modales pueden presentar para, desde una perspectiva de accessibility. ¿Cuáles son tus pensamientos al respecto? Sí, es cierto. Pero, sí, la accessibility es un tema muy amplio. Hay muchos usuarios diferentes de la web, y también aportan beneficios a muchos otros usuarios. Como, hay un beneficio en que te ayudan a hacer tu contenido de tal manera que algunas cosas están ocultas y algunas son visibles, lo que hace tu interfaz más concisa y la hará más usable. Ahora, es súper importante asegurarse de que lo haces de una manera accesible. Hoy en día, la gente está construyendo muchos de estos componentes de una manera inaccesible, y espero que tanto el popover como el diálogo puedan ayudar a hacerlo más accesible en general porque el navegador se encargará de más aspectos de la accessibility de él. Así que, puede incorporar accessibility, por así decirlo. Y eso es realmente difícil porque hay muchos matices en ello, pero esto es lo que los navegadores están intentando hacer hoy. Así que, se encargarán de las relaciones como, ¿está esta cosa expandida o no está expandida? ¿Esta cosa dice algo sobre esa otra cosa? Ese tipo de relaciones que las personas que usan lectores de pantalla necesitan saber y que a menudo no se introducen en el sistema. Así que, con estas nuevas APIs, podrían ser hechas por el navegador, y creo que eso es realmente emocionante porque nos permite construir más cosas y al navegador hacer más accessibility. Así que, creo que eso es genial. Genial, y mantener eso en la vanguardia de nuestras mentes cuando estamos desarrollando en su lugar. Así que, después de décadas de depreciar cosas visuales en HTML, ah, aquí vamos. Solo mirando las preguntas moviéndose. ¿Cuál es tu opinión sobre la introducción de un atributo visual como popover? Pregunta interesante.

No es solo un visual. Entonces, introduce el comportamiento del teclado e introduce la gestión del enfoque y todas estas clases de cosas. Entonces, sí, no estoy de acuerdo en que sea una cosa visual, pero tampoco es una cosa semántica como se mencionó. Como, sí, es solo comportamiento básicamente. Supongo que esto resalta el punto que planteaste al principio sobre estas disparidades en la importancia de la semántica.

Sí, sí, hay muchas semánticas diferentes con las que esto puede funcionar, pero aún necesitas hacer tu propio diseño para los popovers. Entonces, por defecto, es un div o lo que sea que uses, y aún necesitas design tú mismo.

Bueno, siguiendo con ese tema, hay una pregunta aquí de Alexandra. ¿Por qué popover se convirtió en un atributo en lugar de su propio elemento? ¿Con qué elementos se podría usar potencialmente además de? Esa es una muy buena pregunta. Está relacionado con estas diferentes semánticas que resalté. Así que antes pensamos, y en ese momento también pensamos que se llamaría popup, pero decidimos que no. Esa fue una propuesta para un elemento HTML que lo haría. Pero nos dimos cuenta de que no había una semántica única que realmente cubriría eso porque hay diferentes cosas. Como, algunas cosas son menús, algunas cosas son listas de selección. Entonces, si vas a dar un menú por defecto entonces, ¿qué pasa si es una lista de selección? Así que decidimos que no debería tener semántica, es solo comportamiento. Pero sí, ese fue un proceso, porque primero se imaginó que tal vez debería haber un elemento. Incluso se habló de múltiples elementos. Así que tendrías como un elemento de lista de selección y un elemento de menú. El menú ya existe pero está en desuso, así que sí. Historia larga, corta. Es difícil mirar hacia adelante y anticipar cómo podríamos haber estado usando la web ahora.

Sí, seguro. Entonces, creo que tenemos tiempo para tal vez una última pregunta. Así que tenemos la más actualizada aquí por un par de entradas tardías, pero Biomar parece ser, ya que es una característica basada en el navegador, ¿significa esto que algún día podemos apagar todos los modales sin desactivar JavaScript? Sí, esa es una perspectiva genial, sí. Hará eso mucho más fácil, pero supongo que la gente de publicidad aún encontrará la manera de sortearlo y molestarte. Sucederá, sí. Bueno, iba a decir que... Los anuncios encontrarán una manera de no ir completamente a lo Jurassic Park con eso. Consigue un buen bloqueador de anuncios, esto es muy importante. Excelente, en esa nota, muchas gracias por tu charla de hoy. Gracias. Ahora, tú... Gracias.