4 ms·

Interesting trick. I was recently looking through Safari CSS Reference and thought using an image to replace the cursor wasn't allowed: "Although the CSS specif

Interesting trick. I was recently looking through Safari CSS Reference and thought using an image to replace the cursor wasn't allowed: "Although the CSS specification allows it, Safari does not support custom cursors." [0] What are examples of legitimate use-cases for supporting custom cursors? If you're considering using a custom cursors, keep in mind that not all users keep the normal cursor size. At least on macOS, you can increase the size from the Accessibility panel. Hopefully the web can start providing access to more built-in accessibility features. One such feature that was added recently is Reduced Motion Media Query [1]. Wouldn't it be great to have a media query for "Increase contrast"? I can't be the only one that's occasionally frustrated from websites that mix 50 shades of barely readable gray. [0] https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-cursor https://developer.apple.com/library/content/documentation/Ap... [1] https://developer.apple.com/library/content/releasenotes/General/WhatsNewInSafari/Articles/Safari_10_1.html#//apple_ref/doc/uid/TP40014305-CH12-DontLinkElementID_61 https://developer.apple.com/library/content/releasenotes/Gen...

Nemo157 10y ago
That does seem to be the case for me (at least on Safari 9.1); the real cursor disappears, but no fake cursor appears.
- hrrsn 10y ago
  The demo works fine on Safari 10 for me.
Freak_NL 10y ago
> What are examples of legitimate use-cases for supporting custom cursors? Probably special cursors that indicate a different type of action that can be performed; like the hand-shaped pointer you get when hovering over a button or the various resize arrows, but custom. A tipped paint bucket for example on a website presenting a drawing application.
lawik 10y ago
I am certain in my heart that the most reasonable use case is to replace the cursor with a detailed gauntlet cursor or severed hand as in Warcraft to let the user know whether they are The Alliance or Horde. Kidding, of course. But damn I loved that sort of thing back when. Especially being able to do it with weird plugins as a fledgling "webmaster".
aschampion 10y ago
> What are examples of legitimate use-cases for supporting custom cursors? We build web applications serving expert users for which this is essential. For precise selection the default cursor often occludes important information. Think of how confusing something like Photoshop, AutoCAD or Maya would be without contextual cursors. It would be sensible, however, to place behind a permission in the same way as location or notification APIs. Unfortunately most browsers' UX for permissions is awful.
- shawnz 10y ago
  OP is specifically talking about the ability to use arbitrary images as cursors. Why aren't the standard i-beam, crosshair, resize etc cursors enough for your purposes?
  - aschampion 10y ago
    Modal function cues: paintbucket, eyedropper, etc. Common interaction cues that span functions but aren't in the CSS set: multiaxis, rotation, etc. Not to mention the innumerable domain-specific possibilities. It's another example of the tension between the idea of browser-as-the-future-ubiquitous-platform and browser-as-lowest-common-denominator-mobile-safe-sandbox, which is eroding the established niche of desktop software for deep, focused, domain-optimized work because of the tyranny of CRUDy consumption-focused web apps.
  - jfim 10y ago
    Sometimes you're conveying additional information through the cursor. For example, the default cursor in Photoshop when using the brush tools is a circle that shows your brush width, so that when using the brushes you know which area will be painted (see http://pe-images.s3.amazonaws.com/basics/cs5/preferences/show-crosshair.gif http://pe-images.s3.amazonaws.com/basics/cs5/preferences/sho... for example). Some other CAD applications show whether a line is freestanding or snapped to another through the cursor as well.
  - Chris_Newton 10y ago
    If you’re developing a UI with interesting interactions, you can provide useful and intuitive feedback to the user by changing the cursor, either to reflect what will happen if they click at the current location, or to show that for some reason they can not do something by clicking at the current location. Exactly what actions are possible or potentially expected but actually not possible will naturally depend on context, including the purpose of the application itself, anything already done by the user, and perhaps other factors like whether the user is holding any keys down at the moment. There are endless possibilities where this idea could be useful, from “fill the intermediate cells using rule X” in a spreadsheet to “guard this ally” in a game. As an aside, UIs that use this technique may also use larger or more complicated tool tips and/or context menus, which means that a lot of the local status and commands within a UI can be viewed in the immediate vicinity of where they are relevant. On larger screens or UIs that divide the available space into different areas for different purposes, that locality can be useful both for reducing user errors and for increasing efficiency.
sharpercoder 10y ago
A presentation app where the cursor can be changed to a laser pointer (big red dot).

Nemo157 10y ago

That does seem to be the case for me (at least on Safari 9.1); the real cursor disappears, but no fake cursor appears.

hrrsn 10y ago
The demo works fine on Safari 10 for me.

Freak_NL 10y ago

> What are examples of legitimate use-cases for supporting custom cursors? Probably special cursors that indicate a different type of action that can be performed; like the hand-shaped pointer you get when hovering over a button or the various resize arrows, but custom. A tipped paint bucket for example on a website presenting a drawing application.

lawik 10y ago

I am certain in my heart that the most reasonable use case is to replace the cursor with a detailed gauntlet cursor or severed hand as in Warcraft to let the user know whether they are The Alliance or Horde. Kidding, of course. But damn I loved that sort of thing back when. Especially being able to do it with weird plugins as a fledgling "webmaster".

aschampion 10y ago

> What are examples of legitimate use-cases for supporting custom cursors? We build web applications serving expert users for which this is essential. For precise selection the default cursor often occludes important information. Think of how confusing something like Photoshop, AutoCAD or Maya would be without contextual cursors. It would be sensible, however, to place behind a permission in the same way as location or notification APIs. Unfortunately most browsers' UX for permissions is awful.

shawnz 10y ago
OP is specifically talking about the ability to use arbitrary images as cursors. Why aren't the standard i-beam, crosshair, resize etc cursors enough for your purposes?
- aschampion 10y ago
  Modal function cues: paintbucket, eyedropper, etc. Common interaction cues that span functions but aren't in the CSS set: multiaxis, rotation, etc. Not to mention the innumerable domain-specific possibilities. It's another example of the tension between the idea of browser-as-the-future-ubiquitous-platform and browser-as-lowest-common-denominator-mobile-safe-sandbox, which is eroding the established niche of desktop software for deep, focused, domain-optimized work because of the tyranny of CRUDy consumption-focused web apps.
- jfim 10y ago
  Sometimes you're conveying additional information through the cursor. For example, the default cursor in Photoshop when using the brush tools is a circle that shows your brush width, so that when using the brushes you know which area will be painted (see http://pe-images.s3.amazonaws.com/basics/cs5/preferences/show-crosshair.gif http://pe-images.s3.amazonaws.com/basics/cs5/preferences/sho... for example). Some other CAD applications show whether a line is freestanding or snapped to another through the cursor as well.
- Chris_Newton 10y ago
  If you’re developing a UI with interesting interactions, you can provide useful and intuitive feedback to the user by changing the cursor, either to reflect what will happen if they click at the current location, or to show that for some reason they can not do something by clicking at the current location. Exactly what actions are possible or potentially expected but actually not possible will naturally depend on context, including the purpose of the application itself, anything already done by the user, and perhaps other factors like whether the user is holding any keys down at the moment. There are endless possibilities where this idea could be useful, from “fill the intermediate cells using rule X” in a spreadsheet to “guard this ally” in a game. As an aside, UIs that use this technique may also use larger or more complicated tool tips and/or context menus, which means that a lot of the local status and commands within a UI can be viewed in the immediate vicinity of where they are relevant. On larger screens or UIs that divide the available space into different areas for different purposes, that locality can be useful both for reducing user errors and for increasing efficiency.

sharpercoder 10y ago

A presentation app where the cursor can be changed to a laser pointer (big red dot).