v151 · CSS · PWA

Multi-Zone Inspector

Click any region of this mock PWA to toggle it between window-drag: drag and window-drag: no-drag. The generated CSS updates live. Real-world apps need both — a sidebar header to drag, buttons that must stay clickable.

window-drag only has a visual effect inside an installed PWA with Window Controls Overlay enabled. This demo simulates the layout and shows the CSS you'd apply — run it as a real PWA to feel the difference.

interactive layout

Click any zone to toggle drag ↔ no-drag. Blue = draggable, red = interactive.

drag (moves window)
no-drag (interactive)
☰
My App
🔍
🔔
⊟ ⊞ ⊠
Contacts
Alice
Bob
Carol
Dave
Eve
← Select a contact

Main content area
(not configurable)
Online · 3 unread
⚙

generated CSS

code

/* window-drag only applies inside installed PWAs with WCO.
   The property is inherited, so set no-drag on interactive children. */

.titlebar {
  /* app-drag: the whole header is draggable by default */
  window-drag: drag;
  -webkit-app-region: drag; /* legacy alias */
}

.titlebar .btn,
.titlebar input,
.titlebar a {
  /* no-drag: interactive children must opt out explicitly */
  window-drag: no-drag;
  -webkit-app-region: no-drag;
}

/* WCO area — browser draws native buttons here */
.wco-zone {
  app-region: no-drag; /* WCO controls are non-draggable by definition */
  window-drag: no-drag;
}

/* Sidebar header — an extra drag affordance in the app body */
.sidebar-header {
  window-drag: drag;
  -webkit-app-region: drag;
}

/* Sidebar items — must override back to no-drag */
.sidebar-item {
  window-drag: no-drag;
  -webkit-app-region: no-drag;
}

see also

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗