Potentially Coming to a Browser :near() You

This article explores the proposed CSS :near() pseudo-class, which would trigger styles when a pointer comes within a specified distance of an element.

• •:near(3rem) would match when the pointer is within 3rem of the element, using Euclidean distance calculation
• •Visual effects use case: applying progressive style changes as the pointer approaches an element
• •Accessibility-safe element hiding: using content-visibility: hidden with contain-intrinsic-size: auto and a 1ms animation trick to reserve space while keeping elements hoverable and focusable
• •The Speculation Rules API could leverage :near() underlying logic to prefetch/prerender linked resources when a pointer nears a link
• •The Interest Invoker API could use a near-radius concept to prevent accidental overlay dismissal when hovering near trigger elements