Só pra adicionar uma outra informação bacana que eu encontrei (e um exemplo funcional!), eu resolvi criar esta resposta. :)
A partir dessa thread do SO(en), eu aprendi que também é possível embutir o cursor diretamente no CSS via a codificação dos dados da imagem utilizada em base64
. Com o auxílio de ferramentas online como essa ou essa, uma imagem de cursor submetida pode ser facilmente convertida em uma string de dados codificados.
Eu usei as seguintes imagens em formato PNG, criadas a partir deste original de utilização livre:
Codifiquei cada uma usando uma das ferramentas citadas, e utilizei a seguinte sintaxe para definir os cursores:
cursor: url(data:image/png;base64,iVBORw0KG...), auto;
Este exemplo no JSFiddle contém os dados codificados de cada uma das imagens de cursor acima e permite testar o funcionamento dessa sugestão.
A principal vantagem que eu imagino dessa utilização é justamente reduzir o número de requisições de recursos ao servidor. Procurando mais a esse respeito eu achei essa outra thread no SO(en) que tem uma resposta muito bacana a respeito dos cuidados/limitações dessa abordagem. Traduzindo livremente abaixo:
É uma boa prática comumente utilizada apenas para pequenas imagens em
CSS que serão utilizadas juntas (tal como sprites), quando a
compatibilidade com o IE não importa muito e, principalmente, quando a
economia nas requisições é mais importante do que a "cacheabilidade"
(imagens nesse formato não são mantidas em cache pelo navegador).
Tem um número importante de pontos-negativos:
- Não funciona de forma alguma no IE6 e no IE7.
- Funciona para recursos de até 32k de tamanho no IE8. Esse é o limite que se aplica à codificação à representação após a codificação em
base64, ou seja, não se permite strings maiores do que 32.768
caracteres.
- Economiza na requisição, mas carrega a página HTML! E impede o cache das imagens. Elas são carregadas toda vez que a página ou CSS contendo
a string codificada é carregada.
- A codificação em base64 aumenta o tamanho das imagens em 33%.
- Se for utilizado um recurso que compactado com gzip, isso causará um custo consideravel no servidor! Imagens tradicionalmente utilizam
muita CPU para serem comprimidas, com pouca compressão no tamanho.
EDIT: Eu fiz alguns testes aqui (windows 8.1 64bits) com o JSFiddle de exemplo. Funcionou perfeitamente no Chrome (32.0) e no Firefox (26.0), mas não funcinou no IE11.
EDIT2:
A solução da resposta do @LeandroAmorim não funciona no IE11 mesmo se for dada uma URL diretamente para um arquivo png ou gif. Depois de muito procurar, notei que pra isso funcionar no IE a imagem utilizada deve estar no formato .cur ou .ani (essa indicação de necessidade de usar o formato "cursor" para o IE está na especificação do CSS 2.1 referida na resposta do @Kazzkiq).
Como o formato de cursor é aceito pelos demais navegadores, pra funcionar de forma geral (cross-browser) basta utilizar sempre esse formato ao invés de png ou gif.
É bastante fácil obter os arquivos no formato .cur:
- Via GIMP (por exemplo), salve as imagens no formato .ico;
- Então, utilize esse script Python para converter os arquivos .ico em arquivos .cur;
- Utilize no CSS os arquivos .cur da forma sugerida pelo @LeandroAmorim:
cursor: url(red_pointer.cur), auto;
Eu só não consegui utilizar o cursor na abordagem de incluir os dados codificados em base64. Provavelmente porque não sei como identificar o tipo do formato dos dados (data:image/x-icon
e data:image/png
não funcionam...). Se alguém souber como fazer, agradeceria a indicação. :)