« Artículos « BlogTutorialesDownloads

CSS permite modificar el cursor que se usa en un determinado elemento. Si eres desarrollador Web, probablemente ya lo sabías, y quizá te preguntes ¿qué valor le puede dar a una interfaz el cambio de un cursor?

Soy un convencido que las buenas interfaces son aquellas que cuidan todos los detalles. Este artículo explicará un par de casos donde, mediante muy poco CSS, el cursor puede contribuir a una experiencia de usuario más limpia y elegante, y por consiguiente, a una mejor interfaz.

Los cursores tienen valor semántico

Esto quiere decir que no da lo mismo qué cursor ve el usuario en una determinada situación. Algunos ejemplos:

• Si pones el cursor aquí, la mano que se muestra te llevará a pensar que puedes hacer clic.
• Si pones el cursor sobre esta línea, parecerá como si pudieses arrastrarla.
• Si pones el cursor sobre esta línea, tenderás a pensar que tu navegador se quedó pegado y no responde.

Bien. Ahora veremos algunos casos en los que podemos alterar los cursores para mejorar la usabilidad en nuestros sitios web.

Cursor: default para el texto de la interfaz

El valor cursor:default,  que es la flecha predeterminada (probar aquí), puede ser aplicado para sobreescribir el cursor de texto que se usa al presentar… ejem, texto.

¿Pero para qué necesitaríamos hacer eso?

El cursor de texto tiene un doble valor semántico: le informa al usuario que el texto es editable o seleccionable, dependiendo del contexto. El texto de la interfaz (y con esto me refiero al texto que acompaña formularios, que le da el título a una sección, etc.) no necesita mostrarse como seleccionable.

Veamos un ejemplo. Supongamos que tenemos un menú típico de texto, separado por el carácter ”|”:

Archivo | Editar | Ver | Historial | Marcadores | Herramientas | Ayuda

Desplaza el cursor horizontalmente por sobre los elementos del menú de arriba. Verás que el cursor alterna entre cursor de manito y cursor de texto; claramente el texto entre links no necesita mostrarse como seleccionable. Compáralo con la siguiente versión, que incorpora cursor:default en el menú:

Archivo | Editar | Ver | Historial | Marcadores | Herramientas | Ayuda

La diferencia es sutil, casi imperceptible, pero a un nivel inconsciente reduce el nivel de “ruido” que se generaba antes por los cambios de cursor, y resalta aún más la relevancia de los links, que tienen cursores de mano.

El CSS necesario para usar cursor:default es sencillo. Suponiendo que queremos alterar una div con id “menu”, el código sería el siguiente:

div#menu {
   cursor:default;
}

Lo que hace que los links sigan teniendo cursor de mano a pesar de esta regla es la magia de CSS, que va aplicando los estilos en cascada. Por tanto, esta regla sólo se aplicará al texto plano, mientras que los links conservan su cursor predeterminado.

Cursor:pointer para los links de JavaScript

La regla cursor:pointer corresponde al cursor de mano que vemos usualmente al posar el mouse sobre un vínculo, es decir, una etiqueta <a>. Sin embargo, los navegadores sólo muestran este cursor si la etiqueta <a>; tiene un atributo href, que como sabemos, indica hacia dónde lleva el vínculo. Si el atributo href falta, el navegador asume que el link no lleva a ninguna parte (es decir, se convierte en un anclaje), y no muestra el cursor de mano.

¿Qué tipo de vínculos no necesita tener href como atributo? Aquellos que ejecutan un código JavaScript, lo cual se hace generalmente poniendo el código en un atributo onclick.

Sin embargo, la mayoría de los desarrolladores, observando que los navegadores no muestran el cursor correspondiente si no hay href, rellenan dicho atributo con el símbolo # (que mantiene el link, pero sin llevarlo a ninguna parte), o colocando la llamada al código javascript directamente en el href, de esta manera:

<a href="javascript:alert('este es mi codigo');">Clic aquí</a>

Sin embargo, ambas soluciones son poco pulcras, puesto que muestran en la barra de estado una dirección que es irrelevante (ej.: http://www.sergionouvel.cl/# ), o derechamente muestran el código javascript.

La solución más elegante es prescindir del atributo href, y añadir un atributo style que restituya el cursor de mano, de esta manera:

<a onclick="alert('Ejemplo de cursor de mano');"
style="cursor:pointer">Haz clic aquí</a>

Dicho ejemplo puedes probarlo a continuación:

Haz clic aquí

Listado de todos los cursores

A continuación va una lista con todos los valores, compatibles con todos los navegadores, que se le pueden asignar a la regla cursor. Pon el mouse sobre cada elemento para ver una demostración:

• crosshair
• default
• e-resize
• help
• move
• ne-resize
• n-resize
• nw-resize
• pointer
• se-resize
• s-resize
• sw-resize
• text
• wait
• w-resize

¿Dudas, opiniones? Hazte parte en los comentarios.