How do I make custom CSS cursors retina compatible?

Question

I was wondering how I could use a custom cursor in a webapp on a retina display. I know that normally, an image will be displayed at two times its normal size, due to the scale factor, and in making your site compatible with a retina display, you must take a 2x scale image, and set its in-browser rendering width and height to half its actual dimensions. Since cursors don't have size properties (to my knowledge), how can I ensure that a cursor will be rendered with the highest possible fidelity?

Thanks.

Answer 1

I quite like the generic solution proposed here, especially the fact that the author remembered to target all browsers that could be run on Macbook Pro with Retina Display.

@media only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
    /*your hi-res cursor styling*/
}

I'm quite curious if this would work correctly in Windows when run on the same hardware (with Bootcamp or Parallels etc.)