En el entorno actual de desarrollo web en el que vivimos, parece que todo debe estar envuelto en un framework de JS, o no vale la pena. Y puedo entender por qué esta es la regla en el mundo moderno del desarrollo web; hay tantos nuevos frameworks de JS que prometen ser la panacea y que tienen todas las respuestas a nuestras necesidades, y eso está bien si sabemos dónde y cómo usarlos.

La regla del menor poder: este es un principio de diseño que nos dice que elijamos el lenguaje menos potente adecuado para un propósito dado. Este es un principio útil para seguir en la web porque los lenguajes menos potentes fallan mejor.

Por ejemplo, si olvidas cerrar una etiqueta HTML, hay una buena posibilidad de que el navegador lo arregle por ti. ¿Escribiste una regla CSS no válida o no compatible? El navegador la ignorará y analizará el resto como se pretende. Pero si tienes un error de sintaxis en una aplicación JS, te tomará más tiempo tratar de arreglarlo.

Hoy no intento decirte cuándo es un buen momento para usar un framework de JS o incluso JS vanilla, pero me gustaría mostrarte algunas cosas nuevas que se pueden hacer con HTML y CSS en lugar de JS.

Interruptores personalizados

A veces necesitamos construir interruptores increíbles con muchos efectos visuales, y tendemos a buscar una biblioteca que tenga todos estos diseños. Observa cómo podemos usar HTML y CSS para crear interruptores llamativos.

Para poder crear estos switches tenemos que utilizar un input con type=”checkbox”, este checkbox nos va a ayudar a darle estilos al elemento con el estado checked que HTML le coloca cuando el usuario le da click, por el lado del CSS lo que hay que hace es quitarle la apariencia al input para que no aparezca con su forma original (un recuadro vacío o lleno dependiendo de su estado); después es solo cuestión de darle estilos al input con la pseudo clase :checked.

See the Pen Custom Swithches by Luis Ángel Perez Muñoz (@MimoPerez94) on CodePen.

Datalist

Esta es una etiqueta de HTML de la cual no tenia mucho conocimiento, pero me pareció interesante. Esta etiqueta es una especie de select pero con otras propiedades, pues nos permitirá hacer un auto completado cuando el usuario escriba algo en el cuadro de texto, facilitando la búsqueda de la opción que se quiere elegir. De igual manera que el select, si le damos click al cuadro de texto, podremos visualizar un recuadro con todas las opciones en caso de que el usuario quiera encontrar la opción haciendo scroll entre las opciones.

Sin duda creo que este elemento puede ser muy útil para pequeñas interacciones en donde quisiéramos ofrecer la funcionalidad de autocompletado y evitando así agregar librerías o implementar código JS vanilla.

See the Pen HTML datalist by Luis Ángel Perez Muñoz (@MimoPerez94) on CodePen.

Input Color

Sabias que HTML tiene un selector de color nativo, este además puedes usar su funcionalidad de extractor de color y se puede elegir cualquier color que encuentres en la pantalla del navegador. De esta manera dejas al usuario escoger el color que más le guste. Puedes usar este selector utilizando un input con el type=”color“.

See the Pen HTML Input color by Luis Ángel Perez Muñoz (@MimoPerez94) on CodePen.

Smooth Scrolling

Este es un efecto muy común en las paginas web actuales, donde queremos llevar al usuario a una parte especifica de la pagina pero haciendo un efecto de scroll suave y no que la pagina salte directamente al dicha parte. Esto lo podremos lograr de una forma muy sencilla en CSS.

See the Pen CSS : In page transitions by Luis Ángel Perez Muñoz (@MimoPerez94) on CodePen.

Details Toggle

Otra etiqueta que es muy útil y poca conocida es la etiqueta details. Esta nos permitirá tener una especie de acordeón con muy poco código. Con esta etiqueta también podremos hacer uso de la propiedad open para dar estilo a ambos estados con CSS. Dentro de la etiqueta details también podremos hacer uso de la etiqueta summary, la cual nos permitira definir el titulo del acordeón.

See the Pen HTML details by Luis Ángel Perez Muñoz (@MimoPerez94) on CodePen.

Dialog

De acuerdo, debo de admitir no siempre podemos deshacernos de JS (y eso esta bien), pero HTML recientemente agrega una etiqueta que nos da la funcionalidad de un modal de una manera mucho mas simple. Estoy hablando de la etiqueta dialog, con ella y su propiedad open, podremos crear modales de manera muy sencilla y con mucho menos JS. Además una característica que me gusta mucho es que el modal se crea en una capa aparte del contenido del sitio, haciendo su estilado y manejo mucho mas fácil.

See the Pen HTML Dialog by Luis Ángel Perez Muñoz (@MimoPerez94) on CodePen.

Container Queries

Esta nueva funcionalidad de CSS nos permite crear media queries que dependan del tamaño de un elemento en vez del viewport de la pagina. Esto permite crear componentes mucho mas fluidos e independientes. Para lograr eso debemos utilizar las propiedades container-type y container-name y despues generar las media queries para ese componente a partir de dichas propiedades. En el ejemplo de abajo se puede observar como se cambia el flex-direction del card dependiendo del tamaño del componente que contienen los cards y no tomando como referencia el ancho del viewport.

See the Pen Container Queries by Luis Ángel Perez Muñoz (@MimoPerez94) on CodePen.

Parent Selector :has

Este es uno de las nuevas funcionalidades de CSS que mas me emociona, ya que recientemente se ha agregado soporte en la mayoría de los navegadores, y es algo muy útil en la practica. Se trata de la pseudo-clase :has. Esta pseudo-clase nos permite seleccionar elementos padre que tengan hijos que coincidan con cierta regla. En el ejemplo de abajo podemos observar como puedo seleccionar a los párrafos que contienen ciertas etiquetas hijos, incluso con ciertas reglas extra y darle estilo.

See the Pen CSS :has() selector by Luis Ángel Perez Muñoz (@MimoPerez94) on CodePen.

Es muy impresionante cómo HTML y CSS han crecido a lo largo de todos estos años. A veces subestimamos el poder de estos lenguajes, pensando que no son muy importantes, pero cuando puedes ahorrar muchas líneas de código, es cuando puedes ver su potencial. Nuevas características se están desarrollando cada día para estos lenguajes, y estar al tanto de ellas puede ayudarnos a ser más eficientes y rápidos en nuestra vida diaria como desarrolladores.