CSS: “pointer-events”: “normal” não é um valor “pointer-events”.

A propriedade CSS pointer-events controla se um elemento pode ser o alvo de eventos do ponteiro, como cliques, toques e estados de hover. Ao contrário de muitas outras propriedades CSS que aceitam normal como palavra-chave (por exemplo, white-space, letter-spacing), a propriedade pointer-events não inclui normal na sua lista de valores válidos. Este é um erro comum, já que normal e auto são frequentemente usados de forma intercambiável em diferentes propriedades CSS, mas cada propriedade define o seu próprio conjunto de palavras-chave aceites.

Usar um valor inválido como normal significa que o navegador irá ignorar toda a declaração. Na maioria dos casos, isto não causará falhas visíveis porque o comportamento padrão já permite interação do ponteiro, mas pode levar a resultados inesperados se você estiver contando com a propriedade para sobrescrever um pointer-events: none herdado de um elemento pai. A declaração inválida seria simplesmente descartada, e o valor none herdado permaneceria em vigor, tornando o elemento não clicável.

Para elementos HTML padrão, os dois valores principais que você usará são:

• auto — O elemento comporta-se como normalmente faria em relação a eventos do ponteiro. Este é o padrão.
• none — O elemento nunca é o alvo de eventos do ponteiro. Cliques e hovers passam através para o que estiver por trás.

Existem vários valores adicionais (visiblePainted, visibleFill, visibleStroke, visible, painted, fill, stroke, all), mas estes só se aplicam a elementos SVG. Palavras-chave CSS globais como inherit, initial, unset e revert também são válidas.

Para corrigir o problema, substitua normal por auto onde quer que apareça como valor de pointer-events. Se você está usando pointer-events: normal para restaurar a interatividade padrão depois de um pai ter definido pointer-events: none, então auto é exatamente o que você precisa.

Exemplos

Incorreto — usando normal

<div style="pointer-events: normal;">
  <a href="/about">Sobre nós</a>
</div>

O validador irá sinalizar normal como um valor inválido para pointer-events.

Correto — usando auto

<div style="pointer-events: auto;">
  <a href="/about">Sobre nós</a>
</div>

Caso de uso prático: restaurar eventos do ponteiro num filho

Um padrão comum é desabilitar eventos do ponteiro num pai e reabilitá-los num filho específico. Usar normal aqui falharia silenciosamente, deixando o botão não clicável:

<!-- Incorreto -->

<style>
  .overlay {
    pointer-events: none;
  }
  .overlay .close-btn {
    pointer-events: normal; /* Inválido — botão permanece não clicável */
  }
</style>

<div class="overlay">
  <button class="close-btn">Fechar</button>
</div>

<!-- Correto -->

<style>
  .overlay {
    pointer-events: none;
  }
  .overlay .close-btn {
    pointer-events: auto; /* Válido — botão é clicável novamente */
  }
</style>

<div class="overlay">
  <button class="close-btn">Fechar</button>
</div>

Na versão incorreta, o navegador descarta completamente a declaração inválida pointer-events: normal, então o .close-btn herda none do pai e não pode ser clicado. Alterá-lo para auto restaura corretamente a interatividade no botão.

Saiba mais:

MDN Reference

MDN: CSS pointer-events

→