CSS nativo — visão geral CSS

O que é

É uma família de peças que usam recursos que já vêm dentro do navegador: surgir ao rolar, barra de leitura, menu e aviso que abrem por cima, modal, dica colada no botão, perguntas frequentes que abrem e fecham, carrossel de arrastar, formulário que só libera o botão quando está tudo certo e bloco que muda de forma conforme o espaço. Quase nenhuma precisa de JavaScript (o modal usa uma linha para abrir). Todas estão dentro do swcore.min.css — não há arquivo novo para carregar.

Regra do SW Core para esses recursos: só entra o que funciona nos 4 navegadores (Chrome, Edge, Firefox e Safari, no computador e no celular). Quando o recurso é muito novo, a peça foi feita para continuar funcionando sem ele — só perde o enfeite (ex.: sem suporte, o sw-revela mostra o conteúdo parado). Todas respeitam o "reduzir movimento" do sistema. Use estas peças antes de escrever JavaScript; a área Animações (GSAP) fica para o que o CSS não faz: linha do tempo com várias etapas, prender a tela, texto letra a letra.

Quando usar

• Site institucional, landing page, blog: o conjunto cobre quase tudo que um site comum precisa sem carregar biblioteca.
• Quer a página leve no celular e nota alta no PageSpeed: estas peças não somam JavaScript.
• Sistema/painel que já usa os componentes com JS (sw-modal, sw-dropdown…): continue com eles; as peças nativas são uma opção, não uma troca obrigatória.

Comece aqui

1. 1

   Coloque o SW Core no <head>. Todas as peças desta família estão no arquivo principal (versão 2.1.0 ou mais nova).

   <link rel="stylesheet" href="swcore/swcore.min.css">

2. 2

   Escolha a peça e escreva o atributo. Exemplo: perguntas frequentes em que só uma fica aberta por vez — HTML puro, zero JavaScript.

   Vocês fazem loja virtual?

   Sim, com Pix, cartão e cálculo de frete.

   Em quanto tempo fica pronto?

   De 7 a 15 dias úteis.

   <details sw-sanfona name="faq" open>
     <summary>Vocês fazem loja virtual?</summary>
     <p>Sim, com Pix, cartão e cálculo de frete.</p>
   </details>
   <details sw-sanfona name="faq">
     <summary>Em quanto tempo fica pronto?</summary>
     <p>De 7 a 15 dias úteis.</p>
   </details>

Todas as variações

Cada quadro abaixo é o componente de verdade, rodando. O código embaixo é exatamente o que está no quadro: copie e cole.

4. Layout que se ajeita sozinho

Estes precisam de espaço, por isso ocupam a linha toda.

1

2

3

4

Barbearia do Zé

Corte, barba e sobrancelha no centro da cidade.

Agendar

Tabela de opções

Receitas prontas — usos reais

Situações que aparecem em quase todo site. Copie a que servir.

<h3>Dúvidas frequentes</h3>
<details sw-sanfona name="faq" open>
  <summary>Vocês atendem aos domingos?</summary>
  <p>Sim, das 9h às 13h, com hora marcada.</p>
</details>
<details sw-sanfona name="faq">
  <summary>Preciso agendar?</summary>
  <p>Recomendamos. Pelo site ou pelo WhatsApp.</p>
</details>
<!-- …mais perguntas com o mesmo name="faq"… -->

<form sw-trava class="flx gap-2 f-wr alc" action="/newsletter" method="post">
  <input sw-inp type="email" name="email" required placeholder="seu@email.com" aria-label="Seu e-mail">
  <button sw-btn="pri">Receber novidades</button>
</form>

<body>
  <div sw-progresso></div>                       <!-- barra de leitura -->

  <article>
    <h1>Como cuidar da barba no verão</h1>
    <img sw-revela="zoom" src="/barba.jpg" alt="…"> <!-- surge ao rolar -->
    <p>…</p>
  </article>

  <div sw-trilho>…posts relacionados…</div>       <!-- carrossel de arrastar -->

  <details sw-sanfona name="faq">…</details>       <!-- dúvidas -->
</body>

Precisa de quê

• swcore.min.css 2.1.0 ou mais novo — todas as peças.
• swcore.compl.min.css — só se usar os ícones swi-*.

Cuidados — erros comuns

• Estas peças são por atributo (sw-sanfona, sw-trilho…), não por classe. class="sw-sanfona" não funciona.
• Algumas usam o recurso do navegador junto: o sw-popover precisa do atributo popover; o sw-dialog tem que estar num <dialog>; o sw-sanfona num <details>. Sem isso não abrem.
• Em navegador antigo, os efeitos (entrada animada, barra de leitura) simplesmente não aparecem — o conteúdo continua lá. Não dependa do efeito para mostrar informação.
• Se o computador está com "reduzir movimento" ligado, as animações ficam paradas de propósito. Não é defeito.

O que ele não faz

• Não há linha do tempo com várias etapas, prender a tela (pin), sequência de fotos ou texto letra a letra: isso é da área Animações.
• As peças nativas não substituem os componentes com JavaScript que têm API e eventos próprios (sw-modal, Dropdown, Slider).