"By how much? Well, that would depend on the value of the <length> argument provided. Thomas Walichiewicz, who proposed :near(), suggests that it works like this: button:near(3rem) { /* Pointer is within 3rem of the button */ } For those wondering, yes, we can use the Pythagorean theorem to measure the straight-line distance between two elements using JavaScript ("Euclidean distance" is the mathematical term), so I imagine that's what would be used behind the scenes here."
"To reduce visual clutter, you might want to dim certain components until users are near them. :near() could be more effective than :hover in this scenario because users could have trouble interacting with the components if they have limited visibility, and so being able to trigger them "earlier" could compensate for that to some degree. However, we have to ensure accessible color contrast."
:near() is a proposed CSS pseudo-class that matches when the pointer lies within a specified <length> distance of an element. The <length> argument defines a radius such as 3rem, allowing proximity-sensitive styling like button:near(3rem). Euclidean distance (straight-line) would be used to measure proximity, typically computed with the Pythagorean theorem via JavaScript in simulations. Typical use cases include dimming or hiding elements until the pointer approaches, revealing controls earlier than :hover, and creating proximity-based visual effects. Accessibility considerations include maintaining sufficient color contrast and ensuring hidden or dimmed content remains discoverable and operable.
Read at CSS-Tricks
Unable to calculate read time
Collection
[
|
...
]