:has() Vai Mudar o CSS para SEMPRE!
Вставка
- Опубліковано 16 сер 2022
- :has() é a novidade CSS que a comunidade estava esperando há muito tempo. Vem saber porque has muda TUDO no CSS!
Já pensou em um seletor CSS que permite verificar se um elemento específico existe dentro de um elemento-pai?
Até então, isso não era possível com CSS, mas, com a chegada da pseudo-classe :has(), CSS se torna muito, mas muito mais poderosa.
Já temos determinados combinadores que permitem verificar seletores adjacentes, descentes etc., mas, até então, nada que permitisse verificar a ascendência!
Não é a toa que :has está sendo chamado de "seletor pai" ( ou "seletor do elemento pai") por muitos.
O que não está inteiramente errado, mas o :has() vai muito além de verificar se um elemento contém determinado filho.
Assista ao vídeo para saber como usar o seletor :has(), que muda TUDO na estilização Web, para conseguir fazer verificações avançadas e subir o nível do seu CSS.
⭐ Garanta sua vaga na próxima turma do curso de CSS
www.cssalemdosensocomum.com.br/
💬 Entre na comunidade exclusiva dpw para conversar sobre o conteúdo deste vídeo
/ discord
🌐 Artigo + exemplos de :has() no blog do Ahmad Shadeed
ishadeed.com/article/css-has-...
==========
📷 Equipamentos usados para gravar este vídeo
- Sony Alpha a6400: amzn.to/3LZ9Zkv
- Cartão 128GB Extreme PRO SDXC: amzn.to/3rqVPRg
- Tripé Weifeng WT6734: amzn.to/3LYWUb4
==========
Assine o canal! bit.ly/dpw-youtube
- Facebook: / desenvolvweb
- Instagram: / desenvolvweb
- Twitter: / desenvolvweb
Conheça o blog desenvolvimento para web: desenvolvimentoparaweb.com/
![Lp. Последняя Реальность #107 РОДНОЙ ДОМ [Финал] • Майнкрафт](http://i.ytimg.com/vi/IK3QKzKUlHM/mqdefault.jpg)
Tárcio é o cara mais foda que conheço no CSS. Sempre com uma PUTA DIDÁTICA, explica bem pra caramba, simples e direto! Parabéns!!
Que eeesso, Isack! Brigadasso! :D
Dou aula de CSS faz 10 anos. Esperei isso por todo esse tempo. Tive que aprender JS só para contornar a falta desse seletor. Não sei porque demorou tanto.
De uns anos para cá, o CSS tá avançando bem rápido. A partir de agora, vamos esperar cada vez menos por novas features como essa. :)
E pq n aprendeu js antes? Quem programa só com css?
Nossa, incrível!! Em breve o CSS vai tomar bastante espaço do Javascript, grazadeus
"grazadeus" 😆
Caraca, ficou muito muito mais facil de fazer coisas q antes eram tao complexas! Gostei muito e com certeza vou usar bastante! Parabens pela aula e didática!
Com certeza, Elton. Eu escrevi aí no título e é verdade: vai mudar o CSS!
Muito boa essa adição. Sempre tive problemas com isso, pois pra contornar a falta do has, eu tinha q usar js e acabava tendo que controlar um js + css pra uma coisa que deveria ser simples. Vai facilitar muito esse has
Justamente! CSS FTW o/
Oque antes era apenas uma linguagem turing machine hoje é turing complete por cálculo e condicionais. CSS envoluindo cada vez mais!
o/
didática mt boa e ótimos exemplos! +1 sub
vlwww
Que aula meus amigos!!! Valeu por esse conteudo maravilhoso!!
Que isso, eu que agradeço o comentário. :)
*_Wow!_* Achei super incrível tanto a novidade como todo o conteúdo apresentado.
Bom demás!
Sempre com uma didática afiadíssima. Muitos parabéns!
vlwww
Parabéns pelo canal, didática e tudo mais. Excelente. Virei inscrito.
Vlw, Marcelo!
Ótimo conteúdo !!!!!
Muito obrigado, Clinton!
QUE VÍDEO BOM! Primeira vez que vejo um vídeo do teu canal, UA-cam me deu uma ótima recomendação.
Que bom que gostou. Compartilha com a galera para eles também receberem essas recomendações.
Cara, que didática perfeita!!!
Opa, ainda chegamos lá, Júlio... rs
Amei!
😊
ótima didática parabéns mano ! muito bom !
Muito obrigado!
Sensacional!
Mudança de tema 🧡
o/
Muito bom o vídeo e explicação 👍
Obrigado 👍
Cara! Você explica bem demais, parabéns
Muito obrigado! 😁
Eureka! Genial... obrigada!
Tudo nosso. ;)
Parabéns pelo conteúdo. Muito bem explicado.
Obrigado, Valdemiro.
muito legal, deixou bem claro pra mim muitas coisas, agora só preciso praticar mais, obrigado ! ✌✌
Opa, tamos aê.
Mano melhor canal, já primeira vez que vi esse tal de has ai, já gostei que trás novidades
Muito obrigado! 😁
Conteúdo bom demais!
vlwww
Meninão.. Saudades! Parabéns pelos vídeos.. Acompanho sempre que possível! Você é referência em CSS no Brasil 👊
Não some, pô! 😭
Sensacional!
Realmente, é demais!
Top demais
CSS FTW
Muito bom meu camarada, estudamos no Antônio Carlos. Sempre muito inteligente e didático.
Faaala, Jorge! Sumidaaasso! :D
@@dpwoficial Abraço meu amigo e muito sucesso na carreira.
Parabéns pelo conteúdo excelente didática. Muito bom saber que o CSS está evoluíndo nesse aspecto. Só de pensar que possíveis elementos poderão ser exibidos ou não com CSS puro fez meu coração ficar mais quentinho!
Muito obrigado e concordo totalmente, Bruno!
Seu canal é top de mais, confesso que me embanano muito com CSS, mas seus vídeos estão me ajudando bastante. Obrigado.
Fico feliz em saber, Leandro! Estamos aqui para isso. :)
mt bomm!!
vlwww
Muito bom!!!!! Imagine fazer várias combinações com esse carinha
Tô pensando em fazer uma live para mostrar mais possibilidades... :has() é realmente INCRÍVEL!
Sensacional
o/
que coisa incrível! ansioso pra poder usar.
Dois!
cara.. que legal!
👍
Cara, o CSS está cada dia mais incrivel 😄
Sim, tá sensacional! 😭
O correto é a CSS
@@MarcosAntonio-hp9rt Se for para ser extremamente preciso, seria "as CSS". =P
@Cailton Oliveira Costa Tipo isso?
blog.logrocket.com/native-css-nesting/
@Cailton Oliveira Costa Tipo isso? blog.logrocket.com/native-css-nesting/
Eu só uso Styled components, mas é mt bom saber disso, vai ajudar mt
Já já tá chegando no styled.
Muito bom
Demais!
top!!!
vlwww
Poderoso demais! Sempre procuro usar css para fazer maior parte das coisas antes de partir para o uso JavaScript.
Eu também! E cada vez mais está sendo possível com as novas features que vão chegando em CSS.
perfeito pra que usa wordpress e um adianto !! obg professor
De nada. Volte sempre.
interessante!
Demás!
Aos pouco css ta tirando muito funcionalidade que só era possível com javascript
Sim. Daqui a pouco teremos o JS-in-CSS. =P
Eu não sou front, sou designer. Mas amo css, e cada dia o amor cresce mais kkkk
Mais 2 ou 3 novas features e você será convertido... rsrs
@@dpwoficial kkkkk né muito difícil não
Finalmenteeeee
\o/
Mas um função pra minha engine game css 😋😍😍😍😍
Ó, sério isso? Que massa.
Simplifica muita coisa.. mas uma outra forma que daria pra executar essa ideia (de forma parcial) apenas com o uso de CSS é com o uso do nth-of-type... Um exemplo simples para estilizar uma tag caso ela contenha filhos do tipo seria fazer p a:nth-of-type(n) { color: red; }, essa mesma regra pode ser aplicada em classes e ids, caso você queira estilizar tags específicas.. mas com certeza a leitura do has ainda é muito mais simplificada e também abre a possibilidade de estilizar alguns elementos em situações que o nth-of-type não conseguiria, que é por exemplo quando tiver um determinado valor selecionado na tag select como você mostrou no vídeo.... ótima dica e ótima funcionalidade para o css!
Não seria a mesma coisa, Calvin.
No exemplo, você estaria estilizando o link, não o parágrafo.
O seletor-chave de :has() é completamente diferente. :)
@@dpwoficial Ah sim, acho que interpretei errado. O :has() aplica o estilo ao elemento "pai" da regra.. Boa, realmente é totalmente diferente, isso ajuda muito a não ter que inserir JS em alguns casos
@@calvinteixeira1087 Isso mesmo. O :has() subiu o CSS para outro nível!
CSS é lindo demais!!!
😭
O foda é que até poder usar isso com segurança em todos navegadores demora tanto.... Isso sempre me deixa de cara com novas features de linguagens
Demora um pouco mesmo... Mas já já taí pra gente usar à vontade. ;)
@@dpwoficial kkkk verdade, mas bate uma ansiedade pra já sair usando
Oloko, adicionaram uma "condicional" no CSS
ueheuhe Algo parecido... ;)
Tárcio por favor, faz ai um mini curso de web Accessibility. aqui no youtube tem quase nada em pt. eu tenho procurado referencias para leitura e n encontro quase nada. porfavor, faz um mini curso ou mesmo uma live para introduzir esses conceitos e talvez com um mini projecto pratico.
Boa ideia!
Enquanto não fica pronto, dá para você consultar nossos artigos no blog: desenvolvimentoparaweb.com/tag/acessibilidade/
@@dpwoficial valeu Tárcio, vou esperar com grande animo.
Adorei o conteúdo, realmente é MUITO útil! Queria saber se tem como usar juntamente com o Styled-components, até onde tentei, não tive sorte.
Ainda não é possível "oficialmente" nem com CSS puro; é um suporte que vai chegar em breve aos navegadores.
Uma vez que esteja OK essa parte, aí o styled-componentes tem que fazer a mágica por debaixo dos panos para passar o código para CSS usando :has(), entendeu?
@@dpwoficial Entendi sim! Obrigado pela paciência em explicar e pelo conteúdo. Espero por mais vídeos assim!
@@cometarioxD Eu que agradeço a participação. :)
Oi Márcio! Sou UX/UI e estou à procura de um curso completo de front-end. Normalmente são muito superficiais, sem conhecimentos atualizados de OOCSS, e interação com o deploy do designer. Gostei muito da forma como ensinas. Tem algum curso que recomendas? Vi que usas o Sublime, algum motivo? Tenho preferência pelo Visual Studio como IDE, mas adapto
Oi, Marta. Tudo bem?
Curso completo de front-end ainda não temos, mas temos um sobre boas práticas, convenções e boas práticas que aborda OOCSS e outras metodologias. O link tá na descrição aqui do vídeo; cadastra seu e-mail que vamos abrir turma ainda este ano.
PS: esse editor não é o Sublime, é o site codepen.io/
Legal, embora ambos atualmente ainda são possíveis com CSS então não vejo muita novidade:
Primeiro caso: só adicionar uma classe pra diferenciar e identificar a imagem dentro
Segundo caso: pode sim envolver em uma label, e ter um dentro logo após o input pra seguir a mesma lógica do :checked + span (sem precisar de JS)
Terceiro caso: poderia usar o css pra figcaption normal, se não houver figcaption simplesmente o css não teria elemento pra aplicar a borda
Primeiro caso: foi feito sem classe adicional.
Segundo caso: Foi feito sem a necessidade de tags adicionais.
Terceiro caso: A regra não é para aplicar borda no figcaption.
Vindo aqui apenas para reclamar q já faz quase 1 ano desse atributo e o Mozilla ainda não incluiu.
Devagar e sempre... 😬
Você sabe quando mais ou menos o :has() vai ser suportado pelos navegadores sem usar os suports????
O @supports não é para dar suporte antecipado; ele somente verifica se tem ou não suporte (ua-cam.com/video/7d23VlVvmQw/v-deo.html).
Chrome e Safari já já vão suportar (caniuse.com/css-has); o restante, não tenho ideia. =/
Bruxaria purinha...
🧙
Meu Deus cara, é melhor do que eu imaginava, já tava de olho nele mas não cheguei a usar porque o suporte está fraco ainda, mas e quanto ao PostCSS, tem como usar com ele? Eu fico me perguntando se tem porque parece um negócio meio que impossível de aplicar apenas com CSS fazendo uma transformação, que é o que o PostCSS faz
Não sei se o PostCSS tem alguma coisa... Não cheguei a procurar. Se encontrar, dá uma ideia.
O problema é que eu já estou começando a pensar nos seletores com :has() com antecedência e tô começando a ter dificuldade de viver sem... aeueahe
@@dpwoficial É por isso que eu ainda não me aprofundei nele, eu sei que vou ficar dependente, rs, é um negócio muio revolucionário pro CSS, não vejo a hora de ter 90% de uso no CanIUse
Ele já está funcionando com o npm sass ?
Sass não é para trazer recursos ainda não lançados para CSS; é um pré-processador CSS.
Ele só permite escrever de um jeito diferente, mas, no final, usa CSS puro.
Então, só quando tiver suporte para CSS puro que dá para usar com Sass também, entendeu?
gente alguem me explica o que é o outline? as vezes eu dou "none" nele em determinados componentes, tipo inputs e buttons pq me ensinaram assim, mas n sei oq de fato ele é
developer.mozilla.org/pt-BR/docs/Web/CSS/outline
Esotu há meses ansioso por um curso seu de css, convenções, etc. Quando vai sair, Tárcio:
Daqui a pouco vamos abrir uma turma nova; cadastra seu e-mail para saber certinho: www.cssalemdosensocomum.com.br/
@@dpwoficial já cadastrei meus dois e-mails para não passar despercebido 👀
@@thalesvictor3212 haha Aí sim. Pode deixar que em breve vamos entrar em contato sobre isso. ;)
@@dpwoficial infelizmente eu perdi a inscrição para o curso que saiu em dezembro do ano passado. Quando vi o e-mail já tinha se passado um dia, infelizmente. Quando pretende abrir outra turma?
@@thalesvictor3212 Não sei ao certo, mas não deve demorar muito. Fica ligado nos e-mails. 👍
Vi no canIuse que o firefox ainda n da suporte (por default)...será quando que habilitam isso igual no chrome?
Não faço ideia.
Qual é essa plataforma que usa para fazer os codigos?
No caso desse vídeo, foi tudo no codepen.io/
testei o :has com :checked no Firebox e só tá alterando a cor depois qe atualiza a page, não sei se é bug
9:12
O tanto de funçoes em JS q eu ja fiz pra resolver esse tipo de b.o ... kkk
haha Todos nós, meu amigo. Todos nós...
não seria mais fácil colocar o texto dentro de uma tag span e utilizar a mesma lógica que usou para o label ao invés de usar javascript?? apesar disso :has tá ai pra facilitar várias outras coisas
Daria também, mas é uma solução que obriga a "sujar" o HTML em busca de resultados de CSS.
Foi um exemplo do "errado" para mostrar o "certo".
Não ter suporte para o Firefox barra legal o uso :(
Daqui a pouco chega.
7:40 eu nao entendi essa parte, pq exatamente o blue foi impresso?
Porque o :has() de cima tem id como seletor, que tem especificidade maior (mesmo vindo antes no código).
Opa, tem alguma limitação pra usar ele? Tentei no meu editor, tentei em vários sites e fui no codepen e não está funcionando '-'
Dá uma olhada em 9:12 que explica sobre o suporte atual.
@@dpwoficial foda, eu fui ver lá e meu browser não suportava'-'
Já ta funcionando? Posso aplicar no meu projeto?
9:12
vim do futuro para dizer que o css vai ser considerado linguagem de programação xD
Famoso JS-in-CSS.
Que loucura!! Já posso usar?!?!
Só experimentalmente, mas daqui a pouquinho, tá liberado oficialmente. :)
@@dpwoficial Legal 😄
Então podemos dizer que o CSS pode ser considerado uma pseudo linguagem de programação? :D
JS-in-CSS
Noice
haha Noice!
a tendência é o CSS substituir o JS por inteiro
Será que um dia chega lá?
O css tá aos poucos parecendo mais uma linguagem de programação, ou é impressão minha?
Corretíssimo, Lauro. E isso até me preocupa um pouco...
Começo do fim do JS
JS-in-CSS
Alguém de info que sabe pronunciar sintaxe corretamente??? Sinal do Apocalipse, no mínimo
Hã?!
@@dpwoficial, tipo, foi um elogio... 99,9999999% dos profissionais da área de informática não sabem pronunciar "sintaxe" corretamente. Quando vejo um que sabe, escorre até uma lágrima.
@J C Ahh, agora entendi! auheauhe ✌️
Suporte aos browsers:
caniuse.com/css-has
Daqui a pouco a coisa fica boa.
Ja posso falar que sou programador CSS?
Poder pode... ¯\_(ツ)_/¯
Agora da pra chamar CSS de programação? kkk
Ainda falta muito... =P
Falou sintasse parei 😕
👋
Sensacional!
o/