CSS custom cursor with retina support

Question

I can't find any information about this topic. I want a simple custom cursor with CSS. I have this code right now:

cursor: url('img/cursor_left.png'), auto;

It shows the cursor, nothing wrong. But it's blurry, because it isn't compatible for retina display. Anyone knows how to fix this?

Thanks, Angelo.

Economize

Answer 1

I haven't tested this, but it should be possible to use image-set:

cursor: url('img/cursor_left.png'), auto;
cursor: -webkit-image-set(
  url('img/cursor_left.png') 1x,
  url('img/cursor_left_hi.png') 2x
), auto;

Dual

The reason for the duplicate lines is to provide a reasonable fallback on IE. On Firefox, Chrome, and Safari the second cursor: definition is valid and overrides the plain url one. – Dual

Tried it on Firefox and unfortunately it doesn't work. (I think it doesn't read the -webkit-image-set definition, as it isn't a webkit browser). – Economize

Sorry about that; I was trusting the compatibility information in the article I linked rather than trying it out myself. Maybe plain image-set would work? – Dual

Tried it, unfortunately no Mozilla support. Using the fallback for non-webkit browsers. – Economize

This currently works only on Chrome. It is broken on Safari in a way that makes it more or less useless: the 2x image is used, but displayed at twice the intended size. bugs.webkit.org/show_bug.cgi?id=120783 – Colyer

It does work on Safari in the meantime. Even without the prefix: image-set is enough. Chrome still needs the prefix. And for other browsers I believe there is still no solution... – Listen