SEM JAVASCRIPT - Collapse com HTML e CSS em 5min!

Veröffentlicht am: 23 April 2021
auf dem Kanal: Fê Fialho

6,933

476

Criando um componente de Collapse completamente funcional em menos de 5min apenas com HTML e CSS 🥳

Nesse vídeo vou mostrar como isso funciona na prática usando as ainda desconhecidas tags `details` e `summary` disponíveis no HTML e estilizando tudo isso com o nosso bom e velho CSS.

!IMPORTANT: Por se tratar de um elemento nativo, essas tags são acessíveis e semânticas por padrão ❤️

Além disso dá pra brincar bastante e fazer coisas bem legais usando CSS durante as transições de estado.

E uma dica extra:

Funciona muito bem em Markdown e portanto dentro do READMEs dos projetos

00:00 Introdução
01:05 Collapse com `details` e `summary`
05:20 Suporte dos navegadores

🔹 Codepen: https://codepen.io/felipefialho/pen/y...
🔹 CSS Components: https://css-components.felipefialho.com/

🔹 Versão em texto: https://www.felipefialho.com/blog/htm...

🔗 MEU BLOG

🔹 O fodástico :not(): https://www.felipefialho.com/blog/css...
🔹 É possível utilizar componentes desenvolvidos apenas com CSS? (Escrito em 2014): https://www.felipefialho.com/blog/e-p...

➡️ REFERÊNCIAS

🔹 MDN: https://developer.mozilla.org/en-US/d...
🔹 Can I Use: https://caniuse.com/?search=details

▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

☕️ GOSTOU DO CONTEÚDO? Aceito um café 😍

Pix: hi@felipefialho.com
PicPay (qualquer valor): https://app.picpay.com/user/felipe.fi...

▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

➡️ SOBRE MIM

Blog: https://felipefialho.com/blog
Github: https://github.com/felipefialho
Twitter: / felipefialho_
LinkedIn: / felipefialho
Front-end BR: https://github.com/frontendbr

Auf dieser Seite können Sie das Online-Video SEM JAVASCRIPT - Collapse com HTML e CSS em 5min! mit der Dauer stunde minuten sekunde in guter Qualität ansehen, das der Benutzer Fê Fialho 23 April 2021 hochgeladen hat, den Link mit Freunden und Bekannten teilen, dieses Video wurde auf Youtube bereits 6,933 Mal angesehen und es wurde von 476 den Zuschauern gefallen. Viel Spaß beim Betrachtenden Zuschauern gefallen!