Key Points
- Microsoft Edge 140 now supports the highlightsFromPoint() method, a new addition to the CSS Custom Highlight API.
- The highlightsFromPoint() method allows developers to detect custom highlights at a given x, y coordinate location on the screen, enabling features like spellcheck, collaborative editing, and tooltips.
- This new method simplifies the implementation of interactive features, particularly when dealing with overlapping highlights or shadow DOMs, and can be used in conjunction with other FromPoint APIs.
Microsoft announced the availability of the highlightsFromPoint() method in Microsoft Edge 140, a useful addition to the CSS Custom Highlight API. This API allows developers to highlight arbitrary ranges of text without adding new elements to the DOM. The highlightsFromPoint() method lets developers detect custom highlights at a given x, y coordinate location on the screen, making it easier to implement features like spellcheck, collaborative editing, tooltips, and contextual menus.
The CSS Custom Highlight API works by creating Range objects in JavaScript, registering these ranges using the CSS.highlights registry, and then highlighting the ranges in CSS using the ::highlight() pseudo-element. This API is great for dynamic styling of text ranges that don’t need to, or can’t, exist in the DOM, which is often the case for client-side text editors.
The highlightsFromPoint() method can detect highlights and their corresponding text ranges in the DOM and Shadow DOM without requiring complicated hit-testing code. This makes it simpler to add interactive features with high performance, particularly when dealing with overlapping highlights or shadow DOMs. For example, developers can use this method to display a popup that lists overlapping highlights applied to a text range when a user clicks on it.
The highlightsFromPoint() method is similar to other FromPoint APIs, such as caretPositionFromPoint(), which provide DOM information based on x, y coordinates on the screen. These methods can be useful for cases where users interact with the UI by clicking or hovering, and where location-based detection is needed instead of using pre-set event listeners or explicit element references.
Developers can use the highlightsFromPoint() method in conjunction with other FromPoint APIs to implement features like drag and drop, simulate actions at specific coordinates, and enable tools or extensions to identify page elements without prior knowledge of their IDs or selectors. To learn more about the highlightsFromPoint() method, developers can check out the HighlightRegistry: highlightsFromPoint() method on MDN and see the API in action using the API demo.
Microsoft is seeking feedback from developers on the new CSS.highlights.highlightsFromPoint() API, including use cases, ideas for future improvements, and any problems they may encounter. Developers can file an issue in the CSS Working Group repository or send feedback to the Microsoft Edge team directly from the browser. The introduction of the highlightsFromPoint() method in Microsoft Edge 140 is expected to simplify the implementation of interactive features and improve the overall user experience.
Read the rest: Source Link
You might also like: Try AutoCAD 2026 for Windows, best free FTP Clients on Windows & browse the best Surface Laptops to buy.
Remember to like our facebook and our twitter @WindowsMode for a chance to win a free Surface every month.