Nueva API para crear popovers con HTML SIN usar Javascript - #programacionenespañol

Summary

En este video, se presenta cómo utilizar la nueva API de popovers o elementos emergentes disponibles en los principales navegadores. Se muestra cómo crear elementos emergentes semánticamente ligeros que no bloquean la interacción con la página web detrás de ellos. Se incluye un ejemplo práctico con código HTML, CSS y una breve mención de la compatibilidad en diferentes navegadores. Además, se explica cómo estilizar y controlar el comportamiento de estos elementos usando únicamente HTML y CSS, sin la necesidad de JavaScript. Finalmente, se menciona la posibilidad de controlar la API a través de JavaScript si es necesario.

Takeaways

• 😀 La nueva API de popovers permite crear elementos emergentes similares a los diálogos en los navegadores principales.
• 🔍 Existe una diferencia entre los diálogos y los popovers, siendo estos últimos menos invasivos y permitiendo la interacción con la página web detrás del elemento emergente.
• 🌐 La compatibilidad de la API de popovers está disponible en Chrome 114, Edge 125, Firefox 17 y Safari.
• 📁 Se crea un directorio llamado 'obi-one-popover' para el ejemplo práctico, incluyendo archivos HTML, CSS y JS.
• 🎯 Para crear un popover, se utiliza el atributo 'power-target' en el botón que disparará el elemento emergente.
• 📚 Se debe incluir un atributo 'popover' en el elemento que se mostrará como popover, con un ID que coincida con el del 'target'.
• 🖌️ Los estilos CSS se pueden aplicar directamente al atributo 'popover' para personalizar el ancho, borde, color de texto y otras propiedades.
• 🔑 Se pueden utilizar transiciones y animaciones en CSS para controlar cómo se muestra y se oculta el popover.
• 🛠️ La API de popovers ofrece métodos como 'hide-popover', 'show-popover' y 'toggle-popover' para controlar el elemento emergente a través de JavaScript.
• 🔄 El comportamiento predeterminado del popover puede ser modificado utilizando el atributo 'manual' para controlar su apertura y cierre de manera explícita.

Q & A

¿Qué es la nueva API de popovers y cómo se relaciona con los elementos emergentes?

La nueva API de popovers permite crear elementos emergentes muy similares a los diálogos (dialogs). Estos elementos emergentes se pueden mostrar sin la necesidad de recurrir a JavaScript, excepto para casos de manejo programático específico.

¿Qué diferencia hay entre un popover y un dialog según la API?

La diferencia principal entre un popover y un dialog es que el popover no tiene un valor semántico adicional en HTML y no bloquea la interacción con la página o el contenido detrás del elemento emergente, a diferencia de los dialogs.

¿En qué navegadores está disponible la nueva API de popovers?

La nueva API de popovers está disponible en Chrome desde la versión 114, en Edge 125, en Firefox 17 y en Safari 17.

¿Cómo se crea un elemento emergente utilizando la API de popovers?

Para crear un elemento emergente, se debe definir un 'target' que será el elemento que dispare el popover. Luego, se utiliza el atributo 'popover-target' en el elemento que se quiere que aparezca como popover, y se le asigna un ID que coincida con el del target.

¿Cómo se puede personalizar el estilo de un popover utilizando CSS?

Se puede personalizar el estilo de un popover utilizando CSS directamente haciendo referencia al atributo 'popover'. Se pueden cambiar propiedades como ancho, borde, color de texto, padding, entre otros.

¿Cómo se maneja el comportamiento de cierre automático de un popover?

El comportamiento de cierre automático de un popover se puede controlar a través del atributo 'popover-action' con el valor 'hide'. También se puede establecer manualmente el cierre del popover utilizando el valor 'manual'.

¿Cómo se puede hacer que un popover se muestre y se oculte de manera animada?

Para animar la aparición y desaparición de un popover, se pueden utilizar transiciones CSS y cambios en las propiedades de estilo, como 'transform', asociadas con el estado del popover abierto o cerrado.

¿Cómo se puede agregar un botón de cierre dentro del popover?

Para agregar un botón de cierre, se puede utilizar el atributo 'popover-action' con el valor 'hide' en un botón dentro del elemento emergente, lo que permitirá ocultar el popover cuando se haga clic en dicho botón.

¿Cómo se puede utilizar la API de popovers sin JavaScript?

La API de popovers se puede utilizar sin JavaScript a través de HTML y CSS. Se definen los elementos y se estilizan con CSS, y se maneja el comportamiento del popover utilizando atributos HTML específicos.

¿Dónde puedo encontrar el código y más información sobre la implementación del popover?

El código y más información sobre la implementación del popover se encuentran en un repositorio de GitHub, el enlace al cual se puede encontrar en el primer comentario del vídeo.