LibrosWeb.es

El estándar de CSS 2.1 define propiedades para modificar solamente el aspecto de los elementos que incluyen las páginas HTML. Por este motivo, no se definen propiedades para modificar el aspecto de la ventana del navegador o el aspecto de otros elementos del sistema operativo.

No obstante, la propiedad cursor es una de las pocas excepciones del estándar CSS 2.1, ya que se emplea para modificar el aspecto que muestra el puntero del ratón. Si no se utiliza esta propiedad, el navegador decide automáticamente el tipo de puntero que muestra al usuario en cada momento, como por ejemplo cuando se muestra el puntero con forma de mano al pasar el ratón sobre un enlace.

Ningún sitio web correcto modifica el aspecto gráfico del puntero del ratón, pero con la propiedad cursor es tan sencillo como indicar la URL del archivo gráfico que contiene el nuevo puntero:

body {
  cursor: url("mi_cursor.png");
}

El estándar CSS 2.1 no especifica los formatos gráficos que se pueden utilizar para definir el aspecto del nuevo puntero, por lo que es habitual indicar una lista de punteros alternativos separados por comas para que el navegador utilice el primer archivo que sea capaz de procesar:

body {
  cursor: url("mi_cursor.png"), url("/imagenes/otro_cursor.svg"), url("cursor3.cur");
}

Recuerda que aunque es muy sencillo modificar el aspecto gráfico del puntero, ningún sitio web correcto lo hace. En primer lugar, a la mayoría de usuarios avanzados les molesta la modificación no solicitada de su puntero. En segundo lugar, a los usuarios menos experimentados les puede llegar a confundir que el sitio web les cambie el aspecto de su puntero.

Por otra parte, en las aplicaciones web actuales es habitual que el usuario pueda arrastrar y soltar un elemento de la página para modificar su posición, que el usuario pueda redimensionar un elemento, etc. En estas situaciones, modificar el tipo de puntero mostrado mejora la usabilidad de la aplicación.

El siguiente ejemplo indica la regla CSS necesaria para que el navegador muestre el puntero con forma de mano cada vez que el usuario pasa su ratón por encima de un párrafo:

p {
  cursor: pointer;
}

A continuación se muestran ejemplos de todos los tipos de puntero incluidos en el estándar de CSS 2.1. Prueba a pasar el ratón por encima de cada caja para descubrir el aspecto con el que tu navegador muestra cada puntero:

Uno de los errores más habituales con la propiedad cursor es el uso del valor hand en los navegadores de tipo Internet Explorer. En realidad, el valor hand no es parte del estándar CSS 2.1, pero es el valor que utilizaban las primeras versiones de Internet Explorer para referirse al valor pointer. Por ese motivo, era común definir la siguiente regla CSS cuando se quería mostrar el puntero con forma de mano:

selector {
  cursor: pointer;
  cursor: hand;
}

La regla CSS anterior era la única que funcionaba correctamente en cualquier versión de cualquier navegador. No obstante, Internet Explorer 6 y todas las versiones posteriores ya soportan el valor pointer por lo que seguir utilizando el valor hand es un error innecesario.