Padrões do mundo real: dicas de ferramentas e acompanhamento de estado
Aplique data-* a dicas de ferramentas, estados ativos e configurações de componentes.
Padrões do mundo real: dicas de ferramentas e acompanhamento de estado é uma aula grátis de HTML Academy no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de HTML Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de HTML Academy inclui 4 aulas no total.
Dica de ferramenta com data-tooltip
Armazene o texto da dica em data-tooltip no elemento acionador. O CSS [data-tooltip]:hover::after { content: attr(data-tooltip) } a exibe sem JavaScript. Para dicas de ferramenta acessíveis, adicione role="tooltip" e aria-describedby apontando para um elemento real.
Posicionamento de dicas de ferramenta com CSS
O elemento acionador precisa de position: relative. O pseudo-elemento ::after usa position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%) para centralizar a dica acima do acionador. Adicione white-space: nowrap para impedir a quebra de linha.
Rastreamento de estado com data-state
Substitua várias classes booleanas (is-open, is-loading, is-error) por um único atributo data-state: el.dataset.state = "loading". O CSS seleciona [data-state="loading"] — um atributo, uma regra CSS por estado e nenhum gerenciamento de classes.
Acordeão com data-expanded
Cada item do acordeão tem data-expanded="false". O JavaScript alterna esse valor: item.dataset.expanded = item.dataset.expanded === "true" ? "false" : "true". O CSS mostra ou oculta o painel: [data-expanded="false"] .panel { display: none; }.
Estado ativo da aba
Um contêiner de abas armazena a aba ativa: data-active-tab="0". O JavaScript atualiza esse valor ao clicar. O CSS pode selecionar o painel ativo usando [data-active-tab="0"] #panel-0. Todo o estado das abas fica em um único atributo no elemento contêiner.
Rastreamento de etapas do formulário
Formulários de várias etapas armazenam a etapa atual em data-step no elemento do formulário. O CSS mostra somente a etapa correspondente: form[data-step="2"] .step-2 { display: block; }. As outras etapas permanecem ocultas sem alternar classes individualmente.
Padrão de estado de carregamento
Durante ações assíncronas, os botões usam btn.dataset.state = "loading" para desativar a interação e mostrar um indicador de carregamento por meio do CSS. Ao concluir, defina btn.dataset.state = "idle". Um atributo substitui três alternâncias de classe separadas e uma verificação do atributo disabled.
Padrão de alça de arraste
Marque os itens arrastáveis com data-draggable="true" e os alvos de soltura com data-droptarget="true". Os ouvintes de eventos usam seletores de atributo para encontrar todos os itens arrastáveis: document.querySelectorAll("[data-draggable]"). A presença do atributo é mais semântica que nomes de classes para indicar a intenção comportamental.
Indicador de progresso
Um componente indicador de etapas usa data-step-status em cada etapa: "concluída", "atual", "próxima". O CSS estiliza cada status de forma distinta. O JavaScript define o status de cada etapa com base na posição atual — um estado legível sem precisar espelhar os dados em um objeto de estado JavaScript.
Persistência do tema
Armazene a preferência de tema do usuário em localStorage e aplique-a ao carregar: document.documentElement.dataset.theme = localStorage.getItem("theme") || "light". O CSS seleciona [data-theme="dark"] para o modo escuro — persistente e sem FOUC quando o script é executado em <head>.
Metadados de conteúdo dinâmico
Listas renderizadas pelo servidor incluem metadados em atributos de dados: data-product-id, data-price, data-category. O JavaScript os lê sem chamadas adicionais à API para filtragem, ordenação ou funcionalidade de carrinho no cliente, usando dados já renderizados.
Verificação de conhecimento
Qual é a vantagem de usar data-state="loading" em vez de adicionar ou remover uma classe CSS?
Resumo
Os atributos data-* permitem padrões poderosos do mundo real: tooltips CSS com content:attr(), máquinas de estados com data-state substituindo várias alternâncias de classes, acompanhamento de formulários em várias etapas, persistência de temas por meio de documentElement.dataset e metadados renderizados pelo servidor para funcionalidades do lado do cliente — tudo isso sem espelhamento do estado do JavaScript.
Perguntas Frequentes
A aula “Padrões do mundo real: dicas de ferramentas e acompanhamento de estado” é grátis?
Sim — o texto completo de “Padrões do mundo real: dicas de ferramentas e acompanhamento de estado” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de HTML Academy, atualize para CoddyKit PRO. O curso de HTML Academy inclui 4 aulas no total.
O que vou aprender em “Padrões do mundo real: dicas de ferramentas e acompanhamento de estado”?
Aplique data-* a dicas de ferramentas, estados ativos e configurações de componentes. Você pratica HTML Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar HTML Academy?
Nenhuma experiência prévia é necessária. HTML Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.
Quanto tempo leva a aula “Padrões do mundo real: dicas de ferramentas e acompanhamento de estado”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de HTML Academy?
Sim. Cada aula de HTML Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Sintaxe data-* e convenções de nomenclatura
- Acessando data-* com dataset em JavaScript
- Usando data-* com seletores de atributos do CSS
- Padrões do mundo real: dicas de ferramentas e acompanhamento de estado