CSS Custom Highlight API在Safari中下划线样式失效的解决方案求助

在使用CSS Custom Highlight API实现跨标签文本高亮时，Chrome支持在::highlight()伪元素中使用text-underline-offset和text-decoration-thickness属性，但Safari目前未完全实现这两个特性，导致下划线样式模糊难辨。以下是基于该API的两种兼容实现方案：

方案一：用text-shadow模拟下划线 #

通过多层文本阴影模拟下划线的厚度和偏移，可在Safari中达到近似原生下划线的效果：

::highlight(custom-highlight) {
  /* 基础下划线配置（Chrome生效） */
  text-decoration: underline;
  text-decoration-color: #ffd700;
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
  
  /* Safari兼容：text-shadow模拟下划线 */
  text-shadow: 
    0 4px 0 #ffd700,   /* 下划线主体，偏移量对应text-underline-offset */
    0 5px 0 transparent,
    0 6px 0 transparent; /* 避免阴影覆盖文本内容 */
}

方案二：用线性渐变背景模拟下划线 #

通过背景渐变绘制下划线，完全避开原生text-decoration的兼容性问题，在两款浏览器中表现一致：

::highlight(custom-highlight) {
  /* 禁用原生下划线 */
  text-decoration: none;
  
  /* 渐变背景模拟下划线 */
  background-image: linear-gradient(#ffd700, #ffd700);
  background-position: 0 calc(100% + 2px); /* 控制下划线偏移，对应text-underline-offset */
  background-size: 100% 2px; /* 控制下划线厚度，对应text-decoration-thickness */
  background-repeat: repeat-x;
  
  /* 可选：增加底部内边距避免下划线与其他元素重叠 */
  padding-bottom: 4px;
}

进阶：特性检测的优雅兼容 #

使用@supports检测浏览器对text-underline-offset的支持，让Chrome使用原生样式、Safari自动切换模拟样式：

/* 基础样式：Chrome生效 */
::highlight(custom-highlight) {
  text-decoration: underline #ffd700;
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
}

/* 针对不支持text-underline-offset的浏览器（如Safari） */
@supports not (text-underline-offset: 0) {
  ::highlight(custom-highlight) {
    text-decoration: none;
    background-image: linear-gradient(#ffd700, #ffd700);
    background-position: 0 calc(100% + 2px);
    background-size: 100% 2px;
    background-repeat: repeat-x;
    padding-bottom: 4px;
  }
}

配套JavaScript代码示例 #

确保已正确注册高亮范围：

// 创建文本范围
const range = new Range();
range.setStart(document.querySelector('.target-text').firstChild, 5);
range.setEnd(document.querySelector('.target-text').firstChild, 15);

// 注册高亮
const highlight = new Highlight(range);
CSS.highlights.set('custom-highlight', highlight);

内容的提问来源于stack exchange，提问作者Samuel Bradshaw