[csswg-drafts] Proposal for a user interaction :drag pseudo-class (#11584)

kennethzuniga has just created a new issue for https://github.com/w3c/csswg-drafts:

== Proposal for a user interaction :drag pseudo-class ==
I’d like to propose the addition of a new pseudo-class, :drag, that would enable developers to apply styles when an element is being actively dragged by the user. Currently, CSS lacks a mechanism to detect drag interactions, making it difficult to manage UI behaviors that depend on this action without relying on JavaScript.

**Problem:**
For example, when creating a horizontally scrollable menu or container, it’s common to want to display overflow content only when the user is actively dragging the element, such as to prevent unwanted overflow visibility when the user is not interacting with the container. Without a drag-based pseudo-class, this behavior must be managed entirely via JavaScript, which introduces extra complexity and reduces CSS’s potential as a powerful, declarative styling tool.

**Proposed Solution:**
A :drag pseudo-class would be triggered when an element is being dragged by the user, allowing developers to apply styles related to dragging (such as changing overflow properties) directly in CSS. This would reduce the need for JavaScript and create a more streamlined and accessible experience.

**Example**
```
.menu-bar:drag {
  overflow-x: auto; /* Enable horizontal scrolling while dragging */
}
```

**Benefits**
- Enables a declarative, CSS-only solution for managing drag-based interactions.
- Reduces reliance on JavaScript for managing overflow and other drag-dependent behaviors.
- Improves accessibility by providing a native CSS solution.


Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/11584 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Monday, 27 January 2025 17:22:50 UTC