SEM JAVASCRIPT - Collapse com HTML e CSS em 5min!
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: [email protected]
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