[ad_1]
Durante muchos años, la interactividad en la web ha significado el uso de JavaScript. Ya sea Vanilla JS o una biblioteca como jQuery o React, el lenguaje ha sido la puerta de entrada para crear cosas con las que los usuarios pueden interactuar.
Y aunque JavaScript sigue siendo muy útil en estos escenarios, ya no es un requisito. Se puede lograr mucho con una combinación de HTML y CSS en estos días. Cada estándar se ha ampliado para incluir características que alguna vez fueron exclusivas de otros idiomas.
Este desarrollo trae varias ventajas. En primer lugar, reduce en gran medida la complejidad de construir estos elementos. No necesita cargar bibliotecas externas ni preocuparse por dominar la sintaxis de JavaScript. A su vez, esto también mejora el rendimiento y garantiza la compatibilidad del navegador.
¿Parece interesante? Hoy le mostraremos algunos elementos interactivos comunes que puede crear solo con HTML y CSS.
IU de acordeón
Los acordeones se han construido durante mucho tiempo con la ayuda de JavaScript. La propia biblioteca jQuery UI comprender el objeto. Simplificó el proceso de creación y diseño, pero no es el código con mejor rendimiento.
Especialmente considerando que HTML ahora tiene la details y summary etiquetas integradas. Con marcas y estilos básicos, es posible crear una interfaz de usuario atractiva y funcional. Es tambien compatible con todos los principales navegadores.
Cabe mencionar que este método no ofrece la gama completa de efectos especiales. Como señala MDN:
Desafortunadamente, por el momento no hay una forma integrada de animar la transición entre abierto y cerrado.
Sin esa advertencia, realmente es una alternativa viable para cargar una biblioteca de JavaScript.
A continuación se muestra un ejemplo básico de lo que se puede hacer con solo unas pocas líneas de HTML y CSS.
Un acordeón HTML simple usando <details> por Eric Karkovak
ver la pluma Un acordeón HTML simple usando
Menús de navegación avanzada
Diseñar una navegación que funcione en todos los navegadores y dispositivos solía ser un desafío. Particularmente al crear menús de varios niveles o mega. Las funciones avanzadas a menudo requerían respaldos para que las cosas funcionaran en navegadores más antiguos.
Y eso sin tener en cuenta las pantallas pequeñas. Es posible que sea necesario implementar un menú completamente separado para garantizar la facilidad de uso en dispositivos móviles.
Afortunadamente, ha habido muchos avances en esta área. Combinando HTML nav etiqueta, listas desordenadas y CSS, podemos admitir la gama completa de dispositivos. No solo pueden verse tan bien como los menús de JavaScript del pasado, sino que también pueden funcionar de manera más eficiente.
Megamenú receptivo y menú desplegable usando solo HTML y CSS por Muhammad Fadzrin Madu
ver la pluma Megamenú receptivo y menú desplegable usando solo HTML y CSS por Muhammad Fadzrin Madu
Juegos
Los juegos en la web existen desde hace mucho tiempo, desde los días de (¡gulp!) Flash. E incluso después de que esta plataforma desapareciera, el proceso de construcción seguía siendo complejo.
La creación de animaciones fluidas, el procesamiento de cálculos matemáticos y la entrada de datos por parte del usuario han requerido tradicionalmente secuencias de comandos avanzadas y uso de bibliotecas. Pero este ya no es necesariamente el caso.
Ahora CSS se puede combinar con HTML canvas, SVG y otras bonificaciones para crear resultados sorprendentemente poderosos. Si bien no confundirá estos juegos CSS puros con los títulos de vanguardia que se juegan en su consola, no obstante son impresionantes.
¡Por lo menos, son una pérdida de tiempo convincente!
Juego Ghost Bustin ‘CSS puro con variables CSS por Jhey
ver la pluma Juego de fantasmas CSS puro con variables CSS 👻🕹#CodePenChallenge por Jhey
Reproductores multimedia
Al igual que los juegos, la multimedia en la web alguna vez fue el territorio de los complementos del navegador. Parte de esto se debió a los formatos patentados, ya que los proveedores competían para ganar participación de mercado para sus códecs. Los proveedores de contenido (y por lo tanto los diseñadores) se han visto obligados a elegir uno o más formatos para ponerlos a disposición de los usuarios. Y los usuarios tenían que tener instalado el software adecuado para reproducir los medios. Fue un desastre.
Pero incluso cuando formatos como MP4 se convirtieron en estándares abiertos, la reproducción siguió siendo compleja. Sin embargo, el cambio a HTML5 ha puesto gran parte de la carga de funciones en los navegadores. los video y audio Elements utiliza un reproductor multimedia integrado con una variedad de funciones opcionales.
Y aunque todavía se recomienda JavaScript para una interfaz de usuario más personalizada, ya no es una necesidad. Algunos estilos básicos se pueden hacer con CSS. Además, la compatibilidad del navegador con los elementos nativos es sólida.
Estilo css de audio HTML5 por Dani Castaños
ver la pluma Estilo css de audio HTML5 por Dani Castaños
Construyendo lo básico y más allá
Los avances en CSS y HTML han hecho maravillas para hacer avanzar la web. Ya no necesitamos recurrir a bibliotecas de código masivas o procesos demasiado complicados para ofrecer una interactividad básica. Estas grapas compatibles de forma nativa son más que capaces de hacer el trabajo.
Esta es una buena noticia, ya que los diseñadores web deben tener en cuenta una cantidad cada vez mayor de dispositivos. Cosas como la navegación y los reproductores multimedia que simplemente funcionan sin necesidad de bibliotecas de terceros son cruciales para esta causa.
Por supuesto, JavaScript y similares siempre están ahí para llevar las cosas al siguiente nivel. Pero ahora es posible construir las bases sin ellos.
[ad_2]
