CSS sigue evolucionando - ¿parará algún día? -, y algunas de sus últimas características pueden acabar con ciertos debates. Dos de estas características son los selectores de pseudo-clase funcionales :is() y :where(). Son características que pueden tener un impacto significativo en la manera en que escribes CSS.
En este artículo miraremos algunos ejemplos sobre :is() y :where(), y cómo pueden mejorar y simplificar tus hojas de estilos.
Pero antes, algunas definiciones….
¿Qué es una pseudo-clase de CSS?
“Una pseudo-classe de CSS es una palabra clave agregada a un selector que especifica un estado especial de los elementos seleccionados.” Un ejemplo es la pseudo-clase “:hover” que puedes usar para cambiar el color de un botón cuando el puntero del usuario pasa sobre él.
¿Qué es un selector de CSS?
Un selector de CSS es la primera parte de una regla de CSS. Utilizas un selector para decirle al navegador qué elementos de HTML deben seleccionarse para que se les apliquen los valores de propiedad de CSS dentro de la regla.
¿Qué es la especificidad en CSS?
La especificidad es el medio por el cual los navegadores deciden qué valores de propiedad de CSS son los más relevantes para un elemento. Se basa en las reglas de coincidencia que se componen de diferentes tipos de selectores de CSS.
Los selectores :is() y :where()
:is() y :where() son selectores de pseudo-clase funcionales que funcionan como llamadas a funciones dinámicas en tiempo de ejecución. Esta funcionalidad, que mejora la legibilidad, te permite escribir CSS, agrupando elementos en el medio, al principio o al final de un selector.
Con respecto a la agrupación, todo lo que haga :is(), :where() también puede hacer, en cualquier parte del selector, anidando o apilando.
¿Qué diferencias hay entre :is() y :where()?
:is() y :where() divergen a nivel de especificidad. Las siguientes son algunas de las diferencias:
- :where() no tiene especificidad
- :where() 'aplasta' toda la especificidad en la lista del selector pasada como parámetros funcionales
- :is() toma la especificidad de su selector más específico
- :is(a,div,#id) tiene una puntuación de especificidad de un ID: 100 puntos.
Ejemplos
Si quieres saber qué partes de tu código que podrían beneficiarse de :is() o :where(), debes buscar selectores con varias comas y repetición de selector. Aquí tienes algunos ejemplos:
:is() y :where()
Si, quieres ajustar el peso del texto en todas las etiquetas <span> encontradas en un elemento de encabezado, envés de escribir.
h1 > span, h2 > span, h3 > span, h4 > span, h5 > span, h6 > span {
font-weight: initial;
}
Podrías escribir
:is(h1,h2,h3,h4,h5,h6) > span {
font-weight: initial;
}
o
:where(h1,h2,h3,h4,h5,h6) > span {
font-weight: initial;
}
Como puedes ver, la legibilidad mejora bastante.
Compatibilidad del navegador
Chromium (>= 88), Firefox( >=78) y Safari (>=14) soportan :is() y :where(). Algunas versiones anteriores de los navegadores aceptan el selector :is() como :matches() o -webkit-any().
Conclusión
Como has podido ver, los pseudo-selectores :is() y :where() te permiten tener una característica que te ayuda a “agrupar, tener hojas de estilo más pequeñas y a remover comas de tu código”.
Por tanto, creo que son una herramienta que deberías tener en cuenta a la hora de escribir CSS. Sin embargo, vale la pena recordar la compatibilidad con los navegadores que utiliza tu público objetivo.
¿Utilizas :is() y :where() en tus proyectos? ¿Qué tal la experiencia? ¡Coméntalo abajo!
Foto: @gajus @freepik
Fuentes:
