[csswg-drafts] [css-selectors] Add pseudo for active/valid file drop targets (#9205)

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

== [css-selectors] Add pseudo for active/valid file drop targets ==
**Problem:**
JavaScript is required to change the style of a file input if you want to show feedback that the input is a valid drop target. Currently, authors must add multiple JS listeners to file type inputs to "do their best" to show the user the UI is expecting the file drop / is a valid drop location. Without this JS, users have to guess / assume / or notice that tiny subtle hover effect (which I never noticed until I watched the below demom video demo which is quite zoomed).

```html
<input 
    type="file" 
    ondragenter="this.classList.add('dropping')" 
    ondragleave="this.classList.remove('dropping')" 
         ondrop="this.classList.remove('dropping')"
>

<style>
input[type=file].dropping {
  /* … */
}
</style>
```

would become ✨ 

```html
<input type="file">

<style>
input[type=file]:drop-target {
  /* … */
}
</style>
```

https://github.com/w3c/csswg-drafts/assets/1134620/a5ff29fc-2aca-4555-901f-ff5a1ab7b175

[Link to Codepen](https://codepen.io/argyleink/pen/rNoNNWL)

**Proposal:** `:drop-target`
Remove the JS requirement and expose the state the browser is keeping private.

```css
input[type="file"] {
  /* … */

  &:drop-target {
    outline: 2px dashed Highlight;

    @media (prefers-reduced-motion: no-preference) {
      animation: drop-zone 1.5s ease-out infinite;
    }
  }
}
```

This selector would activate when the user's drag coordinates are intersecting with the elements bounds, and would deactivate when the user moves the file off of the element. This selector is up for discussion about whether it should work for all inputs/elements, or just the file input. 

This could also be combined with `:has()` so forms and UIs can know if there is a drag event happening on a child element, and it can compliment the state by reducing noise (for example):

```css
fieldset:has(:drop-target) :not(:drop-target) {
  opacity: .5;
}
``` 

**Resources:**
https://www.w3.org/TR/selectors-4/



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


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

Received on Thursday, 17 August 2023 16:40:31 UTC