SWCore
SWCore / CSS / CSS nativo — visão geral

CSS nativo — visão geral CSS

O navegador agora faz sozinho o que antes pedia JavaScript. Mais leve, mais rápido, por atributo — do jeito SWCore.

O que é

Uma família de peças novas da 2.1.0 que usam só recursos nativos do navegador: entrar ao rolar, barra de leitura, menus e avisos, modal, dica grudada no botão, sanfona, carrossel de arrastar, formulário que trava sozinho e bloco que se adapta ao espaço. Zero JavaScript em quase todas (o modal usa uma linha). Tudo entra no swcore.min.css, nada novo para carregar.

Como funciona

Regra do SWCore para CSS moderno: só entra o que funciona nos 4 navegadores (Chrome, Edge, Firefox e Safari, no computador e no celular). Onde o recurso é recente, a peça foi feita para continuar perfeita sem ele — só perde o efeito (ex.: sem suporte, o sw-revela mostra o conteúdo parado). Todas respeitam "reduzir movimento" do sistema. Use estas peças antes de escrever JS; o GSAP (sw-ani, área Animações) fica para o que o CSS não faz: linha do tempo com várias etapas, pin, sequência de frames, texto letra a letra.

Exemplos

Tudo junto — role, clique, arraste Ao vivo
✅ Horário salvo!
Eu sigo o botão

Agendar horário

Modal nativo, animado só com CSS.
1
2
3
4
Precisa de biblioteca?

Não. É HTML e CSS nativo.

Funciona no celular?

Sim, nos 4 navegadores.

<!-- menu, aviso e dica: popover nativo, zero JS -->
<button sw-btn="pri" popovertarget="menu">Menu</button>
<div id="menu" popover sw-popover="menu">...</div>

<!-- modal: uma linha -->
<button onclick="agenda.showModal()">Abrir</button>
<dialog id="agenda" sw-dialog>...</dialog>

<!-- carrossel e sanfona -->
<div sw-trilho>...</div>
<details sw-sanfona name="faq"><summary>Pergunta</summary><p>Resposta</p></details>

Atributos

sw-revela
entrar ao rolar, preso à rolagem — sem JS
sw-progresso
barra de leitura da página
sw-popover + popover
menu, aviso e painel lateral sem JS
sw-dialog
modal nativo com entrada/saída animadas
sw-dica
dica grudada no botão (anchor positioning)
sw-sanfona
perguntas frequentes; só uma aberta com name=""
sw-trilho
carrossel de arrastar com encaixe
sw-trava
formulário: botão só libera quando está tudo certo
sw-caixa
bloco que muda de forma pelo espaço dele
sw-cor
motor de cor: um número vira a marca

Variantes

Nenhum.

Eventos

Nenhum.

API (JavaScript)

Nenhum.

Requisitos

  • swcore.min.css 2.1.0 ou mais novo

Limitações — o que ele não faz

Nenhuma.

← AnteriorAlerta (inline) Próximo →Entrar ao rolar (sw-revela)