CSS :near() Pseudo-Class: Enhancing User Interaction and Visual Effects

Potentially Coming to a Browser :near() You

The proposed CSS :near() pseudo-class, suggested by Thomas Walichiewicz, aims to detect when a pointer is within a specified distance of an element. This could unlock novel visual effects and improve existing interaction patterns, though browser support is currently non-existent.

Why This Matters

The technical reality of web development often involves bridging the gap between ideal user interaction models and current browser capabilities. While :hover and :focus provide established interaction states, they can be too restrictive for certain user experiences, like revealing hidden controls or providing subtle visual feedback. The :near() pseudo-class proposes a more forgiving interaction model, allowing developers to trigger styles based on proximity rather than exact contact. This could significantly enhance usability for elements that are difficult to target precisely or where early feedback is beneficial. However, the challenge lies in implementing such features without compromising accessibility or introducing new performance bottlenecks, ensuring that the ideal user experience is achievable within technical constraints.

Key Insights

• The :near(3rem) pseudo-class proposal allows styling elements when a pointer is within a specified distance, calculated using Euclidean distance.
• Visual effects like dimming or hiding elements until a pointer is near could be implemented, though accessibility concerns like color contrast must be addressed.
• Hiding non-essential elements (e.g., share buttons on images) until near can improve UX, but requires reserving space using techniques like contain-intrinsic-size and a 1ms animation to flash content visibility.
• The Speculation Rules API could potentially leverage the concept of ‘near’ for prefetching/prerendering resources.
• The Interest Invoker API could use a near-radius CSS property to prevent overlays from disappearing due to minor pointer mis-interactions, enhancing user experience.
• Potential downsides include lazy hiding of elements for visual clutter reduction instead of better UI design, and risks of heatmapping, fingerprinting, or aggressive advertising.
• Accessibility requires that :near() does not imply :hover or :focus, avoiding presumptive interactions and adhering to WCAG Success Criteria like 2.4.7 (Focus Visible).

Working Examples

Example syntax for the proposed :near() pseudo-class.

button:near(3rem) {
  /* Pointer is within 3rem of the button */
}

Demonstrates applying different styles based on proximity using :near().

div {
  /* Div is wow */
  &:near(3rem) {
    /* Div be wowzer */
  }
  &:near(1rem) {
    /* Div be woahhhh */
  }
}

Dimming an element when the pointer is not near.

button:not(:near(3rem)) {
  opacity: 70%; /* Or...something */
}

HTML structure for simulating :near() with a hidden button.

<div id="image">
  <div id="simulate-near">
    <button hidden="until-found">Share</button>
  </div>
</div>

CSS for simulating :near() by briefly showing hidden content to reserve space.

@keyframes show-content {
  from {
    content-visibility: visible;
  }
}
button {
  /* Hide it by default */
  &:not([hidden="until-found"]) {
    content-visibility: hidden;
  }
  /* But make it visible for 1ms */
  animation: 1ms show-content;
  /* Save the size while visible */
  contain-intrinsic-size: auto none;
}

HTML structure for the simulated :near() example.

<div id="image">
  <div id="simulate-near">
    <button hidden="until-found">Share</button>
  </div>
</div>

Full CSS for simulating :near() by expanding the hoverable region.

@keyframes show-content {
  from {
    content-visibility: visible;
  }
}
#simulate-near {
  /* Instead of :near(3rem) */
  padding: 3rem;
  button {
    /* Unset any styles */
    border: unset;
    background: unset;
    /* But include size-related styles */
    padding: 1rem;
    /* Hide it by default */
    &:not([hidden="until-found"]) {
      content-visibility: hidden;
    }
    /* But make it visible for 1ms */
    animation: 1ms show-content;
    /* Save the size while visible */
    contain-intrinsic-size: auto none;
  }
  &:where(:hover, :has(:focus-visible)) button {
    color: white;
    background: black;
    content-visibility: visible;
  }
}

HTML structure for the unsupported :near() example.

<div id="image">
  <button hidden="until-found">Share</button>
</div>

CSS for the unsupported :near() pseudo-class, demonstrating its intended usage.

@keyframes show-content {
  from {
    content-visibility: visible;
  }
}
button {
  /* Unset any styles */
  border: unset;
  background: unset;
  /* But include size-related styles */
  padding: 1rem;
  /* Hide it by default */
  &:not([hidden="until-found"]) {
    content-visibility: hidden;
  }
  /* But make it visible for 1ms */
  animation: 1ms show-content;
  contain-intrinsic-size: auto none;
  &:where(:near(3rem), :hover, :focus-visible) {
    color: white;
    background: black;
    content-visibility: visible;
  }
}

Practical Applications

• Pinterest: Share buttons appear on hover over an image, improving UX by hiding them initially to avoid obscuring content.
• Pitfall: Lazily hiding elements for visual clutter reduction instead of employing better UI design, potentially leading to discoverability issues.
• Interest Invoker API: Could leverage a near-radius property to prevent overlays from disappearing due to minor pointer mis-interactions, improving usability.
• Pitfall: Aggressive advertising patterns or heatmapping using pointer proximity detection, raising privacy concerns.

References:

• https://css-tricks.com/potentially-coming-to-a-browser-near-you/