[csswg-drafts] OS cursor size units and property (#12048)

ddamato has just created a new issue for https://github.com/w3c/csswg-drafts:

== OS cursor size units and property ==
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.

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](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor)):

```css
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](https://www.axialis.com/tutorials/what-is-a-cursor.html), 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.

```css
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.

```css
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:

```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.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/12048 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Friday, 4 April 2025 02:10:24 UTC