CSS: “pointer-events”: “normal” no es un valor de “pointer-events”.

La propiedad CSS pointer-events controla si un elemento puede ser el objetivo de eventos de puntero como clics, toques y estados de hover. A diferencia de muchas otras propiedades CSS que aceptan normal como palabra clave (por ejemplo, white-space, letter-spacing), la propiedad pointer-events no incluye normal en su lista de valores válidos. Este es un error común ya que normal y auto a menudo se usan indistintamente en diferentes propiedades CSS, pero cada propiedad define su propio conjunto de palabras clave aceptadas.

Usar un valor inválido como normal significa que el navegador ignorará toda la declaración. En la mayoría de los casos esto no causará problemas visibles porque el comportamiento predeterminado ya permite la interacción con el puntero, pero puede llevar a resultados inesperados si dependes de la propiedad para anular un pointer-events: none heredado de un elemento padre. La declaración inválida simplemente se descartaría, y el valor none heredado permanecería en efecto, haciendo que el elemento no sea clicable.

Para elementos HTML estándar, los dos valores principales que usarás son:

• auto — El elemento se comporta como lo haría normalmente respecto a los eventos de puntero. Este es el valor predeterminado.
• none — El elemento nunca es el objetivo de eventos de puntero. Los clics y hovers pasan a través de lo que esté detrás de él.

Existen varios valores adicionales (visiblePainted, visibleFill, visibleStroke, visible, painted, fill, stroke, all) pero estos solo se aplican a elementos SVG. Las palabras clave globales de CSS como inherit, initial, unset, y revert también son válidas.

Para solucionar el problema, reemplaza normal con auto donde sea que aparezca como valor de pointer-events. Si estás usando pointer-events: normal para restaurar la interactividad predeterminada después de que un padre establezca pointer-events: none, entonces auto es exactamente lo que necesitas.

Ejemplos

Incorrecto — usando normal

<div style="pointer-events: normal;">
  <a href="/about">Acerca de nosotros</a>
</div>

El validador marcará normal como un valor inválido para pointer-events.

Correcto — usando auto

<div style="pointer-events: auto;">
  <a href="/about">Acerca de nosotros</a>
</div>

Caso de uso práctico: restaurando eventos de puntero en un hijo

Un patrón común es deshabilitar eventos de puntero en un padre y re-habilitarlos en un hijo específico. Usar normal aquí fallaría silenciosamente, dejando el botón sin poder ser clicado:

<!-- Incorrecto -->

<style>
  .overlay {
    pointer-events: none;
  }
  .overlay .close-btn {
    pointer-events: normal; /* Inválido — el botón permanece sin poder ser clicado */
  }
</style>

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

<!-- Correcto -->

<style>
  .overlay {
    pointer-events: none;
  }
  .overlay .close-btn {
    pointer-events: auto; /* Válido — el botón es clicable nuevamente */
  }
</style>

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

En la versión incorrecta, el navegador descarta completamente la declaración inválida pointer-events: normal, por lo que el .close-btn hereda none del padre y no puede ser clicado. Cambiarlo a auto restaura correctamente la interactividad en el botón.

Más información:

MDN Reference

MDN: CSS pointer-events

→