Personalizar cursores con CSS en cualquier navegador

A la hora de desarrollar un sitio web, es posible que muchos de los elementos con los que interactuamos, no respondan al evento y el cursor no responda cambiando de forma, tal y como dictan las normas de usabilidad. Esto puede ocurrir al utilizar algún reseteador de CSS o por otro motivo.

Para que el cursor reaccione como le indiquemos, debemos especificar la propiedad CSS cursor. Puedes echarle un vistazo a esta lista de cursores predeterminados.

Tan sólo tendríamos que seleccionar nuestro elemento mediante CSS y darle el estilo:

.elementoClicable {
cursor: pointer;
}

Hasta aquí todo muy normal pero, ¿qué ocurre si necesitamos usar un cursor diferente, una imagen que nosotros queramos? Vayamos por partes.

En todo el caos de navegadores y formatos soportados, a día de hoy, lo lógico sería pensar que para una imagen deba tener formato .png o .gif. Y son ampliamente soportados por los navegadores, excepto Internet Explorer en su versión más actual (la 10). Este último, sólo admite el formato de cursores de Windows, que no es otro que el .cur. El mismo formato que utiliza en su sistema operativo.

Sabiendo que los navegadores actuales lo soportan y que el “delicado” IE también, el formato que utilizaremos para nuestros cursores, será el .cur. Siempre podremos utilizar varias versiones del mismo, por si no cargase, que buscase el siguiente en formato .png o .gif. Importante no superar nunca los 32×32 píxeles de tamaño.

Puede ocurrir que tengamos cursores en formato .png o .gif y debamos convertirlo nosotros mismos. Un software gratuito y bastante recomendado que permite convertir a .cur es el RealWorld Cursor Editor.

Empecemos por la estructura de nuestro sitio web. Tenemos un directorio raíz cualquiera, llamado “sitio”, que contiene nuestra página “index.html” y las carpetas “css” e “img”.

cur-css-capt1

Siguiendo la lógica, dentro de “css” e “img” habrá un “estilo.css” y nuestro “cursor.cur”, respectivamente.

cur-css-capt2

cur-css-capt3

Primero enlazamos la hoja de estilos al documento, como es habitual:

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="css/estilo.css">
  </head>
  <body>
    ...
  </body>
</html>

Listo esto, y sabiendo cómo cambiar el cursor, lo lógico sería irnos corriendo a “estilo.css” y enlazar a nuestro cursor. Nótese que, como siempre, tomamos la ruta relativa a la hoja de estilo desde donde se llama a la imagen. Cuidado también con poner espacios en medio, a veces da problemas:

.elementoClicable {
cursor:url('../img/cursor.cur');
}

Nunca está de más incluir varias versiones de nuestro cursor, para curarnos en salud de posibles incompatibilidades de formatos por culpa de algún navegador rezagado:

.elementoClicable {
cursor:url('../img/cursor.cur'), url('../img/cursor.png'), url('../img/cursor.gif');
}

Lo más seguro es que no funcione ni en el navegador más respetuoso con los estándares. Esto ha sido y es un quebradero de cabeza para mucha gente, pero se soluciona de una forma muy sencilla si le indicamos una alternativa a nuestro cursor. En caso de que no pudiera cargarse este cursor personalizado, se buscará uno predeterminado, como los que vimos anteriormente.

.elementoClicable {
cursor:url('../img/cursor.cur'), pointer;
}

Esta propiedad alternativa, que se incluye como solución a un posible fallo, directamente anula toda la regla si no la ponemos.

Ya tenemos un cursor en un formato compatible con los navegadores medianamente actualizados, y gracias al anterior “truco”, tendremos nuestro bonito cursor funcionando en cualquier navegador… salvo Internet Explorer.

Es lógico preguntarse por qué sigue sin funcionar si hemos respetado los estándares e incluso hemos utilizado un formato exclusivamente para él. Pues contrario a las recomendaciones del W3C y del sentido común, IE decide buscar la imagen del cursor no desde la hoja de estilos como hicimos, sino desde el documento HTML fuente, tal que así:

.elementoClicable {
cursor:url('../img/cursor.cur'), url('img/cursor.cur'), pointer;
}

Puedes repasar la estructura de nuestro directorio para que te quede esto último más claro.

Ya tenemos un cursor que se debe mostrar bien en todo navegador actualizado e incluso con alguna versión menos. Aún así puede suceder que tenga una forma concreta y queremos que el clic sólo lo haga en determinada parte, por ejemplo, en un extremo. O que simplemente queramos desplazarlo por el motivo que sea.

Existe la posibilidad de asignar coordenadas (en sus valores X e Y) al cursor, para que cambie su posición de referencia, que por defecto es (0, 0). Esto no es totalmente compatible y puede dar errores, en cuyo caso el navegador ignorará la regla completa y no se molestará en mostrar nuestro cursor. Para ello es aconsejable, si debemos incluirla, hacerlo en una regla aparte para que se aplique la otra en caso de no funcionar esta. Lo haríamos de esta forma:

.elementoClicable {
cursor:url('../img/cursor.cur'), url('img/cursor.cur'), pointer;
cursor:url('../img/cursor.cur') 5 10, url('img/cursor.cur') 5 10, pointer;
}

Con esto deberíamos de controlar cualquier situación relativa a cursores personalizados con CSS en cualquier navegador. Lo cual no quita que entre todos recomendemos mantener siempre actualizado nuestro navegador, a ser posible Chrome o Firefox.

¿Te ha gustado el artículo?
Sé el primero en calificar esta publicación.
1 Star2 Stars3 Stars4 Stars5 Stars
Loading...
Artículo escrito por

¡Exprésate! Dejanos tu comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

1 Comentarios

Rubén Muñoz Autor

Buen artículo Daniel.