CSS :is() & :where(): As Novas Funções Para Escrever CSS Melhor

[@rodriguesabner]

Muito bom!!! As vezes até acho que é canal gringo com o título traduzido de tão bom que o conteúdo é! Obrigado

[@dpwoficial]

hahaha, quem sabe, um dia, os gringos não traduzem a gente... ;)

[@Sr.zangao]

O que são diretivas no css?(sou novato). A próprosito amo seu canal. É o canal com o conteúdo mais detalhado de css, que eu já vi do youtube

[@dpwoficial]

Tecnicamente, :where() e :is() são pseudo-classes, mas eu chamo de "diretiva" como uma maneira de englobar features de CSS e ver a coisa de uma maneira mais global na linguagem. E obrigado pela força! 👊

[@TheIzabellada]

Que maravilha. Essas novas funções do CSS vieram em uma boa hora, economizam linhas de código.

[@dpwoficial]

Yep! 😁

[@RicardoHugo]

Excelente. Continue sempre com esse quadro de Atualizações.

[@dpwoficial]

Pode deixar, Ricardo. 👍

[@zeusjammer]

O X da palavra Sintaxe tem som de KS não de SS, fora isso, o conteudo é excelente

[@dpwoficial]

De onde você tirou isso, meu jovem?

[@gracasantos2893]

Excelente explicação!

[@dpwoficial]

Obrigado.

[@thiagomoraes791]

conteúdo foda, + inscrito

[@dpwoficial]

vlwww

[@salvimateus]

fantástico man

[@dpwoficial]

Is we!

[@hamoncordova7431]

Sempre um conteúdo foda!

[@dpwoficial]

Tá sumido, meu caro!

[@hamoncordova7431]

@@dpwoficial Vou voltando aos poucos hahaha. Mas não perco nenhum vídeo!

[@luiztavares7029]

Perfeito !! Obrigado por compartilhar conhecimento.

[@dpwoficial]

Imagina, Luiz. A gente que agradece a participação. Apareça mais por aqui!

[@macielsevilha]

Muito bom

[@dpwoficial]

Vlw, Maciel!

[@1969kadu]

Valeu, obrigadăo pela dica de ouro.

[@dpwoficial]

Disponha!

[@l7cass567]

where e is podem ser usados para especificar determinada transição? por exemplo quero que ao cursor ficar em cima de uma img que está dentro da div.image apareça um texto específico que está dentro da div.image. ex: Text

[@dpwoficial]

Esse efeito não precisa das novas funções; com um simples :hover você consegue.

[@marlonpassos9674]

Otimo video como sempre, se eu soubesse disso antes teria economizado algumas boas linhas hehe. Mas essas duas funções ja é recomendado usar em produção ?

[@dpwoficial]

Vlw, Marlon. No finalzinho, mostro a tabela de compatibilidade atual. Se for para sites sem muitos requisitos de retrocompatibilidade, pode mandar ver.

[@painnagato7617]

ja prevejo framework com isso que na hora que for preciso mudar não vai nem q o cão atente

[@dpwoficial]

hehehe, é... Pessoal vai ter que ser responsável. 🙄

[@caransoares]

Olá, boa noite... Na especificidade é obrigatório conter uma tag ?

[@dpwoficial]

Não. Cada tipo de seletor tem sua especificidade, não somente .

[@caransoares]

@@dpwoficial Mas se fizermos isso o resultado muda... . .whatever :is(p, .card){ color: red; } .whatever .card (.card em lugar do ) { color: blue; }

[@dpwoficial]

@@caransoares Não consegui entender seu exemplo, Carlos. Mas, basicamente, a regra é: - :is() pega a maior especificidade do grupo - :where() tem especificidade 0

[@caransoares]

@@dpwoficial Sim...isso foi muito bem explicado, mas percebi que essa especificidade só funciona para e não para .card... .whatever :is(p, .card){ color: red; } .whatever .card{ color: blue; } ///Neste caso o .card perde a especificidade e fica azul/// /////////////////////////////////////////////////////// um outro caso: .whatever :is(p, article){ color: red; } .whatever p{ color: blue; } ///substituindo .card por article o perde a especificidade/// É isso mesmo? Se for algo que deixei passar no vídeo, me perdoa...vou assistir novamente...Um abraço.

[@brunosantanadev]

To falando que a próxima versão do css será um JS da vida Rs...

[@dpwoficial]

🤔

[@g10brasilvideos]

Tarcio, uma duvida, que pode parecer amadora, eu nunca usei SCSS, então por isso n entendo sobre uso de funções com esse recurso. O que gostaria de saber e se essas novas funções podem ser usadas com css "normal'?

[@dpwoficial]

Opa, Guga! Aí é que está: essas funções não são de Sass; já dá para usar no CSS puro! :D

[@g10brasilvideos]

@@dpwoficial Opa, que maneiro, muito obrigado, por compartilhar e tirar minha duvida!

[@dpwoficial]

@@g10brasilvideos Imagina. Att

[@iamcoelho]

Galera ainda tá usando !important pra forçar a aplicação das regras? Ela se sobrepõem a essa característica nativa de :is?

[@dpwoficial]

Galera tá usando muito, infelizmente... Usando !important, a declaração CSS vai se sobrepor à que não tem sim.