Level Up Your UI: Mastering the CSS Custom Highlight API for Text Selection Styling

In this example, we've defined a custom highlight name called code-highlight. We've then applied this highlight to code elements. The background color is set to light blue (#ADD8E6), the text color is set to dark blue (#00008B), and the font weight is set to bold. Now, whenever text is selected within a code element, it will be styled with these custom styles.

Advanced Usage: Targeting Specific Text Ranges

The CSS Custom Highlight API can also be used to target specific text ranges within an element. This allows for even more granular control over text selection styling.

Example: Highlighting Search Terms

Imagine you want to highlight search terms within a document. This often requires JavaScript in conjunction with the CSS Highlight API.

1. Use JavaScript to Identify Search Terms: Use JavaScript to find all occurrences of the search term within the document.
2. Create Highlight Ranges: Use the Range API in JavaScript to create ranges for each occurrence of the search term.
3. Apply the Highlight: Use the CSS.highlights.set() method to apply the highlight to the created ranges.

            
// JavaScript code to highlight search terms
function highlightSearchTerms(searchTerm) {
  // First, define the custom highlight in CSS
  const highlightName = 'search-highlight';
  const ranges = [];

  // Find all text nodes
  function findTextNodes(el) {
      let n, a=[], walk=document.createTreeWalker(el,NodeFilter.SHOW_TEXT,null,false);
      while(n=walk.nextNode()) a.push(n);
      return a;
  }

  const textNodes = findTextNodes(document.body);

  textNodes.forEach(node => {
    let nodeValue = node.nodeValue;
    let index = nodeValue.indexOf(searchTerm);

    while (index !== -1) {
      const range = document.createRange();
      range.setStart(node, index);
      range.setEnd(node, index + searchTerm.length);
      ranges.push(range);
      index = nodeValue.indexOf(searchTerm, index + searchTerm.length);
    }
  });

  // Apply the highlights using CSS.highlights.set()
  if (CSS.highlights && CSS.highlights.set) {
    CSS.highlights.set(highlightName, ranges);
  } else {
    console.warn('CSS Custom Highlight API is not fully supported in this browser. Providing fallback');
    // Provide a fallback for browsers with limited support (e.g., older Safari)
    ranges.forEach(range => {
      const span = document.createElement('span');
      span.style.backgroundColor = '#FFA07A'; // Light Salmon
      span.style.color = '#000000'; // Black
      span.className = 'search-highlight-fallback'; // Add a class for fallback styling
      range.surroundContents(span);
    });
  }
}

// CSS code to style the search highlight
::highlight(search-highlight) {
  background-color: #FFA07A; /* Light Salmon */
  color: #000000; /* Black */
}

/* Fallback styling for browsers that don't fully support the API */
.search-highlight-fallback {
 background-color: #FFA07A;
 color: #000000;
}

// Example usage: highlight the term "example"
highlightSearchTerms("example");

            

              
                Copy
              
            
          

This code snippet demonstrates how to highlight search terms within a document using JavaScript and the CSS Custom Highlight API. The JavaScript code identifies the search terms, creates ranges for each occurrence, and applies the search-highlight to those ranges. The CSS code then styles the highlighted text with a light salmon background and black text.

Important Note: This approach requires JavaScript and relies on the CSS.highlights API. Since support isn't universal, a fallback mechanism (like surrounding the text with a `span` and styling that `span`) is demonstrated.

Accessibility Considerations

When using the CSS Custom Highlight API, it's crucial to consider accessibility to ensure your website is usable by everyone, including users with disabilities.

Tips for Accessible Text Selection Styling:

• Ensure Sufficient Contrast: Maintain sufficient contrast between the background and text color of the selected text to make it readable for users with visual impairments. WCAG guidelines recommend a contrast ratio of at least 4.5:1 for normal text.
• Avoid Relying Solely on Color: Don't rely solely on color to indicate text selection. Use additional visual cues, such as underlining or bolding, to make the selection more apparent.
• Provide Alternative Styling for High Contrast Mode: Users who enable high contrast mode in their operating system may override your custom styles. Provide alternative styling that works well in high contrast mode to ensure readability. You can use media queries like @media (forced-colors: active) to detect when high contrast mode is enabled.
• Test with Assistive Technologies: Test your website with assistive technologies, such as screen readers, to ensure that the selected text is properly announced and understood.

Example: Ensuring Sufficient Contrast

            
::highlight {
  background-color: #000080; /* Navy Blue */
  color: #FFFFFF; /* White */
}

            

              
                Copy
              
            
          

In this example, we've chosen a navy blue background color and white text color, which provides sufficient contrast for users with visual impairments. Always use a color contrast checker to verify that your color choices meet accessibility standards. Tools like WebAIM's Contrast Checker can be helpful.

Practical Examples and Use Cases

The CSS Custom Highlight API offers a wide range of possibilities for enhancing the user experience. Here are some practical examples and use cases:

• Code Highlighting: As demonstrated earlier, you can use the API to highlight code snippets with custom styles, making them more visually appealing and easier to read.
• Search Term Highlighting: Highlight search terms within a document to help users quickly locate the information they're looking for.
• Error Highlighting: Highlight errors or warnings in forms or other user interfaces to draw the user's attention to them.
• Citation Highlighting: Highlight cited text in academic papers or articles to visually distinguish it from the main content.
• Conversation Highlighting: In chat applications, highlight the user's own messages or messages from specific users to make them easier to follow.
• Gamification: Highlight specific words or phrases in a game to provide clues or hints to the player.
• Text Summarization: Highlight key sentences or phrases in a document to provide a quick summary of the content. This often involves complex algorithms to determine importance.

Best Practices and Tips

To make the most of the CSS Custom Highlight API, follow these best practices and tips:

• Use Descriptive Highlight Names: Choose descriptive highlight names that clearly indicate the purpose of the highlight. This will make your code more readable and maintainable. For example, use code-highlight instead of highlight-1.
• Keep Styles Consistent: Maintain a consistent style across all your highlights to create a cohesive user experience. Use a design system or style guide to ensure consistency.
• Avoid Overusing Highlights: Don't overuse highlights, as this can be distracting and overwhelming for users. Use them sparingly and strategically to draw attention to the most important information.
• Test on Different Devices and Browsers: Test your website on different devices and browsers to ensure that your custom highlights are displayed correctly. Pay particular attention to mobile devices and older browsers.
• Consider Performance: While the CSS Custom Highlight API is generally performant, be mindful of the number of highlights you're using, especially on large documents. Too many highlights can impact performance. If you're using JavaScript to manage highlights, optimize your code to minimize the number of DOM manipulations.
• Use Progressive Enhancement: Because browser support isn't universal, use progressive enhancement techniques. Implement a fallback mechanism using standard CSS styling to ensure the experience remains usable for those on older browsers. Consider using feature detection (e.g., checking for the existence of `CSS.highlights`) to determine whether to use the API or the fallback.

Conclusion

The CSS Custom Highlight API is a powerful tool for enhancing the user experience and creating more visually appealing and informative text selections. By mastering this API, you can take your UI design to the next level and provide users with a more engaging and accessible browsing experience. While browser support is still evolving, understanding and experimenting with this API now will position you to create cutting-edge web experiences as adoption grows. Remember to prioritize accessibility and provide fallbacks for older browsers to ensure a positive experience for all users.

Resources

• MDN Web Docs: CSS Custom Highlight API
• Can I Use: CSS Custom Highlight API
• WebAIM Contrast Checker