CSS系列（48）-- Custom Highlight API详解

前端技术探索系列：CSS Custom Highlight API详解 ✨

致读者：探索文本高亮的艺术 👋

前端开发者们，

今天我们将深入探讨 CSS Custom Highlight API，这个强大的文本高亮特性。

基础概念 🚀

高亮注册

// 创建高亮范围
const range = new Range();
range.setStart(textNode, 5);
range.setEnd(textNode, 10);

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

高亮样式

/* 基础高亮 */
::highlight(custom-highlight) {
    background-color: #ffeb3b;
    color: #000;
}

/* 多样式高亮 */
::highlight(search-result) {
    background-color: rgba(255, 235, 59, 0.4);
    color: inherit;
}

::highlight(current-selection) {
    background-color: #2196f3;
    color: white;
}

高级特性 🎯

动态高亮

// 动态范围
class TextHighlighter {
    constructor() {
        this.highlights = new Map();
    }
    
    highlight(text, className) {
        const ranges = this.findTextRanges(text);
        const highlight = new Highlight(...ranges);
        CSS.highlights.set(className, highlight);
    }
    
    clearHighlight(className) {
        CSS.highlights.delete(className);
    }
}

/* 动态样式 */
::highlight(dynamic-highlight) {
    background: linear-gradient(
        90deg,
        rgba(255, 235, 59, 0.2),
        rgba(255, 235, 59, 0.8)
    );
    transition: background 0.3s;
}

/* 交互效果 */
::highlight(interactive) {
    background-color: #e3f2fd;
    cursor: pointer;
    
    &:hover {
        background-color: #bbdefb;
    }
}

复杂高亮

/* 多层高亮 */
::highlight(layer-1) {
    background-color: rgba(255, 235, 59, 0.3);
}

::highlight(layer-2) {
    background-color: rgba(33, 150, 243, 0.3);
}

/* 组合效果 */
::highlight(combined) {
    background-color: rgba(255, 235, 59, 0.4);
    text-decoration: underline;
    text-decoration-color: #f44336;
    text-decoration-thickness: 2px;
}

实际应用 💫

搜索高亮

// 搜索高亮器
class SearchHighlighter {
    constructor() {
        this.currentHighlight = null;
    }
    
    highlightSearch(text) {
        // 清除旧高亮
        if (this.currentHighlight) {
            CSS.highlights.delete('search-highlight');
        }
        
        // 创建新高亮
        const ranges = this.findMatches(text);
        this.currentHighlight = new Highlight(...ranges);
        CSS.highlights.set('search-highlight', this.currentHighlight);
    }
}

/* 搜索样式 */
::highlight(search-highlight) {
    background-color: #fff176;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
}

/* 当前匹配 */
::highlight(current-match) {
    background-color: #ffd54f;
    box-shadow: 0 0 0 2px #ffc107;
}

代码高亮

// 代码高亮器
class CodeHighlighter {
    constructor() {
        this.highlights = new Map();
    }
    
    highlightSyntax(code) {
        const tokens = this.tokenize(code);
        tokens.forEach(token => {
            const highlight = new Highlight(token.range);
            CSS.highlights.set(`syntax-${token.type}`, highlight);
        });
    }
}

/* 语法高亮 */
::highlight(syntax-keyword) {
    color: #d32f2f;
    font-weight: 500;
}

::highlight(syntax-string) {
    color: #388e3c;
}

::highlight(syntax-comment) {
    color: #757575;
    font-style: italic;
}

性能优化 ⚡

渲染优化

// 批量处理
class BatchHighlighter {
    constructor() {
        this.pendingHighlights = new Map();
        this.rafId = null;
    }
    
    addHighlight(className, range) {
        this.pendingHighlights.set(className, range);
        this.scheduleUpdate();
    }
    
    scheduleUpdate() {
        if (this.rafId) return;
        
        this.rafId = requestAnimationFrame(() => {
            this.applyHighlights();
            this.rafId = null;
        });
    }
}

/* 性能考虑 */
::highlight(optimized) {
    contain: paint;
    will-change: background-color;
}

最佳实践建议 💡

1. 高亮策略

   • 范围控制
   • 样式管理
   • 交互设计
   • 性能优化

2. 用户体验

   • 视觉反馈
   • 交互流畅
   • 可访问性
   • 降级方案

3. 开发建议

   • 代码组织
   • 复用策略
   • 错误处理
   • 测试验证

4. 性能考虑

   • 批量处理
   • 渲染优化
   • 资源管理
   • 内存控制

写在最后 🌟

CSS Custom Highlight API为我们提供了强大的文本高亮控制能力，通过合理运用这一特性，我们可以构建出更加专业和用户友好的文本交互体验。

进一步学习资源 📚

• 高亮效果指南
• 性能优化技巧
• 交互设计模式
• 实战案例分析

如果你觉得这篇文章有帮助，欢迎点赞收藏，也期待在评论区看到你的想法和建议！👇

终身学习，共同成长。

咱们下一期见

💻