Potentially Coming to a Browser :near() You
This title could be clearer and more informative.Try out Clickbait Shieldfor free (5 uses left this month).
A deep dive into the proposed CSS :near() pseudo-class, which would match elements when the pointer is within a specified distance. The article explores practical use cases like dimming/hiding elements until proximity, prefetching via the Speculation Rules API, and improving hover-triggered overlays with the Interest Invoker API. Since :near() isn't browser-supported yet, demos simulate the behavior using padding, content-visibility, contain-intrinsic-size, and animation tricks. Accessibility concerns around WCAG criteria for focus visibility and target size are also discussed, along with potential abuses like fingerprinting and performance issues.
Table of contents
Visual effectsDim elements until :near()Hide elements until :near()Prefetch/prerender when nearImprove interest invoker interactionsDownsides to :near():near() accessibility concernsIn conclusionSort: