The use-case I'm thinking of are for experiences which require the use of custom cursors. Common examples are web-based design applications (Figma, Photoshop Web) where the existing fallbacks don't support the expectations of the application. Though I'd also see this as helpful for folks creating custom cursors for highly artistic websites where the cursor is meant to be more unique. In these cases, the author has no ability to determine how large the user's cursor setting is.

Image: custom cursor found at iaragrinspun.com

For me, I have been setting my cursor at the largest setting for all of my computers to make it easier to find. This is especially in larger monitors which also help with larger canvases. When the application is forced to display a single cursor size, this makes it easy to lose in a vast viewport.

The current way of defining a custom cursor looks like this (from MDN):

body {
  cursor: url(cursor_1.png) 4 12, auto;
}

This proposal wants to introduce two things:

1. The ability to have some sort of units that relate to the OS cursor size setting.
2. A way to use those units in the final dimensions of the cursor.

cur units

My recommendation would be to introduce the cur unit where 1cur represents the OS setting size for the cursor. In my very limited research on this topic, it would seem that having this represent the square dimensions of the OS cursor seems most reasonable. This means that if the OS is rendering a 96px × 96px cursor size, then 1cur equals 96px. This would be very helpful when using the cursor property is too restrictive. As might be the case for when the cursor must be labelled dynamically. Multiplayer apps that have several cursors being used could then be more identifiable by using a value based off of the current users' settings.

cursor-size

I'd like to recommend adding a cursor-size property that would affect the resulting size of the cursor. This could be a <length-percentage> type if we expect that 100% equals 1cur. The default value for this would not affect the cursor size in any new way to not break existing behavior. This would need to be some opt-in setting. So, the author would need to explicitly introduce that the cursor-size is meant to be related to the OS size.

body {
  cursor: url(cursor_1.png) 4 12, auto;
  cursor-size: 1.5cur;
}

We do have the possibility of including it as part of a shorthand property of cursor, if the parser identifies a <length-percentage> within the statement.

body {
  cursor: url(cursor_1.png) 4 12 1.5cur, auto;
}

The cursor-size would only affect custom cursors. It would have no effect when only the keyword is provided.

x, y coord considerations

The current values that exist for the hot spot are numbers in units of image pixels from the top-left corner of the given image This means that the numbers more accurately represent a ratio. If the image provided is 16px × 16px, then a hot spot of 4 12 would put the hot spot at 4px from the left, and 12px from the top. If the cursor size can be affected by this new property, this should further enforce this being a ratio related to the image itself. As in, if we assume a 16px square custom cursor with the following CSS:

body {
  cursor: url(cursor_1.png) 4 12 1.5cur, auto;
}

The image would be rendered as a 24px square, and the hot spot would appear at 6px from the left, and 18px from the top.