How to customize custom CSS cursors?

Question

I was wondering how I can use the custom cursor in the webapp on the retina screen. I know that usually the image will be displayed twice as compared to its normal size, due to the scale factor, and also to ensure the compatibility of your site with the mesh display, you should take the image with scaling on a 2x scale and set its rendering width to browser and up to half its actual size. Since cursors do not have size properties (as far as I know), how can I guarantee that the cursor will be displayed with the highest possible accuracy?

Thanks.

Answer 1

I really like the proposed general solution here, especially the fact that the author remembered that it targets all browsers that can be launched on a 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 am very curious if this will work correctly on Windows when running on the same hardware (with Bootcamp or Parallels, etc.)