Una mirada más cercana a las funciones :where() y :is() en CSS

Una mirada más cercana a las funciones :where() y :is() en CSS

:where()Las funciones aceptan una lista de selectores como argumentos, lo que le permite escribir menos código y diseñarlos al mismo tiempo. En este artículo, analizaremos :where()las funciones de pseudoclase y demostraremos cómo usarlas en un entorno de producción. Revisaremos :where()superposiciones, prioridades y seguridad relacionadas con las funciones. También veremos algunos casos de uso específicos y discutiremos sus similitudes y :is()diferencias con las funciones.

1. ¿Qué es la función: dónde ()?

Según MDN , :where()el selector es una función de pseudoclase CSS que acepta una lista de selectores como argumento y aplica el estilo dado a cualquier elemento de la lista, por lo que es :where()útil para acortar una lista de selectores larga.

En CSS, cuando se aplica la misma regla de estilo a varios elementos al mismo tiempo, normalmente escribimos una larga lista de selectores separados por comas.

A continuación se muestra un ejemplo en el que aplicamos el mismo estilo a headertodas las etiquetas dentro maindel elemento y al elemento :footer<a>

header a:hover,
main a:hover,
footer a:hover {
    
    
  color: green;
  text-decoration: underline;
}

En el fragmento de código anterior, solo hemos seleccionado tres elementos, pero si hay una gran cantidad de elementos y selectores, el código comenzará a verse desordenado y puede resultar difícil de leer y comprender. Aquí es :where()donde entran en juego las funciones de pseudoclase.

Así es como se :where()vería el ejemplo anterior usando la función:

:where(header, main, footer) a:hover {
    
    
  color: red;
  text-decoration: underline;
}

headerCuando el navegador llega a este fragmento de código, el código le indica que busque los selectores mainy footerque ubique todas alas etiquetas dentro de estos selectores. Luego, cuando el usuario pasa el cursor sobre cualquiera de estas aetiquetas, el navegador debe aplicar los estilos especificados, en este caso rojo y subrayado. Esta función de pseudoclase nos permite escribir una larga lista de selectores de una forma más corta y fácil de entender.

2. Combinación, división y superposición: función donde()

Usando :where()funciones, podemos agrupar elementos de muchas formas y combinaciones. Podemos :where()colocar la función al principio, en medio o al final del selector. Aquí hay un ejemplo con múltiples selectores y estilos:

/* first list */
header a:hover,
main a:hover,
footer a:hover {
    
    
  color: green;
  text-decoration: underline;
}

/* second list */
article header > p,
article footer > p{
    
    
	color: gray;
}

/* third list */
.dark-theme button,
.dark-theme a,
.dim-theme button,
.dim-theme a{
    
    
	color: purple;
}

Aquí está el mismo código, :where()reescrito usando una función:

/* first list */
/* at the beginning */
:where(header, main, footer) a:hover {
    
    
  color: red;
  text-decoration: underline;
}

/* second list */
/* in the middle */
article :where(header, footer) > p {
    
    
	color: gray;
}

/* third list */
/* at the end */
.dark-theme :where(button, a) {
    
    
	color: purple;
}
.dim-theme :where(button, a) {
    
    
	color: purple;
}

En la primera lista, especificamos que los estilos rojo y subrayadoheader deben aplicarse al elemento mainy al elemento al pasar el mouse footer. En la segunda lista, especificamos que articlelos elementos headery footerdeben tener un estilo gris .

Para mayor claridad, dividimos la tercera lista en dos :where()funciones. En esta lista, especificamos que el estilo de los elementos y en .dark-theme, .debe ser violeta .dim-themebuttona

Ahora reduciremos aún más la tercera función de lista, convirtiéndola en una :where()función:

/* stacked */
:where(.dark-theme, .dim-theme) :where(button, a) {
    
    
  color: purple;
}

Esta estrategia para reducir listas de selectores complejas se llama apilamiento.

3. :donde() prioridad del selector

:where()Los selectores de funciones siempre tienen prioridad cero. Por lo tanto, cualquier elemento al que se dirige esta función también obtiene automáticamente una prioridad de 0. Esto nos permite cambiar fácilmente el estilo de cualquier elemento.

A continuación se muestra un ejemplo de una lista ordenada HTML:

<div>
  <h2>First list no class</h2>
  <ol>
    <li>List Item 1</li>
    <li>List Item 2</li>
  </ol>
</div>
<div>
  <h2>Second list with class</h2>
  <ol class="second-list">
    <li>List Item 1</li>
    <li>List Item 2</li>
  </ol>
</div>

<div>
  <h2>Third list with class</h2>
  <ol class="third-list">
    <li>List Item 1</li>
    <li>List Item 2</li>
  </ol>
</div>

En el fragmento de código anterior, hay tres listas ordenadas con dos elementos en cada lista. La segunda y tercera listas tienen una clase determinada, mientras que la primera lista no.

Sin ningún estilo, podemos ver que cada lista está en orden numérico:

Ahora, agreguemos algo de estilo:

:where(ol[class]) {
    
    
	list-style-type: none;
}

En el fragmento de código anterior, utilizamos :where()la función de pseudoclase para seleccionar todas las etiquetas a las que se aplica la clase ol.

A continuación, vemos la segunda y tercera listas, las cuales tienen una clase a la :where()que apunta la función, con su eliminación list-style-type:

Ahora, agreguemos un estilo adicional:

:where(ol[class]) {
    
    
  list-style-type: none;
}

.second-list {
    
    
  list-style-type: disc;
}

Solo para la segunda lista que usa el nombre de la clase, podemos ver que ahora aparece como viñetas, mientras que la tercera lista todavía no tiene ningún tipo de estilo de lista:

Podrías estar pensando: "¿No debería ser así, ya que los nuevos estilos están escritos bajo los :where()estilos de función?" No, no lo es, como veremos en un momento.

:where()Veamos qué sucede cuando movemos el código que acabamos de agregar a la parte superior del bloque de código y la sección de funciones a la parte inferior:

.second-list {
    
    
  list-style-type: disc;
}

:where(ol[class]) {
    
    
  list-style-type: none;
}

Observe que el estilo aún no ha cambiado:

Recuerde, :where()las funciones tienen prioridad cero.

4. Seguridad del selector :where()

Para las listas de selectores, si el navegador no reconoce un selector en la lista, la lista completa de selectores se considerará inválida y no se aplicarán sus estilos. Sin embargo, :where()este no es el caso de las funciones de pseudoclase.

Si :where()un elemento de una función es el objetivo de un selector no válido, el elemento no obtendrá ningún estilo. Los elementos restantes seguirán teniendo estilo. :where()La función saltará los selectores no válidos al siguiente selector (válido). Por eso :where()se llama selector seguro.

En el siguiente ejemplo, :unsupportedeste es un selector no válido para muchos navegadores. El siguiente código se analizará correctamente y seguirá coincidiendo con :validlos selectores, incluso en :unsupportednavegadores que no admiten selectores, como este:

:where(:valid, :unsupported) {
    
    
  ...
}

Sin embargo, en los navegadores que no admiten :unsupportedselectores, se ignorará el siguiente código, incluso si admiten :validselectores:

:valid, :unsupported {
    
    
  ...
}

5. Casos de uso especiales de la función :where()

Hay algunos casos de uso especiales en los que :where()una función puede ser una herramienta útil, pero también hay situaciones en las que se debe evitar su uso. Casi todos los problemas que surgen al utilizar :where()funciones de pseudoclase se reducen a prioridades. Como :where()tiene prioridad cero, debemos elegir con mucho cuidado cuándo y dónde utilizar esta función.

Primero, veamos algunos casos de uso en los que esto :where()podría resultar particularmente útil.

5.1 Mejorar el restablecimiento de CSS

Un restablecimiento de CSS es cuando se carga un conjunto de reglas de estilo antes que cualquier otro estilo para borrar los estilos integrados del navegador. Los restablecimientos de CSS generalmente se colocan en la parte superior o al principio de las hojas de estilo CSS, por lo que se cargan primero. Los desarrolladores suelen utilizarlos para eliminar los estilos predeterminados que los navegadores dan inicialmente a algunos elementos, antes de comenzar a diseñar sus elementos y sitios web. El restablecimiento de CSS también puede ayudar a eliminar inconsistencias entre diferentes navegadores.

Los restablecimientos de CSS son estilos temporales que se cambian más adelante durante el proceso de diseño. Sin embargo, dependiendo de la simplicidad o complejidad del selector para el elemento o grupo de elementos utilizados en el restablecimiento de CSS, puede resultar difícil anular el estilo inicial más adelante en el código.

Por ejemplo, digamos que configuramos todas alas etiquetas de nuestro sitio web en verde . Luego, decidimos aplicar estilo a todas headerlas aetiquetas en gris .

Debido a la complejidad de la selección en el restablecimiento de CSS, no se aplicará el nuevo estilo (gris). El selector en el reinicio tiene una prioridad más alta que el selector usado en el código subyacente solo para headerla etiqueta <in> , por lo que no se aplica ningún estilo gris.a

Ahora, si :where()agregamos la función de pseudoclase al reinicio de CSS, esto automáticamente dará prioridad cero a todos los elementos en el reinicio. Esto nos facilita cambiar el estilo más adelante sin tener que preocuparnos por conflictos de prioridad.

5.2 Eliminar estilos

:where()Las funciones son útiles si desea eliminar o cancelar un estilo o reducir la prioridad de un elemento o grupo de elementos .

5.3 Mantener el estilo

Si desea asegurarse de que el estilo o la prioridad de un elemento o conjunto de elementos no cambie en ningún momento en el futuro, no utilice :where()pseudoclases.

6. ¿Qué es la función :is()?

:is()Las funciones se comportan casi :where()igual que las funciones. Puede usarlo para simplificar selectores complejos o puede colocarlo al principio, en el medio o al final de un selector, como una :where()función.

También es seguro, al igual que :where()las funciones. Entonces, cuando uno de los selectores no es válido, el navegador ignora ese selector, pero los estilos del selector válido se agregan al elemento seleccionado.

7. La diferencia entre las funciones :where() y :is()

La diferencia entre estas dos funciones es que :where()la prioridad de una función es siempre cero, mientras que :is()la prioridad de una función está determinada por la prioridad de su argumento más específico. Por ejemplo, veamos el headertexto del párrafo dentro del elemento:

<header>
  <p>This is a paragraph text.</p>
</header>

Luego, intentemos usar cuatro selectores diferentes para cambiar el color del texto:

header p {
    
    
  color: blue;
}

:is(header, section) p {
    
    
  color: green;
}

p {
    
    
  color: blue;
}

:where(header, section) p {
    
    
  color: blue;
}

El primer selector establece el color del texto en azul. :is()El segundo selector tiene la misma prioridad que el primer selector, pero como está después del primer selector, cambia el color del texto de azul a verde . El tercer selector tiene menor prioridad que el primer y segundo selector y no tiene ningún efecto sobre el texto. Finalmente está el cuarto, que utiliza :where()la función que no tiene efecto sobre el texto debido a su prioridad cero.

8. Compatibilidad del navegador

Todos los navegadores, ya sean de escritorio o móviles, son totalmente compatibles con :where()las funciones CSS, incluida la compatibilidad con sus funciones de seguridad. Por lo tanto, no tiene que preocuparse por si sus estilos se mostrarán correctamente en el navegador.