Un controlador de clics solo CSS que utiliza la pseudoclase :target (sin JavaScript)

A menudo, cuando estás creando un sitio web, especialmente una página de destino sencilla, llega un momento en el que te das cuenta de que tendrás que introducir algo de JavaScript. Sin embargo, CSS puede hacer mucho más de lo que le damos crédito. ¡Aquí veremos cómo crear controladores de clics solo con CSS!

Digamos que estamos creando una página de destino en HTML y CSS y decidimos que queremos un botón "Ver más" para mostrar una sección de texto. En cuanto pensamos en un evento de clic, normalmente nos viene a la mente una palabra: JavaScript.

Como desarrolladores web, la mayoría de nosotros pasamos mucho tiempo con JavaScript, ¡y eso es genial! Sin embargo, hay muchísimas cosas que podemos hacer solo con CSS y que quizás ni siquiera conozcamos.

La pseudoclase CSS :target

Existen muchas pseudoclases en CSS que pueden ayudarnos a aplicar estilo a elementos en diferentes estados. Por ejemplo, puedes aplicar estilo a un botón cuando se pasa el mouse sobre él, está activo, tiene el foco, etc.

Sin embargo, una pseudoclase de la que quizás no hayas oído hablar es la :targetpseudoclase.

La :targetpseudoclase se utiliza para seleccionar un elemento cuando el ID de ese elemento coincide con parte de la URL actual.

¿Cuándo el ID de un elemento coincidiría con una URL?

Un caso de uso común para que el ID de un elemento aparezca en la URL es si estás usando una etiqueta de ancla ( a) para saltar a un lugar específico en la página actual. Por ejemplo, si se trata de tu sitio web personal, podrías tener un botón de "Contacto" en la parte superior de la página. Al hacer clic, podría llevar al usuario al pie de página para ver toda tu información de contacto.

Uso de una etiqueta de ancla para saltar posiciones en la página

Si ya ha utilizado una aetiqueta antes, probablemente esté familiarizado con el hrefatributo. Si está intentando crear un vínculo a un sitio web, como Alligator.io, por ejemplo, crearía el vínculo en su HTML de la siguiente manera:

a href='https://alligator.io'  Click me!  /a

Sin embargo, si desea que su usuario permanezca en la página actual y salte al pie de página, por ejemplo, todo lo que tiene que hacer es establecer un ID en el pie de página y usar ese ID para el hrefvalor en la aetiqueta.

a href='#footer'  Go to the footer!/a

Cuando el usuario haga clic en este enlace de pie de página, la página saltará al pie de página y su URL actual se actualizará para verse así:

https://www.imawebsite.com/#footer

El ID del elemento de pie de página ahora es parte de la URL actual. En otras palabras, ¡es el destino!

Creación de controladores de clic con :target

Ahora que sabemos cómo crear un objetivo con HTML, ¿cómo podemos utilizar ese objetivo para crear un controlador de clic sin JavaScript? Afortunadamente, ¡solo se necesita un poco de CSS!

Usando nuestro ejemplo del botón “¡Ver más!” de arriba, comencemos creando un enlace para ver más texto:

a href='#seeMore'  See more!/a

La sección de texto que queremos ver aún no existe, así que vamos a crearla también.

a href='#seeMore'  See more!/asection id='seeMore'  p    Here's some more info that you couldn't see before. I can only be seen after you click the "See more!" button.  /p/section

Al hacer clic en el botón “¡Ver más!”, la URL se actualizará y tendrá este aspecto:

https://www.imawebsite.com/#seeMore

El problema que tenemos ahora es que la #seeMoresección es visible para el usuario ¡aunque todavía no debería serlo!

Dado que este es todo el HTML que necesitaremos hasta ahora, agreguemos nuestro CSS para administrar la visualización del bloque de texto al hacer clic.

Primero, ocultemos el texto que aún no debería mostrarse.

style  #seeMore {    display: none;  }/style

Ahora el texto de la #seeMoresección no se muestra al cargar ni al hacer clic en el botón "¡Ver más!". Aquí es donde :targetentra en juego el estilo. Usemos la :targetpseudoclase para actualizar el estilo cuando se haga clic en el botón "¡Ver más!".

style  #seeMore {    display: none;  }  #seeMore:target {    display: block;  }/style

¡Es así de simple! Al cargar, nuestra sección de texto no se mostrará. Tan pronto como haga clic en el botón "Ver más", se agregará #seeMorea la URL y la #seeMoresección se convertirá en el destino. Una vez que #seeMorese convierta en el destino, se le aplicará :targetel estilo, que muestra el texto.

Uso de :target para alternar la visualización

Si un elemento no estaba visible desde el principio, probablemente querrás tener la opción de ocultarlo nuevamente.

Afortunadamente, podemos hacerlo con sólo una línea más de HTML (¡sin CSS!).

Usando el mismo ejemplo que el anterior, ampliemos el HTML para incluir un botón “Ocultar texto”.

a href='#seeMore'See more!/asection id='seeMore'  p    Here's some more info that you couldn't see before. I can only be seen after you click the "See more!" button.  /p  a href='#'Hide text/a/section

Ten en cuenta que hay una nueva aetiqueta en la sección de texto. Dado que está en el elemento que solo se muestra cuando el usuario hace clic en "Ver más", el botón "Ocultar texto" solo se mostrará si el texto oculto se vuelve visible. Es decir, el usuario no necesita ver el botón para ocultar el texto a menos que haya texto para ocultar.

El hrefvalor del botón “Ocultar texto” es “#”. Esto se debe a que queremos actualizar la URL para que ya no incluya #seeMore. Cuando se hace clic en el botón “Ocultar texto”, se actualizará la URL para que se vea así:

https://www.imawebsite.com/#

Una vez actualizada la URL, #seeMoreya no es el destino y #seeMore:targetya no se aplica el estilo. Por lo tanto, el bloque de texto (incluido el botón “Ocultar texto”) volverá a tener el display: none;estilo aplicado.

En resumen, actualiza la URL y el texto que originalmente no se mostraba vuelve a no mostrarse. ¡Oficialmente tenemos una forma de alternar el texto! ✨

Ejemplos de cuándo utilizar :target

Si no está seguro de cuándo utilizaría realmente la :targetpseudoclase, aquí hay algunos ejemplos de cómo podría hacerlo:

• Haga clic en el icono de hamburguesa para mostrar el menú de navegación de su sitio. Incluya un icono para cerrar la navegación.
• Haga clic en un ícono para mostrar un modal. (Nota: asegúrese de que sus modales sean accesibles si va a usarlos).
• Actualice el estilo de la pestaña actualmente seleccionada en la barra de navegación cuando se haga clic en ella.

Compatibilidad con navegadores

La compatibilidad del navegador con la :targetpseudoclase es fantástica y, básicamente, no es necesario preocuparse por ello a menos que sea compatible con IE8. Sin embargo, como siempre, consulte Can I Use (¿Puedo usarlo?) para estar seguro.