Posted in

Microsoft Edge 140 Adds CSS.highlights API for Precise Text Detection

by ailona•

Microsoft Edge 140 introduces the CSS.highlights.highlightsFromPoint() API, revolutionizing text editing by enabling precise detection of custom highlights at screen coordinates. This enhances interactive features like spellcheck, collaborative editing, and contextual menus with high performance and minimal DOM complexity.

Revolutionize Text Editing with highlightsFromPoint()

Imagine instantly detecting text highlights with precision—no extra DOM elements needed. Microsoft Edge 140 introduces the powerful CSS.highlights.highlightsFromPoint() method. This API identifies custom highlights at any screen coordinate. It’s a game-changer for dynamic web text editors. Developers can now implement spellcheck, tooltips, and contextual menus more efficiently. The API handles overlapping highlights and even works seamlessly with Shadow DOM. This eliminates complex hit-testing and boosts performance in interactive text applications.
“This makes it a lot simpler to implement features like spellcheck, collaborative editing, tooltips, contextual menus, or search,” the Microsoft Edge team explains.

Why tech pros should care about FromPoint APIs

Alongside highlightsFromPoint(), several other *FromPoint APIs exist. For example, document.elementsFromPoint() and document.caretPositionFromPoint() provide rich DOM insights based on x, y screen coordinates. These methods are invaluable when user interaction depends on location rather than predefined selectors. Beyond text editing, they enable drag-and-drop, automated testing, and context-aware browser extensions. The synergy of these APIs allows you to build smarter, more responsive web apps. Using them together can streamline complex UI behaviors without bloating the DOM.

Practical benefits for your projects

Integrating highlightsFromPoint() into your workflow enhances usability and responsiveness. Your users enjoy seamless text interaction with fewer glitches or delays. Developers save time by avoiding cumbersome DOM manipulations. Moreover, the API’s compatibility with Chromium browsers ensures broad reach. The ability to detect highlights in Shadow DOM expands possibilities for web components. Plus, the open-source demos and MDN documentation make adoption straightforward. Ultimately, this API empowers you to deliver innovative text editing features faster and more reliably.
“The *FromPoint APIs are especially useful for text editing scenarios but can also be used to implement drag and drop, simulate actions at specific coordinates, and enable tools or extensions to identify page elements,” notes the Microsoft Edge Blog.
To sum up, Microsoft Edge’s highlightsFromPoint() API ushers in a new era for web text editing. It simplifies complex UI challenges while enhancing user experience. Tech professionals should explore and leverage this tool today. Your next project could benefit greatly from these powerful, coordinate-based DOM insights. Stay ahead by embracing these cutting-edge web platform features now.

Key points from the article:

  • highlightsFromPoint() simplifies detection of overlapping text highlights in both DOM and Shadow DOM
  • Enables rich UI features such as tooltips, spellcheck, and contextual menus linked to text highlights
  • Works seamlessly with other *FromPoint APIs for advanced coordinate-based DOM interactions
  • Improves client-side text editing workflows by reducing reliance on complex hit-testing code
  • Supports innovative use cases in automated testing, drag-and-drop, and browser extensions

    • From the Windows Blog