Novas funcionalidades do CSS (:is() e :where())

Yasmim Vieira — Sun, 25 Apr 2021 11:44:26 +0000

Recentemente chegou novas funcionalidades no CSS que facilitam demais a automatizar quando queremos selecionar listas de seletores para usar pseudo-classes em algum elemento. Portanto, hoje veremos sobre as funções :is() e :where(), o que elas são, como usar, principais características e compatibilidades.

O que são pseudo-classes?

Antes de mais nada, vamos deixar claro o que são pseudo-classe. Então, pseudo-classe é uma palavra-chave do CSS que colocamos em seletores para alterar o estado inicial dele, por exemplo: o :hover é usado para alterar o estado de um elemento quando o mouse passa em cima dele.

Existem vários outros pseudo-classes, mas hoje iremos abordar dois em específico.

O que é :is() e :where()?

:is() e :where() são funções pseudo-classes do CSS que nos possibilita colocar como argumento uma lista de seletores, sendo assim selecionamos tudo de uma vez só. Assim, o código fica muito mais limpo e fácil de manusear.

Elas são muito semelhantes e simples de usar, então agora vamos pensar em como coloríamos um hover em uma tag p que está em vários seletores diferentes, seria algo parecido com isso:

header p:hover,
main p:hover,
footer p:hover {
  color: red;
  cursor: pointer;
}

A problemática de fazer dessa forma, é que estamos repetindo várias vezes a mesma coisa e o que essas novas funções fazem é deixar esse código mais enxuto, simples e limpo, pois com elas podemos selecionar vários seletores de uma só vez e fazer o hover.

Exemplo de :is() e :where()

:is(header, main, footer) p:hover {
   color: red;
   cursor: pointer;
}

:where(header, main, footer) p:hover {
   color: red;
   cursor: pointer;
}

Ou seja, dessa forma juntamos todos os seletores em um lugar e conseguimos colocar o hover no p, sem precisar repetir.
Mas aparentemente eles não tem nada de diferente certo? Errado, a principal diferença entre os dois é a especificidade.

Especificidade é quando os navegadores definem os valores que são mais relevantes naquele contexto, ou seja, quando um item tem maior especificidade ele se sobrepõe ao que tem menor prioridade.

Nesse caso, o :is() tem maior especificidade, enquanto o :where() tem 0, então quando utilizarmos os dois juntos, o :is() vai sobrepor o :where() quando estivermos indicando valores iguais.

Por exemplo

Perceba, que a cor que prevalece é o azul já que o :is() tem maior relevância.

Forgiving Selector Parsing

Essas funções também aceitam o termo: Forgiving Selector Parsing ou "Esquecer o seletor". Esse conceito basicamente produz o efeito de passar por cada seletor analisando todos eles e verificando se são válidos ou não. Mas, invés de dar erro, ele simplesmente ignora aqueles que são inválidos e segue o jogo com os seletores válidos.

Exemplos

:is(header, footer, main, :selector) p: hover {}

Nesse caso, eu estou colocando como um "seletor" uma pseudo-classe, então ele é um seletor inválido, mas ele não estoura nenhum erro, apenas segue e prioriza os seletores válidos:

Compatibilidade nos browsers

Por serem funcionalidades novas a compatibilidade é consideravelmente baixa em alguns browsers, porém pode ser interessante começar a usa-las caso isso não prejudique a usabilidade do seu software. Abaixo está uma tabela das duas funções e suas aceitações nos navegadores:

:is()

:where()

Agradecimento

Por hoje é só galera, espero que tenham gostado, esse post é de uma série que estou iniciando, onde vou postar dicas de css.
Espero que tenham gostado e muito obrigada pela leitura!

Gostou do post?

Deixe seu like
Deixe seu feedback e sugestões
Compartilhe com seus amigos

Você também pode me acompanhar em:

DEV Community: Yasmim Vieira