{"componentChunkName":"component---src-templates-blog-post-js","path":"/blog/componentes-nativos-em-2026-o-que-o-html-e-o-css-ja-fazem-sozinhos/","result":{"data":{"markdownRemark":{"html":"

Em 2014 escrevi um post aqui no blog perguntando se\né possível utilizar componentes desenvolvidos apenas com CSS.

\n

Na conclusão eu disse que SIM e soltei essa frase:

\n
\n

Não duvido que isso possa ser uma tendência daqui para frente.

\n
\n

12 anos depois voltei nesse projeto e posso dizer que passei no filtro do tempo. Tanto o combo CSS + HTML quanto o navegador evoluíram e agora conseguimos fazer tudo isso (e muito mais!) nativamente, de forma extremamente performática, acessível e com animações de brinde.

\n

Então esse post é sobre isso: o que o HTML e o CSS já fazem sozinhos em 2026, usando o projeto de 2014 como prova, componente por componente.

\n

Um pouco de história

\n

Tudo começou lá em 2012 com um Cartman feito só com CSS. Brincadeira boba, mas foi ali que comecei a buscar no CSS soluções que dessem pra usar de verdade em projetos.

\n

Em 2014 isso virou o Pure CSS Components: 6 componentes de interface sem nenhuma linha de JavaScript.

\n\n

Tudo feito com checkbox e radio escondidos (e no começo também com o pseudo-seletor :target). O estado de checado e não checado era o nosso “state management” da época.

\n

E o melhor (!!): muita gente realmente usou isso em produção em projetos reais. No GitHub ele chegou a quase 700 estrelas, o que era muita coisa pra um projeto que nasceu de uma brincadeira e da curiosidade de um dev ainda no começo de carreira explorando as possibilidades.

\n

Agora o projeto foi reconstruído do zero com uma ideia bem simples: cada componente de 2014 foi preservado exatamente como era e aparece lado a lado com a sua versão nativa de 2026. É tipo um “antes e depois” de como os navegadores e o CSS evoluíram.

\n

Hack de 2014 vs. nativo de 2026

\n

Collapse

\n

Em 2014 era um <input type=\"checkbox\" hidden> com um <label> e o seletor de irmão ~ pra mostrar o conteúdo. Se quisesse accordion, trocava pra type=\"radio\" com o mesmo name.

\n

Em 2021 já tinha falado aqui sobre os fodões <details> e <summary>, mas de lá pra cá eles ficaram ainda mais poderosos.

\n

Agora o accordion exclusivo (onde só um fica aberto por vez) é só colocar o mesmo name em todos os <details>:

\n
<!-- Same name = exclusive group: opening one closes the others -->\n<div class=\"collapse\">\n  <details name=\"now-accordion\" open>\n    <summary>Install</summary>\n    <div class=\"panel\">\n      <p>Clone the repository and run <code>pnpm install</code>.</p>\n    </div>\n  </details>\n  <details name=\"now-accordion\">\n    <summary>Run locally</summary>\n    <div class=\"panel\">\n      <p>Start the dev server with <code>pnpm dev</code>.</p>\n    </div>\n  </details>\n</div>
\n

Percebam que é literalmente o mesmo truque do radio com name de 2014, só que agora o próprio HTML faz isso por você 😁

\n

E a animação de abrir e fechar, que sempre foi o calcanhar de Aquiles do <details>, agora dá pra fazer com o pseudo-elemento ::details-content:

\n
/* Animate the native content slot to and from height: auto */\n@media (prefers-reduced-motion: no-preference) {\n  @supports (interpolate-size: allow-keywords) and selector(::details-content) {\n    :scope {\n      interpolate-size: allow-keywords;\n    }\n\n    details::details-content {\n      block-size: 0;\n      overflow-y: clip;\n      transition:\n        block-size 220ms var(--ease),\n        content-visibility 220ms allow-discrete;\n    }\n\n    details[open]::details-content {\n      block-size: auto;\n    }\n  }\n}
\n

O interpolate-size: allow-keywords é o que permite animar até auto, coisa que a gente sonhou por anos. E percebam o @supports: se o navegador não conhecer o ::details-content, o collapse continua funcionando, só que sem animação. Mesma coisa pra quem prefere menos movimento, graças ao prefers-reduced-motion.

\n

Modal

\n

No primeiro post de 2014 o modal usava o :target, mas a versão que ficou preservada no site é a com checkbox escondido e um monte de <label> apontando pra ele:

\n
<label class=\"btn\" for=\"then-modal-one\">Modal!</label>\n\n<div class=\"modal\">\n  <input class=\"modal-open\" id=\"then-modal-one\" type=\"checkbox\" hidden>\n  <div class=\"modal-wrap\" aria-hidden=\"true\" role=\"dialog\">\n    <label class=\"modal-overlay\" for=\"then-modal-one\"></label>\n    <div class=\"modal-dialog\">\n      <div class=\"modal-header\">\n        <h2>Modal in CSS?</h2>\n        <label class=\"btn-close\" for=\"then-modal-one\" aria-hidden=\"true\">×</label>\n      </div>\n      ...\n    </div>\n  </div>\n</div>
\n

O botão que abre é um <label>, o fundo escuro que fecha é um <label>, o ”×” é um <label>… tudo pra marcar e desmarcar um único checkbox 😅

\n

Funcionava, mas foco, Esc e leitor de tela ficavam por conta da sorte.

\n

Agora temos o <dialog> com invoker commands:

\n
<button class=\"button\" type=\"button\" commandfor=\"now-modal\" command=\"show-modal\">\n  Discard changes\n</button>\n\n<dialog id=\"now-modal\" class=\"modal\" closedby=\"any\" aria-labelledby=\"now-modal-title\">\n  <h3 id=\"now-modal-title\">Discard unsaved changes?</h3>\n  <footer class=\"modal-footer\">\n    <!-- autofocus: the safe choice gets focus when the dialog opens -->\n    <button class=\"button\" type=\"button\" commandfor=\"now-modal\" command=\"close\" autofocus>Keep editing</button>\n    <button class=\"button button-primary\" type=\"button\" commandfor=\"now-modal\" command=\"close\">Discard</button>\n  </footer>\n</dialog>
\n

O commandfor aponta pro id do <dialog> e o command=\"show-modal\" diz o que fazer. O closedby=\"any\" faz o modal fechar clicando fora ou apertando Esc. Foco, backdrop, top layer, tudo de graça.

\n

E pra animar usamos o @starting-style, que define o estado inicial do elemento no momento em que ele aparece:

\n
@media (prefers-reduced-motion: no-preference) {\n  .modal,\n  .modal::backdrop {\n    transition:\n      opacity var(--duration) var(--ease),\n      display var(--duration) allow-discrete,\n      overlay var(--duration) allow-discrete;\n    opacity: 0;\n  }\n\n  .modal[open],\n  .modal[open]::backdrop {\n    opacity: 1;\n  }\n\n  @starting-style {\n    .modal[open],\n    .modal[open]::backdrop {\n      opacity: 0;\n    }\n  }\n}
\n

O display e o overlay com allow-discrete fazem o <dialog> continuar no top layer até o fade de saída terminar. Coisa que em 2014 a gente nem sonhava 😁

\n

Dropdown

\n

Em 2014 era mais um checkbox escondido. Agora é a Popover API com popovertarget e o posicionamento fica por conta do CSS anchor positioning, que prende o menu no botão sem precisar calcular nada.

\n

E a variante de hover, que antes era um :hover no CSS, agora usa o interestfor.

\n

Tooltip

\n

O tooltip usa popover=\"hint\" junto com interestfor e anchor positioning. É o tipo de coisa que por anos a gente instalava uma biblioteca inteira só pra fazer.

\n

Tab

\n

A versão nativa usa <details name> exclusivos organizados visualmente como abas.

\n

Mas aqui preciso ser honesto: sem JavaScript não dá pra implementar o padrão de tabs com navegação pelas setas do teclado. Funciona e é acessível como um grupo de <details>, mas não é o padrão completo de tabs.

\n

Carrossel

\n

O carrossel de 2014 era o mais “criativo” (leia-se: gambiarra). Um radio antes de cada item, três pares de <label> pras setas e aquele seletor monstruoso com nth-child pros indicadores.

\n

Agora é scroll-snap pra travar os itens, ::scroll-button() pras setas e ::scroll-marker pros indicadores. Tudo gerado pelo próprio navegador.

\n

Nascidos nativos

\n

Além dos 6 componentes originais, criei uma seção nova chamada Born native com 10 componentes que nem tinham versão em 2014, porque simplesmente não dava pra fazer só com CSS:

\n\n

E um detalhe que decidi manter: o botão de tema claro/escuro do site (“lights”) usa justamente o truque de 2014, um checkbox escondido junto com o :has():

\n
/* Lights toggle: a hidden checkbox flips the scheme, the 2014 way */\n@media (prefers-color-scheme: light) {\n  :root:has(#lights:checked) {\n    color-scheme: dark;\n  }\n}\n\n@media (prefers-color-scheme: dark) {\n  :root:has(#lights:checked) {\n    color-scheme: light;\n  }\n}
\n

Uma homenagem pro projeto original 😁

\n

E a performance?

\n

A grande questão de usar esse tipo de componente é performance. Então rodei o Lighthouse na home do site (build de produção, preview local):

\n\n

E o que vai pro navegador:

\n\n

Pra comparar: só o jQuery 3.7.1 tem 87 KB minificado (uns 30 KB com gzip), e isso antes de qualquer plugin. E a stack típica de 2014 era exatamente essa, jQuery + um plugin pra cada componente.

\n

Mas o ganho não é só de peso. Quando o navegador faz o trabalho:

\n\n

Por isso também decidi tirar o Google Tag Manager e os anúncios que o site tinha antes. O site não tem analytics, não tem nada te rastreando, e foi isso que deixou ele zero JavaScript de verdade. Se quiser apoiar o projeto, tem o GitHub Sponsors.

\n

Agora, sendo honesto: o HTML da home é grandão, uns 1,37 MB cru (76 KB com gzip). Isso porque o código de cada demo já vem com syntax highlight e fica embutido na página, mesmo com os painéis de “ver código” fechados. O 90 no mobile vem basicamente da primeira pintura de uma página muito longa, não de interatividade. Tá na lista de melhorias, tipo carregar esse código só quando alguém pedir.

\n

Nem tudo são flores

\n

Vários desses recursos hoje só funcionam em navegadores baseados em Chromium.

\n

Por isso o site lista o suporte de cada funcionalidade e todo componente tem um fallback utilizável. Se o navegador não suportar, você não fica com um componente quebrado, só com uma versão mais simples.

\n

Isso não é um “pode usar tudo em produção amanhã”. É um retrato de pra onde os navegadores tão indo.

\n

Zero JavaScript, mas 100% vibe coding

\n

Tem uma ironia bem divertida nessa história toda:

\n
\n

um projeto que tem como regra não ter nenhuma linha de JavaScript só voltou à vida porque eu fiz totalmente no vibe coding

\n
\n

Mas antes preciso fazer uma confissão: eu enrolei anos (décadas!) pra mexer nesse projeto hahaha

\n

Software abandonado não fica parado, ele apodrece. Passei quase 10 anos sem fazer nenhuma grande melhoria e, quando finalmente fui olhar com calma, encontrei imagens de placeholder mortas, CDN do rawgit que não existe mais, instruções de instalação via Bower e 39 vulnerabilidades no npm audit, sendo 1 crítica. Aquela sensação de abrir uma gaveta que você não mexe faz 10 anos.

\n

Não era só atualizar dependência, era refazer o projeto inteiro, e isso na minha cabeça era coisa de semanas de trabalho que nunca cabiam na minha vida de agora. A semana que vem durou bons anos 😅

\n

Em 2026 fazer esse tipo de projeto é praticamente trivial usando LLMs. Então finalmente refiz o projeto inteiro, design incluído, em algumas horas usando meu fiel escudeiro Claudinho Code, naquele rolê de planning, skills, roles e subagents que já abordei em n posts aqui e nas redes por aí.

\n

E quero ser 100% transparente aqui: eu não escrevi nenhuma linha de código desse projeto na mão. Nem HTML, nem CSS, nem config. Tudo saiu de conversa com o Claude Code, numa sessão longa de algumas horas. Meu trabalho foi direcionar, revisar e decidir.

\n

Como foi na prática

\n

Começou no modo plan: análise da stack antiga e um plano escrito que eu li, ajustei e aprovei antes de qualquer linha de código. Nada de sair vibe codando no escuro.

\n

Depois veio a execução em commits atômicos e PRs, com subagents em paralelo: Opus pra design, pesquisa e partes mais complexas, Sonnet pras tarefas mais mecânicas.

\n

Pra decidir quais componentes “Born native” dava pra fazer sem JavaScript, um subagent usou o MCP do octocode pra vasculhar MDN, web-features e specs, e conferiu o suporte real dos navegadores no webstatus.dev. Isso é engenharia de contexto na prática: a LLM não chuta, ela vai atrás da fonte.

\n

E cada mudança foi testada num navegador de verdade com Playwright: modo claro e escuro, desktop e mobile, teclado e mouse, e até uma rodada com o JavaScript desabilitado pra provar que o zero JS era real. Somando isso com lint, type-check, build e agents de self-review antes de cada PR.

\n

A AI errou (e também pegou erro)

\n

Nem tudo foi lindo, e é justamente por isso que esse processo todo existe:

\n\n

Nada de outro mundo, dev humano faria merdas muito maiores. A diferença é ter um processo que pega antes de ir pra produção, e ficar de olho continua sendo trabalho meu.

\n

E teve uma que ninguém lembrava: o deploy de produção no Netlify tava travado desde outubro de 2023, com a publicação automática desligada. Ou seja, nada ia pro ar fazia anos. O Claude achou isso e destravou pelo CLI/MCP do Netlify. De quebra, as 7 URLs antigas de download de zip agora redirecionam pra uma release no GitHub, pra ninguém cair num link quebrado.

\n

O que foi decisão minha

\n

No fim quem continua decidindo sou eu, então:

\n\n

Ou seja, meu trampo aqui foi exatamente o que se espera de um software engineer em 2026: sustentar o próprio ecossistema de AI (skills, rules, MCPs e subagents bem configurados), planejar e aprovar o plano antes de qualquer código, decidir arquitetura e stack, revisar cada output desconfiando de tudo que não foi verificado e dizer não quando a sugestão não faz sentido.

\n

Como falei no post sobre o que esperar de 2026, não vamos mais escrever código na unha, mas cada vez mais orientar, revisar e orquestrar. E como sempre digo, independentemente do ferramental que você usa, o responsável por cada entrega segue sendo VOCÊ.

\n

Conclusão

\n

Em 2014 a gente usava checkbox escondido porque era o único jeito. Em 2026 o HTML e o CSS fazem isso nativamente, com acessibilidade, foco e animação de brinde, e sem mandar 1 KB de JavaScript pro usuário.

\n

Aquela “tendência” que eu previ aconteceu, só que o navegador chegou lá antes de mim.

\n

E depois de anos adiando, bastaram algumas horas com uma AI do lado pra esse projeto voltar à vida. Fica a lição pra aquele side project que tá largado aí na sua gaveta também 😉

\n","fields":{"slug":"blog/componentes-nativos-em-2026-o-que-o-html-e-o-css-ja-fazem-sozinhos/"},"frontmatter":{"date":"28 de setembro de 2026","description":"Modal, dropdown, tooltip, carrossel e muito mais sem nenhuma linha de JavaScript, lado a lado com as gambiarras de 2014 😁","title":"Componentes nativos em 2026: o que o HTML e o CSS já fazem sozinhos","tags":["css","html","componentes","front-end","performance"],"image":{"id":"708a3064-dbea-5c6f-9c39-e87590151c42","publicURL":"/static/e2494d84dc6964d85ac08d881a0c2652/2026-09-28-cover.jpg","childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAMABQDASIAAhEBAxEB/8QAGAABAAMBAAAAAAAAAAAAAAAAAAIDBAX/xAAVAQEBAAAAAAAAAAAAAAAAAAABAv/aAAwDAQACEAMQAAAB412VUkQ//8QAGBAAAwEBAAAAAAAAAAAAAAAAAAECERD/2gAIAQEAAQUClIpThpvP/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPwE//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPwE//8QAFxAAAwEAAAAAAAAAAAAAAAAAACAhMf/aAAgBAQAGPwKmL//EABkQAQEBAAMAAAAAAAAAAAAAAAEAMREhof/aAAgBAQABPyHViyvUncKU3N//2gAMAwEAAgADAAAAEAPf/8QAFhEBAQEAAAAAAAAAAAAAAAAAEQEQ/9oACAEDAQE/ECuf/8QAFhEBAQEAAAAAAAAAAAAAAAAAARAR/9oACAECAQE/EBMn/8QAGRABAAMBAQAAAAAAAAAAAAAAAQAhMRFB/9oACAEBAAE/EOwtGg3Al7LmKglMhPYh1dip/9k=","aspectRatio":1.6666666666666667,"src":"/static/e2494d84dc6964d85ac08d881a0c2652/ce4b6/2026-09-28-cover.jpg","srcSet":"/static/e2494d84dc6964d85ac08d881a0c2652/1983d/2026-09-28-cover.jpg 320w,\n/static/e2494d84dc6964d85ac08d881a0c2652/994cc/2026-09-28-cover.jpg 640w,\n/static/e2494d84dc6964d85ac08d881a0c2652/ce4b6/2026-09-28-cover.jpg 1280w,\n/static/e2494d84dc6964d85ac08d881a0c2652/0dcb7/2026-09-28-cover.jpg 1800w","sizes":"(max-width: 1280px) 100vw, 1280px"}}}},"timeToRead":13}},"pageContext":{"slug":"blog/componentes-nativos-em-2026-o-que-o-html-e-o-css-ja-fazem-sozinhos/","previous":{"fields":{"slug":"blog/stack-com-ai-que-vai-elevar-seu-trampo-como-dev/"},"frontmatter":{"title":"Stack com AI que vai elevar seu trampo como dev","date":"05 fev, 2026"}},"next":null}},"staticQueryHashes":["2228468640","2451431863","469472723","63159454"]}