[csswg-drafts] Proposal: Declarative Web Haptics (#13728)

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

== Proposal: Declarative Web Haptics ==
[Link to explainer](https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Haptics/explainer.md)

Every major OS supports haptics, and currently there is only `navigator.vibrate` on the web which has very limited support and requires developer to manually program haptics patterns. We're introducing a new haptics proposal that allows developers to express intent and have user agent map intent to pattern that feels native and consistent on supported platform and hardware. 

This proposal offers two complementary mechanisms:

1. **Imperative API (JS)** — `navigator.playHaptics(effect, intensity)` for interactions that require runtime logic or have no corresponding CSS state change. This isn't CSS but included in the explainer as well as here to give a full picture. 

2. **Declarative API (CSS)** — a `haptic-feedback` property that fires haptic effects when an element enters a user-interaction pseudo-class state, plus a `scroll-snap-haptic` property for scroll-snap landings. The intention of declarative CSS approach is to enable low-latency haptic feedback for common interactions without requiring JavaScript.

### CSS: `haptic-feedback`

Fires a haptic when an element enters a dynamic pseudo-class state (`:active`, `:checked`, `:focus-visible`, `:open`, etc.). Structural pseudo-classes (`:first-child`, `:nth-of-type()`) do not trigger haptics. This is an elegant approach but a novel CSS concept. We have an alternative transition-based mechanism defined in the [alternatives considered section](https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Haptics/explainer.md#alternatives-considered) that we welcome feedback on. 

```css
button:active { haptic-feedback: align; }
input:checked { haptic-feedback: tick 0.5; }
```

Syntax: `haptic-feedback: hint | edge | tick | align | none <intensity>?` — not inherited, not animatable, initial value `none`. Each effect maps to a platform-native haptic primitive (e.g. `tick` → iOS `selection`, Windows `step`). 

### CSS: `scroll-snap-haptic`

A property on scroll-snap containers that fires a haptic on each snap landing:

```css
.carousel {
  scroll-snap-type: x mandatory;
  scroll-snap-haptic: tick 0.6;
}
```

Same syntax as `haptic-feedback`. Applied to the scroll container, not snap children.

Note that if [`:snapped`](https://drafts.csswg.org/css-scroll-snap-2/#snapped) from CSS Scroll Snap 2 ships broadly, scroll-snap haptics could instead be expressed as `.slide:snapped { haptic-feedback: tick; }`, potentially making `scroll-snap-haptic` unnecessary. We'd welcome guidance on whether to include this property or defer to `:snapped`.

A lot more details - especially use cases, alternatives we have considered, extensions and open questions are in the explainer linked at the top. I would welcome any comments/suggestions/additional use cases, either in this thread or as issues in the MSEdgeExplainers repo: [New issue](https://github.com/MicrosoftEdge/MSEdgeExplainers/issues/new?assignees=liminzhu&labels=Web%20Haptics&projects=&template=web-haptics.md&title=%5BWeb+Haptics%5D+%3CTITLE+HERE%3E).

cc @neshgandhe, @kbabbitt 

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


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

Received on Wednesday, 25 March 2026 21:02:41 UTC