AI 摘要：这篇文章探讨了 Chrome 144 新引入的 ::search-text 伪元素，它允许开发者自定义浏览器“页面内查找”（Ctrl+F）匹配到的文本样式。作者对比了 ::selection、::target-text 等多种高亮相关伪元素的功能差异，并重点分享了如何利用 CSS 相对颜色语法（Relative Color Syntax）构建一套自动适应背景、高对比度且能区分不同高亮类型的动态样式方案，旨在提升 Web 内容的可访问性与用户体验。

1. 核心特性：认识 ::search-text
• ::search-text 专门用于选中页面内查找（find-in-page）匹配到的文本。
• 默认情况下，Chrome 中匹配项为黄色，当前目标项（::search-text:current）为橙色。
• 该伪元素的推出让开发者能够突破浏览器默认 UI，自定义搜索反馈的视觉呈现。

2. 高亮伪元素全集概览
• ::search-text：页面查找匹配文本，包含 :current 状态。
• ::target-text：URL 文本片段（Text fragments）高亮，常用于从搜索引擎跳转后的自动定位。
• ::selection：用户通过光标手动选中的文本。
• ::highlight()：通过 JavaScript 的 Custom Highlight API 定义的自定义高亮。
• ::spelling-error 与 ::grammar-error：主要用于可编辑内容中的拼写和语法错误标记。

3. 设计思路：可访问性与动态样式
• 为什么要自定义：解决默认颜色在特定背景下对比度不足（Color contrast）的问题，并增强视觉强调。
• 技术限制：高亮伪元素支持的 CSS 属性有限，例如 background-clip 和 backdrop-filter 通常无法使用。
• 相对颜色语法（Relative color syntax）：利用 rgb(from var(--bg) calc(255 - r) ...) 实现自动颜色反转，确保高亮色始终与背景色形成强烈对比。

4. 进阶实战：区分重叠的高亮状态
• 视觉区分：当用户在搜索结果中又手动选中了文字，需要确保不同类型的高亮（如 ::selection 和 ::search-text）能被同时辨识。
• 差异化策略：通过反转不同的 RGB 通道（如只反转 R 和 G，或只反转 B）来赋予每种伪元素独特的色调。
• 透明度处理：为非当前目标的高亮添加 alpha 透明度，使它们在相互叠加时产生融合效果，方便用户识别每个高亮的起止位置。
• 兼容性与未来：提及了 contrast-color() 函数在 CSS Color Module Level 5 中的潜力，作为未来更简便的替代方案。

CSS-Tricks

How to Style the New ::search-text and Other Highlight-y Pseudo-Elements | CSS-Tricks

Chrome 144 recently shipped ::search-text, which is now one of several highlight-related pseudo-elements. This one selects find-in-page text, which is the text that gets highlighted when you do a Ctrl/Command + F-type search for something on a page and matches…

AI 摘要：随着 Web 技术的飞速发展，传统的“像素级完美”这一源于印刷时代的理念已成为开发的阻碍。本文指出，由于屏幕尺寸的多样性、内容的动态变化以及对无障碍性的要求，追求绝对的像素匹配会导致代码臃肿和系统脆弱。作者 Amit Sheen 建议开发者与设计师应转向关注“设计意图（Design Intent）”，利用设计令牌（Design Tokens）、流体布局和现代 CSS 特性，构建更具弹性和逻辑性的 Web 体验，而非死磕静态图像中的绝对坐标。

Smashing Magazine

Rethinking “Pixel Perfect” Web Design — Smashing Magazine

Amit Sheen takes a hard look at the “Pixel Perfect” legacy concept, explaining why it’s failing us and redefining what “perfection” actually looks like in a multi-device, fluid world.