Cursores e ponteiros

No Laboratório Belavista, o cursor conta o que dá para fazer: texto selecionável, link clicável, área que arrasta. Em tela de toque, tamanho do alvo importa mais que a setinha.

O exemplo deste capítulo é 40-cursores, no pacote que acompanha o volume. Passe o mouse nos chips e no campo. Troque cursor: pointer por help, preveja, confira. Ciclo: ler → digitar → mudar → prever → recarregar → conferir.

O que você vai aprender

• Palavras-chave de cursor (pointer, text, grab, not-allowed).
• Colorir o caret com caret-color.
• Usar pointer-events com cuidado.
• Adaptar alvos com @media (pointer: coarse).
• Não desligar zoom de toque sem necessidade.

Cursores

O navegador já troca o cursor em links e texto. Você reforça a intenção em botões e zonas especiais.

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Cursores — Laboratório Belavista</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <main>
      <h1>Bancada</h1>
      <button type="button" class="acao">Reservar mesa</button>
      <button type="button" class="acao" disabled>Esgotado</button>
      <label for="nota">Nota da prova</label>
      <textarea id="nota" name="nota" rows="3"></textarea>
      <p class="arraste" tabindex="0">Arraste o molde (simulação)</p>
    </main>
  </body>
</html>

.acao {
  cursor: pointer;
}

.acao:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

textarea {
  caret-color: #8b1e1e;
  cursor: text;
}

.arraste {
  cursor: grab;
}

.arraste:active {
  cursor: grabbing;
}

Pointer-events

.overlay-decorativa {
  pointer-events: none; /* cliques passam para o que está atrás */
}

Erro comum: pointer-events: none num botão “só visual” que ainda precisa ser usado — o clique some e o teclado também fica estranho. Desabilite de verdade com disabled ou remova do fluxo interativo no HTML.

Precisão do ponteiro

.acao {
  min-block-size: 2.75rem;
  padding-inline: 1rem;
}

@media (pointer: coarse) {
  .acao {
    min-block-size: 3rem;
    margin-block-end: 0.75rem;
  }
}

pointer: fine ≈ mouse; coarse ≈ dedo. any-pointer olha qualquer dispositivo ligado.

Toque

touch-action restringe gestos do navegador. Só mexa se souber o impacto em zoom e pan — tirar zoom da página inteira prejudica quem precisa ampliar.

Critério para avançar

Você avança se: aplica pointer e not-allowed; muda caret-color; aumenta alvo em pointer: coarse.

Confira o exemplo completo

A captura mostra o exemplo desta etapa. Abra a pasta completa, mude uma coisa e confira no navegador antes de seguir.

Atividades

1. Qual cursor sugere ação clicável em botões?
2. caret-color muda a seta do mouse?
3. Por que alvos maiores ajudam em pointer: coarse?

Respostas comentadas

1. cursor: pointer (mãozinha).
2. Não. Muda a cor do cursor de inserção no texto.
3. Dedo é menos preciso que mouse; botões apertados erram o alvo.