linux.do

原文链接：自定义网页鼠标指针——一段曲折的旅程

看到别人主题有自定义鼠标指针的功能，我也想给我主题加一个玩玩。

探索

初探

找到了相关文档：

● MDN：cursor - CSS：层叠样式表 | MDN
● 标准文件：CSS Basic User Interface Module Level 4

看起来似乎只需要下面 CSS 代码就完事了。

:root {
  cursor: url("xxx.cur"), auto;
}

随便下载了一个图标包，傻眼了：一个包里面有若干个 CUR 文件。
好吧，CUR 格式是一种图形文件格式，而不是打包了一组图标。

显然下面的写法不是很符合正确 CSS 写法。

:root {
  cursor: url("auto.cur"), auto;
  cursor: url("context-menu.cur"), context-menu;  /* [!code ++] */
  /* 省略更多 */  /* [!code ++] */
}

那有没有什么标准，说明什么网页元素用什么光标？

从 User Agent Stylesheet 学习

我想到了找 User Agent Stylesheet（用户代理样式表）

● Chromium 的：Source/core/css/html.css - chromium/blink - Git at Google
● Firefox 的只需要用浏览器打开 resource://gre-resources/html.css 即可看到。
● 未能找到 Safari 的 User Agent Stylesheet。

用户代理样式表中有这些 cursor 相关的定义：
点我展开相关定义 (click for more details) 提取聚合相关声明 (click for more details)
我们可以将这些拿出来作为声明。

从 cursor 实现学习

忽然想到，我找下 cursor: auto 是怎么实现的，对照设置下就好了，于是找到以下源码：

● event_handler.cc - Chromium Code Search
● chromium/third_party/blink/renderer/core/input/event_handler.cc at main · chromium/chromium

bool EventHandler::ShouldShowIBeamForNode(const Node* node,
                                          const HitTestResult& result) {
  if (!node)
    return false;

  if (node->IsTextNode() && (node->CanStartSelection() || result.IsOverLink()))
    return true;

  return IsEditable(*node);
}

std::optional<ui::Cursor> EventHandler::SelectCursor(
  const ui::Cursor& i_beam = style.IsHorizontalWritingMode() ? IBeamCursor() : VerticalTextCursor();

  switch (style.Cursor()) {
    case ECursor::kAuto:
      return SelectAutoCursor(result, node, i_beam);
    // 省略
    case ECursor::kText:
      return i_beam;
    // 省略
  }
  return PointerCursor();
}

std::optional<ui::Cursor> EventHandler::SelectAutoCursor(
    const HitTestResult& result,
    Node* node,
    const ui::Cursor& i_beam) {
  if (ShouldShowIBeamForNode(node, result))
    return i_beam;

  return PointerCursor();
}

cursor: auto 的实现逻辑非常简单：

1. 调用 ShouldShowIBeamForNode() 判断当前节点是否满足：可选择的文本/链接文本/可编辑区域（如 <input>, <textarea> 或带 contenteditable 属性的元素） ● 如果是，返回 i_beam（即 cursor: text）
2. 默认情况返回普通箭头光标（即 cursor: default）

结论：把可选择的文本/链接文本/可编辑区域设置为 cursor: text。

100% 还原实现思路：写一段 JS 监听 mousemove 事件，如果满足要求，就将光标换为自定义的 cursor: text。

妥协：我希望尽量使用 CSS 来实现，覆盖大部分情况，如果有需要再用 JS 判断边缘情况（如：user-select: none）。得到了以下 CSS 声明：
点我展开 CSS 相关声明 (click for more details)

发挥主观能动性

发挥主观能动性，观察标准 HTML 元素/ARIA 属性，按语义进行标注，得到了以下 CSS 声明：
一些 CSS 声明 (click for more details)

成果

聚合上面的阶段性成果，并按情况解释 cursor: auto 实际值，得到了以下的最终版本：

注：经过一次修订，去除了 *::-ms-browse（会导致 CSS 选择器失效）和 *::-ms-clear（有 ::-webkit-file-upload-button 了）。

点我展开最终版本 CSS 声明 (click for more details)
使用方法：

:root {
    cursor: default;  /* [!code --] */
    ursor: url("实际的图标地址.cur"), default;  /* [!code ++] */
}

/* 此外再补充其他需要的声明 */ /* [!code ++] */

结语

感谢您看到这里，欢迎留言交流。

2 posts - 1 participant

Read full topic

via LINUX DO - 最新话题 (author: HowieHz)

38 views12:38