Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS Selectors

Cómo crear un componente de filtrado con solo CSS

by
Difficulty:IntermediateLength:ShortLanguages:

Spanish (Español) translation by Carlos (you can also view the original English article)

En el tutorial de hoy, aprenderemos a crear un componente de filtrado únicamente con CSS, algo que quizá pienses que necesita JavaScript. Utilizaremos un marcado simple, algunos controles de formulario, y algunos selectores CSS realmente interesantes que tal vez no hayas usado antes.

En lo que vamos a trabajar

Aquí en Tuts+ cada instructor tiene su propia página de archivo. Vamos a recrear una lista de tutoriales como esta, utilizando nuestra propio marcado. Despúes, implementaremos un componente que filtrará los mensajes en base a las categorías a las que pertenecen.

Cada instructor

¡Vamos a crearlo!

1. Inicia con el marcado HTML

Comenzamos identificando las categorías de filtro en nuestro componente. En este ejemplo, usaremos siete filtros:

  1. All
  2. CSS
  3. JavaScript
  4. jQuery
  5. WordPress
  6. Slider
  7. fullPage.js

Para hacer esto, primero definimos siete botones de radio que agrupamos bajo la palabra clave de categories. De forma predeterminada, el primer botón de opción está marcado:

Después creamos una lista ordenada que contiene las etiquetas relacionadas con los botones de radio mencionados anteriormente.

Ten en cuenta que asociamos un botón de radio con una etiqueta al establecer su valor id igual al valor de la etiqueta for:

Luego, configuramos otra lista ordenada que incluye los elementos que queremos filtrar (nuestras tarjetas). Cada uno de los elementos filtrados tendrá un atributo data-category personalizado cuyo valor es una lista de filtros separados por espacios en blanco:

En nuestro caso, los elementos filtrados serán publicaciones. Así que el marcado que utilizaremos para describir una publicación junto con su meta (título, imagen, categorías) se ve así:

Con el marcado preparado, centremos nuestra atención en los estilos requeridos.

2. Define los estilos

Primero ocultamos visualmente los botones de radio:

Después añadimos algunos estilos a los filtros:

Diseño con rejilla de CSS (CSS Grid)

Especificamos algunos estilos para los elementos filtrados. Lo más importante, utilizamos CSS Grid para diseñarlos de forma diferente dependiendo del tamaño de la pantalla:

Nota: por razones de legibilidad, en nuestro CSS no agrupamos reglas CSS comunes.

Añadiendo los estilos de filtrado

La idea aquí es asombrosamente simple. Cada vez que hacemos clic en un filtro, solo deben aparecer los elementos filtrados (publicaciones) correspondientes. Para implementar esa funcionalidad, usaremos una combinación de los siguientes elementos de CSS:

Cuando hacemos clic en el filtro All, aparecerán todas las publicaciones que tengan un atributo data-category:

Cuando hacemos clic en cualquier otra categoría de filtro, solo se verán las publicaciones pertenecientes a esa categoría:

Por ejemplo, cuando hagamos clic en la categoría del filtro Slider, sólo los mensajes que pertenecen a la categoría Slider serán visibles.

CSS-only filtering component in action
Componente de filtrado, creado únicamente con CSS, en acción

Vale la pena mencionar que en nuestros estilos anteriores en lugar de sintaxis [att~=val], por igual podríamos haber utilizado la sintaxis [att*=val]. Así es como se vería ese sutil cambio:

Explicación rápida del selector de CSS

¿Qué dice exactamente este selector?

El primer fragmento, [value="CSS"]:checked,busca botones de radio marcados con un valor específico ("CSS" en este caso).

Después de eso, la tilde o virgulilla (~) es lo que hoy en día llamamos “subsequent-sibling selector” («selector de hermanos subsecuentes»). Selecciona elementos que tienen el mismo padre que el elemento precedente, aunque no sigan inmediatamente en el marcado. Así que ~ .posts .post busca el elemento .posts .post que comparte el mismo padre que la entrada de radio marcada.

Para ser aún más específicos, :not([data-category~="CSS"]) ajusta nuestro selector a solo aquellos elementos .post que no tienen el atributo data-category y que contienen un valor de CSS en alguna parte dentro de una lista separada por espacios.

Entonces aplica una display: none; a cualquier elemento que coincida con esos criterios.

Es un selector bastante complejo, aunque es perfectamente lógico. En términos de lenguaje humano, podríamos describirlo como:

«Cuando se marque un radio con un valor de “CSS”, busca los elementos hermanos subsecuentes que no contengan “CSS” en su lista de categorías de datos y ocúltalos».

La última parte de estilizado

Como último paso, añadimos una regla que resalte la categoría del filtro activo:

3. Accesibilidad

Este filtrado es muy accesible por defecto; gracias a la manera nativa en que funcionan los botones de radio y las etiquetas, podemos filtrar nuestros elementos con el teclado. Primero, presiona la tecla tabuladora (Tab ↹) para mover el foco al botón de opción marcado. A continuación, presiona las teclas de flecha para mover el enfoque y la selección a los otros botones de opción. Inténtalo tú mismo:

Dicho esto, no hemos prestado ninguna atención real a la accesibilidad, por lo que podría haber otros aspectos que se requieran mejorar.

Conclusión

¡Eso es todo, amigos! Con solo unas pocas reglas CSS y un marcado estructurado, logramos crear un componente de filtrado completamente funcional.

Espero que hayas disfrutado de este ejercicio y que te haya ayudado a ampliar tu conocimiento de los selectores CSS. Como siempre, ¡gracias por leer!

Más sobre selectores CSS

Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.