lunes, 25 de abril de 2011

La propiedad cursor

Los navegadores utilizan cursores de manera predeterminada, estableciendo cuál será el que se muestra de acuerdo al tipo de etiqueta pero, como casi todo, esos valores pueden ser cambiados utilizando CSS. En este caso, al propiedad que los define es:
cursor: valor;
Esos valores posibles son muchos e inclusio varian de navegador en navegador; algunos no producen efectos y otros son iguales entre si.

El valor por defecto es auto; el valor default muestra la fecha típica de selección y si usamos el valor none no se mostrará ninguno:


Es común ver que muchos utilizan el valor hand para indicar enlaces pero, esto es un error ya que es un cursor que sólo es soportado por Internet Explorer; para indicar un enlace, debe usarse pointer que mostrará lo mismo en todos los navegadores:
cursor: pointer;
Claro que, al entrar en al era del CSS3, a esos cursores se les han sumado algunos otros que por ahora, sólo son visibles en Firefox, Chrome, Safari y Opera pero, que pueden usarse sin problemas ya que la propiedad puede ser definida varias veces; de hecho, tendremos que definirla varias veces para usar estos nuevos modelos porque cada navegador tiene su propio valor.

Hay cuatro modelos disponibles:
cursor: grab; 
cursor: grabbing;
cursor: zoom-in;
cursor: zoom-out;
Para utilizarlos, debemos colocar los valores con sus respectivos prefijos: -moz- para Firefox, -webkit- para Chrome y Safari y -o- para Opera:
cursor: -moz-grab; cursor: -webkit-grab; cursor: -o-grab; cursor: grab;
cursor: -moz-grabbing; cursor: -webkit-grabbing; cursor: -o-grabbing; cursor: grabbing;
cursor: -moz-zoom-in; cursor: -webkit-zoom-in; cursor: -o-zoom-in; cursor: zoom-in;
cursor: -moz-zoom-out; cursor: -webkit-zoom-out; cursor: -o-zoom-out; cursor: zoom-out;

Aparentemente, la w3.org dice que habrá otors tres pero no parece que aún hayan sido incorporados a ningún navegador:
cursor: count-down;
cursor: count-up;
cursor: count-up-down;

No hay comentarios:

Publicar un comentario