:has() Vai Mudar o CSS para SEMPRE!

[@yOkay_]

Oque antes era apenas uma linguagem turing machine hoje é turing complete por cálculo e condicionais. CSS envoluindo cada vez mais!

[@dpwoficial]

o/

[@isackblue]

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!!

[@dpwoficial]

Que eeesso, Isack! Brigadasso! :D

[@unitybr3222]

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.

[@dpwoficial]

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. :)

[@fabriciobrandao9188]

E pq n aprendeu js antes? Quem programa só com css?

[@matheusfelizardo9155]

Nossa, incrível!! Em breve o CSS vai tomar bastante espaço do Javascript, grazadeus

[@dpwoficial]

"grazadeus" 😆

[@jorgehnc]

Muito bom meu camarada, estudamos no Antônio Carlos. Sempre muito inteligente e didático.

[@dpwoficial]

Faaala, Jorge! Sumidaaasso! :D

[@jorgehnc]

@@dpwoficial Abraço meu amigo e muito sucesso na carreira.

[@eltonsantosoficial]

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!

[@dpwoficial]

Com certeza, Elton. Eu escrevi aí no título e é verdade: vai mudar o CSS!

[@calvinteixeira1087]

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!

[@dpwoficial]

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. :)

[@calvinteixeira1087]

@@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

[@dpwoficial]

@@calvinteixeira1087 Isso mesmo. O :has() subiu o CSS para outro nível!

[@rsoaresmga]

CSS é lindo demais!!!

[@dpwoficial]

😭

[@MGArtDZN]

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

[@dpwoficial]

Justamente! CSS FTW o/

[@douglasbertelli7810]

Cara, o CSS está cada dia mais incrivel 😄

[@dpwoficial]

Sim, tá sensacional! 😭

[@MarcosAntonio-hp9rt]

O correto é a CSS

[@dpwoficial]

@@MarcosAntonio-hp9rt Se for para ser extremamente preciso, seria "as CSS". =P

[@dpwoficial]

@Cailton Oliveira Costa Tipo isso? blog.logrocket.com/native-css-nesting/

[@dpwoficial]

@Cailton Oliveira Costa Tipo isso? blog.logrocket.com/native-css-nesting/

[@fnk100]

Eu não sou front, sou designer. Mas amo css, e cada dia o amor cresce mais kkkk

[@dpwoficial]

Mais 2 ou 3 novas features e você será convertido... rsrs

[@fnk100]

@@dpwoficial kkkkk né muito difícil não

[@tatianalima2724]

Mano melhor canal, já primeira vez que vi esse tal de has ai, já gostei que trás novidades

[@dpwoficial]

Muito obrigado! 😁

[@rg.campos]

Meninão.. Saudades! Parabéns pelos vídeos.. Acompanho sempre que possível! Você é referência em CSS no Brasil 👊

[@dpwoficial]

Não some, pô! 😭

[@glauciarezende]

Eureka! Genial... obrigada!

[@dpwoficial]

Tudo nosso. ;)

[@BrunoPulis]

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!

[@dpwoficial]

Muito obrigado e concordo totalmente, Bruno!

[@leandroalvesdasilva8415]

Seu canal é top de mais, confesso que me embanano muito com CSS, mas seus vídeos estão me ajudando bastante. Obrigado.

[@dpwoficial]

Fico feliz em saber, Leandro! Estamos aqui para isso. :)

[@AldemirSouzai9]

Poderoso demais! Sempre procuro usar css para fazer maior parte das coisas antes de partir para o uso JavaScript.

[@dpwoficial]

Eu também! E cada vez mais está sendo possível com as novas features que vão chegando em CSS.

[@onça_pintuda999]

Eu só uso Styled components, mas é mt bom saber disso, vai ajudar mt

[@dpwoficial]

Já já tá chegando no styled.

[@tomsantos220]

perfeito pra que usa wordpress e um adianto !! obg professor

[@dpwoficial]

De nada. Volte sempre.

[@alexandroabade]

*_Wow!_* Achei super incrível tanto a novidade como todo o conteúdo apresentado.

[@dpwoficial]

Bom demás!

[@WaldirNeto_inspiration]

Muito bom!!!!! Imagine fazer várias combinações com esse carinha

[@dpwoficial]

Tô pensando em fazer uma live para mostrar mais possibilidades... :has() é realmente INCRÍVEL!

[@SeuMadrugaWorld]

Muito bom o vídeo e explicação 👍

[@dpwoficial]

Obrigado 👍

[@cavalinhopocoto]

Sensacional! Mudança de tema 🧡

[@dpwoficial]

o/

[@valdineidossantos]

Top demais

[@dpwoficial]

CSS FTW

[@TrinoAlexandre]

Que aula meus amigos!!! Valeu por esse conteudo maravilhoso!!

[@dpwoficial]

Que isso, eu que agradeço o comentário. :)

[@jeftefariamatamba6030]

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.

[@dpwoficial]

Boa ideia! Enquanto não fica pronto, dá para você consultar nossos artigos no blog: desenvolvimentoparaweb.com/tag/acessibilidade/

[@jeftefariamatamba6030]

@@dpwoficial valeu Tárcio, vou esperar com grande animo.

[@trilhacoder]

Sensacional!

[@dpwoficial]

Realmente, é demais!

[@0hora313]

QUE VÍDEO BOM! Primeira vez que vejo um vídeo do teu canal, KZbin me deu uma ótima recomendação.

[@dpwoficial]

Que bom que gostou. Compartilha com a galera para eles também receberem essas recomendações.

[@valdemirochaves]

Parabéns pelo conteúdo. Muito bem explicado.

[@dpwoficial]

Obrigado, Valdemiro.

[@pokkari97]

Conteúdo bom demais!

[@dpwoficial]

vlwww

[@kabulosolima]

Aos pouco css ta tirando muito funcionalidade que só era possível com javascript

[@dpwoficial]

Sim. Daqui a pouco teremos o JS-in-CSS. =P

[@rivaldosouza362]

Cara! Você explica bem demais, parabéns

[@dpwoficial]

Muito obrigado! 😁

[@MartaLFG]

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

[@dpwoficial]

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/

[@supermanbrz]

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

[@dpwoficial]

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.

[@resumaodorafao]

Sempre com uma didática afiadíssima. Muitos parabéns!

[@dpwoficial]

vlwww

[@marceloteixeiramodesti2268]

Parabéns pelo canal, didática e tudo mais. Excelente. Virei inscrito.

[@dpwoficial]

Vlw, Marcelo!

[@juliocmendonca]

Cara, que didática perfeita!!!

[@dpwoficial]

Opa, ainda chegamos lá, Júlio... rs

[@felipe_ramos]

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

[@dpwoficial]

Demora um pouco mesmo... Mas já já taí pra gente usar à vontade. ;)

[@felipe_ramos]

@@dpwoficial kkkk verdade, mas bate uma ansiedade pra já sair usando

[@jefersoncambui5180]

muito legal, deixou bem claro pra mim muitas coisas, agora só preciso praticar mais, obrigado ! ✌✌

[@dpwoficial]

Opa, tamos aê.

[@RonanTI]

Mas um função pra minha engine game css 😋😍😍😍😍

[@dpwoficial]

Ó, sério isso? Que massa.

[@alexferrazoliver]

Sensacional

[@dpwoficial]

o/

[@clintonrocha4980]

Ótimo conteúdo !!!!!

[@dpwoficial]

Muito obrigado, Clinton!

[@wesleyalmeidaofc]

ótima didática parabéns mano ! muito bom !

[@dpwoficial]

Muito obrigado!

[@WedersonWinchester]

Amei!

[@dpwoficial]

😊

[@wellingtonfjr]

didática mt boa e ótimos exemplos! +1 sub

[@dpwoficial]

vlwww

[@eduardosalles9212]

cara.. que legal!

[@dpwoficial]

👍

[@cometarioxD]

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.

[@dpwoficial]

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?

[@cometarioxD]

@@dpwoficial Entendi sim! Obrigado pela paciência em explicar e pelo conteúdo. Espero por mais vídeos assim!

[@dpwoficial]

@@cometarioxD Eu que agradeço a participação. :)

[@Askki]

interessante!

[@dpwoficial]

Demás!

[@danilorodrigues5024]

que coisa incrível! ansioso pra poder usar.

[@dpwoficial]

Dois!

[@alicesalvatino773]

mt bomm!!

[@dpwoficial]

vlwww

[@laitonaluno5296]

Muito bom

[@dpwoficial]

Demais!

[@ant0nious426]

Oloko, adicionaram uma "condicional" no CSS

[@dpwoficial]

ueheuhe Algo parecido... ;)

[@edueuller5976]

Você sabe quando mais ou menos o :has() vai ser suportado pelos navegadores sem usar os suports????

[@dpwoficial]

O @supports não é para dar suporte antecipado; ele somente verifica se tem ou não suporte (kzbin.info/www/bejne/bZWVZImii9ugh9k). Chrome e Safari já já vão suportar (caniuse.com/css-has); o restante, não tenho ideia. =/

[@thalesvictor3212]

Esotu há meses ansioso por um curso seu de css, convenções, etc. Quando vai sair, Tárcio:

[@dpwoficial]

Daqui a pouco vamos abrir uma turma nova; cadastra seu e-mail para saber certinho: www.cssalemdosensocomum.com.br/

[@thalesvictor3212]

@@dpwoficial já cadastrei meus dois e-mails para não passar despercebido 👀

[@dpwoficial]

@@thalesvictor3212 haha Aí sim. Pode deixar que em breve vamos entrar em contato sobre isso. ;)

[@thalesvictor3212]

@@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?

[@dpwoficial]

@@thalesvictor3212 Não sei ao certo, mas não deve demorar muito. Fica ligado nos e-mails. 👍

[@andertribal]

Finalmenteeeee

[@dpwoficial]

\o/

[@DanielRios549]

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

[@dpwoficial]

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

[@DanielRios549]

@@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

[@viniciusm.m.7822]

top!!!

[@dpwoficial]

vlwww

[@flaviomachado2751]

Qual é essa plataforma que usa para fazer os codigos?

[@dpwoficial]

No caso desse vídeo, foi tudo no codepen.io/

[@GazetaOnlineMG]

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

[@dpwoficial]

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".

[@vitorrodrigues2969]

7:40 eu nao entendi essa parte, pq exatamente o blue foi impresso?

[@dpwoficial]

Porque o :has() de cima tem id como seletor, que tem especificidade maior (mesmo vindo antes no código).

[@larissasantos3427]

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 é

[@dpwoficial]

developer.mozilla.org/pt-BR/docs/Web/CSS/outline

[@Lpcnew]

Vi no canIuse que o firefox ainda n da suporte (por default)...será quando que habilitam isso igual no chrome?

[@dpwoficial]

Não faço ideia.

[@DiogoLScarmagnani]

Vindo aqui apenas para reclamar q já faz quase 1 ano desse atributo e o Mozilla ainda não incluiu.

[@dpwoficial]

Devagar e sempre... 😬

[@robsonklein1628]

Não ter suporte para o Firefox barra legal o uso :(

[@dpwoficial]

Daqui a pouco chega.

[@igorsilva736]

testei o :has com :checked no Firebox e só tá alterando a cor depois qe atualiza a page, não sei se é bug

[@dpwoficial]

9:12

[@alexandrejunior4775]

Ele já está funcionando com o npm sass ?

[@dpwoficial]

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?

[@olifer-br]

Bruxaria purinha...

[@dpwoficial]

🧙

[@weslleyfillipe1532]

O tanto de funçoes em JS q eu ja fiz pra resolver esse tipo de b.o ... kkk

[@dpwoficial]

haha Todos nós, meu amigo. Todos nós...

[@both-eritonsotaku6860]

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 '-'

[@dpwoficial]

Dá uma olhada em 9:12 que explica sobre o suporte atual.

[@both-eritonsotaku6860]

@@dpwoficial foda, eu fui ver lá e meu browser não suportava'-'

[@simc40monitoramentoecontro39]

Já ta funcionando? Posso aplicar no meu projeto?

[@dpwoficial]

9:12

[@valdemirochaves]

Então podemos dizer que o CSS pode ser considerado uma pseudo linguagem de programação? :D

[@dpwoficial]

JS-in-CSS

[@LuJC]

Alguém de info que sabe pronunciar sintaxe corretamente??? Sinal do Apocalipse, no mínimo

[@dpwoficial]

Hã?!

[@LuJC]

@@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.

[@dpwoficial]

@J C Ahh, agora entendi! auheauhe ✌️

[@rafael-706]

vim do futuro para dizer que o css vai ser considerado linguagem de programação xD

[@dpwoficial]

Famoso JS-in-CSS.

[@anapaulalopesaraujo3824]

Que loucura!! Já posso usar?!?!

[@dpwoficial]

Só experimentalmente, mas daqui a pouquinho, tá liberado oficialmente. :)

[@anapaulalopesaraujo3824]

@@dpwoficial Legal 😄

[@joseaugustoribeiro9317]

Ja posso falar que sou programador CSS?

[@dpwoficial]

Poder pode... ¯\_(ツ)_/¯

[@4195B]

Começo do fim do JS

[@dpwoficial]

JS-in-CSS

[@ReynaldoMoysesJunior]

a tendência é o CSS substituir o JS por inteiro

[@dpwoficial]

Será que um dia chega lá?

[@laurosantos6473]

O css tá aos poucos parecendo mais uma linguagem de programação, ou é impressão minha?

[@dpwoficial]

Corretíssimo, Lauro. E isso até me preocupa um pouco...

[@ginimarcosmaia4615]

Noice

[@dpwoficial]

haha Noice!

[@zikigamer4412]

Agora da pra chamar CSS de programação? kkk

[@dpwoficial]

Ainda falta muito... =P

[@samhk2222]

Falou sintasse parei 😕

[@dpwoficial]

👋

[@kvnol]

Sensacional!

[@dpwoficial]

o/