Cómo usar la nueva ":is()" de CSS para focalizar elementos fácilmente

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

La nueva pseudo-clase CSS :is() se perfila para convertirse en una gran manera de focalizar elementos, ahorrar líneas y líneas de código y mantener el CSS lo más legible que sea posible. Se trata de la siguiente etapa de la evolución de :matches() y :any(), añadiendo un poco de funcionalidad adicional y aumentando lo semántico e intuitivo que es el lenguaje que está detrás de los selectores.

En este consejo rápido nos familiarizaremos con ella. Comencemos por ver cómo es que esta pseudo-clase, oficialmente denominada en las especificaciones como "matches-any", se utiliza en una aplicación. Después hablaremos sobre la manera en la que está reemplazando tanto a :matches() como a :any(), y por qué tiene más sentido usar la palabra "is" ("es" en inglés) en lugar de las anteriores.

#CSS

selector :is() 🎉
el sucesor de :any() y :matches())

echa un vistazo a nuestra plática, este es un fantástico gif que hice con XD y que muestra lo que puede hacer la sintaxis del selector :is(). ¡Emociónense por el Chrome Dev Summit! https://t.co/0r2CcUx9Hv pic.twitter.com/wSuGOsDLvZ
— Λdam Λrgyle (@argyleink) 7 de noviembre de 2019

Ejemplos del uso de :is()

Probablemente puedas intuir la funcionalidad de :is() con tan solo verla: es una manera de verificar si un elemento es (is, en inglés) una cosa determinada, trabajando esencialmente como un booleano, como el if que encontrarás en muchos lenguajes de programación. Por ejemplo, en sus formas más sencillas estos dos selectores son funcionalmente iguales::

1	article {...}

1	:is(article) {...}

En ambos casos el estilo se activará si un elemento es un article..

También puede usarse para detectar múltiples tipos de elementos en una sola declaración a través de una lista separada por comas. Por ejemplo, de nuevo, estos dos selectores son funcionalmente iguales::

1	article, section, aside {...}

1	:is(article, section, aside) {...}

Por sí solo esto puede no parecer muy interesante, añade una complejidad adicional en todo caso, pero se vuelve especialmente útil cuando se usa para focalizar elementos hijos. Por ejemplo, supongamos que quieres enfocarte en elementos h1, pero solamente cuando sean hijos de un elemento article, section o aside. Por lo general necesitarías escribir::

article h1,
section h1,
aside h1 {
font-weight: 900;
}

Sin embargo, si en lugar de eso se usa :is(), esto se puede comprimir a::

1	:is(article, section, aside) h1 {
2	font-weight: 900;
3	}

Su eficiencia realmente comienza a aumentar cuando tienes múltiples elementos padres e hijos para los que quieras hacer pruebas. ¿Qué sucede si, en lugar de solamente enfocarte en los elementos hijos h1, como en el ejemplo anterior, quieres enfocarte en todos los elementos hijos de tipo encabezado? Sin :is() (y sin usar clases con fines ilustrativos) necesitarías escribir::

article h1, article h2, article h3, article h4, article h5, article h6,
section h1, section h2, section h3, section h4, section h5, section h6,
aside h1, aside h2, aside h3, aside h4, aside h5, aside h6, {
font-weight: 900;
}

Pero con :is(), en vez de eso solamente necesitas::

1	:is(article, section, aside) :is(h1, h2, h3, h4, h5, h6) {
2	font-weight: 900;
3	}

Por qué :is() sustituye a :any() y a :matches()

En versiones anteriores de las especificaciones “matches-any”, esta pseudo-clase utilizaba el nombre :matches() antes de que su nombre fuera cambiado a is:() posteriormente. Un selector más antiguo es :any(), sin embargo, a diferencia de :is() o :matches(), no es compatible con selectores complejos..

La razón principal por la que tiene sentido usar :is() en vez de algo más proviene de otra pseudo-clase de estilo booleano que funciona de manera inversa, siendo esta :not(). Con esta pseudo-clase "matches-none" puedes aplicar estilo a todo excepto por una colección de selectores..

It makes good grammatical sense to pair is with not

Por ejemplo, anteriormente nos enfocamos en todos los encabezados que son hijos de elementos article, section y aside. Con :not() podemos enfocarnos en todos los encabezados que no sean hijos de estos elementos::

1	:not(article, section, aside) :is(h1, h2, h3, h4, h5, h6) {
2	font-weight: 400;
3	}

Tiene buen sentido gramatical emparejar :is() con :not(), haciendo así una combinación lógica e intuitiva, y esta es la razón principal por la que está reemplazando a :any() y a :matches(). Dicho lo anterior, el hecho de que es más corta al escribir también se ha citado como una de las razones por las que es una mejora..

Estado actual y soportet

La pseudo-clase “matches-any” :is() actualmente se encuentra en un estado preliminar funcional..

Puedes probarla ahora principalmente en Firefox, Chrome y Safari, sin embargo, los tres navegadores aún están usando el antiguo nombre :any(), que debe usarse con prefijos de proveedores. Para Firefox usa :-moz-any(), y para Chrome y Safari usa :-webkit-any(). Chrome y Safari también son compatibles con :matches()..

Alternativass

También puedes usar :any() y :matches() para crear alternativas a :is(). Por ejemplo, un conjunto de alternativas independientes del navegador podrían verse así::

:-webkit-any(article, section, aside) h1 {
font-weight: 900;
}
:-moz-any(article, section, aside) h1 {
font-weight: 900;
}
:matches(article, section, aside) h1 {
font-weight: 900;
}
:is(article, section, aside) h1 {
font-weight: 900;
}

Los desarrolladores detrás de PostCSS también quieren agregar la capacidad de automatizar la adición de estas alternativas en tu código.

Concluyendop

La pseudo-clase :is() va a hacer posible gestionar una focalización de elementos mucho más compleja que antes, usando CSS básico en donde antes probablemente hubiéramos necesitado un pre-procesador para gestionar la tarea. Todos podemos esperar con entusiasmo a que salga de su estado preliminar y que logre una compatibilidad completa con el navegador.

Para obtener más información, consulta los enlaces listados a continuación::