Cursores Css personalizados con imágenes con data-uri 5.8.13

Cómo personalizar cursores css utilizando imágenes personalizadas con diferentes extensiones o codificadas en base64.

Cursores Css personalizados con imágenes con data-uri

·Por Kseso ⧉ 5.8.13 ⚑ especificaciones css ⚑ imagen ✎ 0

Personalización del cursor css con imágenes El documento que define los elementos de la interfaz gráfica de usuario (UI) y cómo acceder a ellos y personalizarlos, CSS Basic User Interface Module Level 3 (CSS3 UI), tiene un apartado dedicado a la personalización de los cursores o punteros.

Para cambiar la imagen mostrada, que por defecto está en función del tipo de elemento sobre el que se posicione, el documento del consorcio define la propiedad cursor. Y los valores posibles para ella son básicamente 2: palabras claves (keywords) e imágenes personalizadas.

El primero de ellos lo conforman una lista de palabras claves (keywords) bastante extensa. A ellas ya dediqué un artículo en su momento: La interfaz básica de usuario en Css3 (y 2): Cursores.
Estos cursores están en el núcleo del navegador. Así que puedes escoger qué "tipo" de cursor se mostrará, pero no cambiar la apariencia asociada a él.
Los cursores personalizados basados en imágenes. Su uso, con alguna que otra sorpresa en función del navegador y su versión y el tipo (extensión) de la imagen declarada, no es nuevo.

Dice la especificación sobre la propiedad 'cursor' y los valores posibles y admitidos:


propiedad:    cursor
Valores:      [ [<uri> [<x> <y>]?,]* 
                    [ auto | default | none |  help | pointer ...
                    ] ] | inherit

Cursores personalizados con imagen

En los sustituidos por una imagen elegida por el desarrollador, era típico encontrarse con una declaración múltiple:


a:hover {
 cursor: url(micursor.svg#linkcursor), 
            url(micursor.cur),
            url(micursor.png), 
            pointer;
}

A tener en cuenta que en la propiedad cursor el valor preferente es el declarado en primer lugar. En el fallback anterior el de extesión .svg

Con la mejora de los navegadores y los tipos de datos que pueden manejar, a los tipos de archivos anteriores se añade los declarados codificados en base64


a:hover {
 cursor: url(data:image/png;base64,gkg0jtIFQRR...);
}

Sin embargo, si declaras sólo la cadena de la codificación en base64 o el valor de la ruta a la imagen te encontrarás que no se muestra la imagen. Al menos en Firefox y Chrome según mis pruebas.

Volvamos sobre el código anterior y los valores posibles de la propiedad cursor. En concreto a la línea que dice [ [<uri> [<x> <y>]?,]* y en ella a esa 'X' e 'Y'. Sobre estos valores dice el documento:

Las coordenadas opcionales X e Y identifican la posición exacta, dentro de la imagen, que es la posición del puntero, es decir, el punto al que apunta.
Cada una es un número. La coordenada X y la coordenada Y dan la posición en el sistema de coordenadas del cursor (izquierda/arriba respecto a la imagen) que representa la posición exacta que señala. Si los valores no se especifican, se utiliza el punto de acceso intrínseco definido dentro del propio recurso de imagen. Si ambos valores son inespecíficos y el cursor de referencia no tiene punto de acceso definido, el efecto es como si se hubiera especificado un valor de "0 0".

Pese a lo dicho por el documento esto es lo que ocurre en Firefox y Chrome:

En ambos es obligatorio añadir tras el paréntesis de cierre de la ruta la coma y un valor. Si faltan no muestran la imagen.
Ambos admiten las palabras clave auto y default.
En Firefox si tras la coma se indica uno o dos valores (con o sin unidades) numéricos el cursor personalizado no se muestra.
Chrome admite sólo un valor numérico. Pero no parece que la posición exacta de señalización cambie con los valores y unidades empleadas. Se mantiene, según mis pruebas, en la esquina superior izquierda. Además si se declaran dos valores (x e Y) la imagen desaparece

Así que a tenor de estas pruebas parece que lo más aconsejable es declarar tras la ruta uno solo de los valoresauto o default. La declaración quedaría así:


.mi_elemento {
 cursor: url(data:image/png;base64,gkg0jtIFQRR...), auto;
 /*también el valor 'default'*/
}

Y para que puedas ver por ti mismo y hacer las pruebas que creas necesarias, aquí tienes un pen donde se muestran cursores tanto codificados en base64 como con una imagen .svg
Ver demo

See the Pen Custom cursors using data-uri by Kseso (@Kseso) on CodePen

Ruego final

En la actualidad es muy fácil modificar y personalizar al gusto (bueno o malo de cada uno) bastantes elementos de la interfaz de usuario. El cursor es uno más de ellos.

Pero siempre que te decidas a realizar alguna modificación en estos aspectos es obligado que te asegures que no cambias funcionalidad y usabilidad por estética. Tus visitantes y usuarios lo agradecerán.

Kseso

the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.