学习如何使用 CSS 自定义文本选择高亮颜色和外观，从而在不同浏览器和平台上提升用户体验和品牌一致性。
CSS 自定义高亮：精通文本选择样式
文本选择，这个在网页上拖动光标划过文字的简单动作，在设计和品牌推广中常常被忽视。然而，自定义浏览器的默认高亮颜色可以显著提升用户体验并强化您的品牌形象。本综合指南将带您了解有关 CSS 自定义高亮的所有知识，涵盖 ::selection 伪元素、浏览器兼容性、可访问性考量以及用以提升您网站设计的实际案例。
为什么要自定义文本选择高亮？
虽然浏览器默认的高亮颜色（通常是蓝色）功能齐全，但它可能与您网站的配色方案或品牌美学不符。自定义高亮颜色有以下几个好处：
- 品牌一致性：确保选择高亮与您的品牌颜色相得益彰，创造一个协调的视觉体验。
- 改善用户体验：精心挑选的高亮颜色可以提高可读性并减轻眼部疲劳，特别是对于有视觉障碍的用户。
- 增强视觉吸引力：自定义高亮可以为您的网站设计增添一丝精致和专业的韵味。
- 提升参与度：虽然看似微不足道，但视觉细节有助于提升用户的整体参与度和满意度。
::selection 伪元素
::selection 伪元素是使用 CSS 自定义文本选择高亮的关键。它允许您设置所选文本的背景颜色和文本颜色。请注意，您不能使用此伪元素来设置其他属性，如字体大小、字体粗细或文本装饰。
基本语法
基本语法非常简单：
::selection {
background-color: color;
color: color;
}
将 color 替换为您想要的颜色值（例如，十六进制、RGB、HSL 或命名颜色）。
示例
以下是一个简单的示例，将选定文本的背景颜色设置为浅蓝色，文本颜色设置为白色：
::selection {
background-color: #ADD8E6; /* Light Blue */
color: white;
}
将此 CSS 规则添加到您的样式表或 <style> 标签中以应用自定义高亮。
浏览器兼容性：处理前缀
虽然现代浏览器广泛支持 ::selection，但旧版本可能需要供应商前缀。为确保最大兼容性，最佳实践是包含 -moz-selection 和 -webkit-selection 前缀。
带前缀的更新语法
以下是包含供应商前缀的更新语法：
::-moz-selection {
background-color: #ADD8E6;
color: white;
}
::selection {
background-color: #ADD8E6;
color: white;
}
::-webkit-selection {
background-color: #ADD8E6;
color: white;
}
这可以确保您的自定义高亮在更广泛的浏览器中生效，包括旧版本的 Firefox（-moz-selection）和 Safari/Chrome（-webkit-selection）。
可访问性考量
在自定义文本选择高亮时，优先考虑可访问性至关重要。糟糕的颜色选择可能会让有视觉障碍的用户难以阅读选定的文本。以下是一些关键考量：
- 对比度：确保高亮显示的背景颜色和文本颜色之间有足够的对比度。WCAG（Web 内容可访问性指南）建议普通文本的对比度至少为 4.5:1，大号文本至少为 3:1。
- 色盲：在选择高亮颜色时要注意色盲问题。避免使用对于不同类型的色觉缺陷者难以区分的颜色组合。像 WebAIM 的颜色对比度检查器（https://webaim.org/resources/contrastchecker/）这样的工具可以帮助您评估颜色组合。
- 用户偏好：考虑允许用户自定义高亮颜色，以适应他们的个人需求和偏好。这可以通过用户设置或浏览器扩展来实现。
示例：可访问的颜色组合
以下是一个具有高对比度的可访问颜色组合示例：
::selection {
background-color: #2E8B57; /* Sea Green */
color: #FFFFFF; /* White */
}
这种组合提供了强烈的对比，使用户更容易阅读选定的文本。
高级自定义技巧
除了基本的颜色更改，您还可以使用 CSS 变量和其他技术来创建更复杂和动态的文本选择高亮。
使用 CSS 变量
CSS 变量（也称为自定义属性）允许您定义可重用的值，这些值可以轻松更新。这对于在整个网站设计中保持一致性特别有用。
定义 CSS 变量
在 :root 伪类中定义您的 CSS 变量：
:root {
--highlight-background: #FFD700; /* Gold */
--highlight-text: #000000; /* Black */
}
在 ::selection 中使用 CSS 变量
使用 var() 函数在您的 ::selection 规则中引用 CSS 变量：
::selection {
background-color: var(--highlight-background);
color: var(--highlight-text);
}
现在，您可以通过更新 :root 伪类中的 CSS 变量来轻松更改高亮颜色。
基于上下文的动态高亮颜色
您可以根据所选文本的上下文创建动态高亮颜色。例如，您可能希望标题的高亮颜色与正文文本不同。这可以通过 JavaScript 和 CSS 变量来实现。
示例：差异化高亮
首先，为不同的高亮颜色定义 CSS 变量：
:root {
--heading-highlight-background: #87CEEB; /* Sky Blue */
--heading-highlight-text: #FFFFFF; /* White */
--body-highlight-background: #FFFFE0; /* Light Yellow */
--body-highlight-text: #000000; /* Black */
}
然后，使用 JavaScript 为所选文本的父元素添加一个类：
// 这是一个简化的示例，需要更稳健的实现
// 才能准确处理不同的选择场景。
document.addEventListener('mouseup', function(event) {
const selection = window.getSelection();
if (selection.rangeCount > 0) {
const range = selection.getRangeAt(0);
const parentElement = range.commonAncestorContainer.parentNode;
if (parentElement.tagName === 'H1' || parentElement.tagName === 'H2' || parentElement.tagName === 'H3') {
parentElement.classList.add('heading-selected');
} else {
parentElement.classList.remove('heading-selected');
}
}
});
最后，为不同的类定义 CSS 规则：
.heading-selected::selection {
background-color: var(--heading-highlight-background);
color: var(--heading-highlight-text);
}
::selection {
background-color: var(--body-highlight-background);
color: var(--body-highlight-text);
}
此示例演示了如何根据所选上下文为标题和正文文本创建不同的高亮颜色。更全面的实现将需要用 JavaScript 处理各种选择场景和边缘情况。
实际案例与用例
以下是一些实际案例和用例，以启发您自己的自定义高亮设计：
- 极简设计：使用微妙的、低饱和度的颜色作为高亮，以保持简洁现代的外观。例如，浅灰色或米色。
- 深色主题：为深色主题反转默认颜色，使用深色背景和浅色文本作为高亮。这可以提高在弱光环境下的可读性。
- 品牌强化：使用您品牌的主色或次色作为高亮，以增强品牌认知度。
- 交互式教程：在交互式教程中使用明亮、引人注目的颜色作为高亮，以引导用户完成步骤。例如，鲜艳的黄色或橙色。
- 代码高亮：为代码片段自定义高亮颜色，以提高可读性并区分代码的不同元素。
示例：使用自定义高亮的代码高亮
对于代码高亮，一种微妙而独特的颜色可以提高可读性：
pre ::selection {
background-color: rgba(255, 255, 0, 0.2); /* Light Yellow with Transparency */
color: #000000; /* Black */
}
此示例使用半透明的浅黄色来高亮显示选定的代码，使其易于区分而又不会过于分散注意力。
需要避免的常见错误
以下是在自定义文本选择高亮时需要避免的一些常见错误：
- 忽略可访问性：未能确保背景和文本颜色之间有足够的对比度。
- 颜色过于明亮或分散注意力：使用过于明亮或分散注意力的颜色，可能导致眼睛疲劳并降低可读性。
- 样式不一致：在网站的不同部分应用不同的高亮样式，造成不连贯的用户体验。
- 忘记供应商前缀：忽略为旧版浏览器添加供应商前缀。
- 过度使用自定义高亮：仅在能增强用户体验的地方使用自定义高亮。过度使用会使网站显得杂乱或分散注意力。
结论
使用 CSS 自定义文本选择高亮是一种简单而有效的方法，可以增强用户体验并强化您的品牌形象。通过理解 ::selection 伪元素、处理浏览器兼容性并优先考虑可访问性，您可以创建视觉上吸引人且用户友好的网站。尝试不同的颜色组合和技术，为您的品牌找到完美的高亮样式。
请记住，始终要在不同的浏览器和设备上测试您的自定义高亮，以确保结果一致。通过关注这个经常被忽视的细节，您可以提升网站的设计水平，为用户创造更具吸引力的体验。