app-region

Syntax

/* Enable dragging from an element: */
app-region: drag;

/* Exclude an element from dragging (e.g. a button inside the title bar): */
app-region: no-drag;

From the spec's defining draggable regions section: “The app-region property can be used to define with CSS which regions or elements in for example a title bar are draggable.” Setting it to drag enables dragging on the element; no-drag disables it. “The app-region property MUST only take effect when the applied display mode of the window is unframed or window-controls-overlay.”

“Some user agents use the non-standard CSS property -webkit-app-region for the same purpose” (spec note). The spec's text is prose-level — it does not yet give a formal value-definition grammar, an initial value, or inheritance rules; those are recorded as an open question in the critique rather than invented here.

Inputs

Outputs

• Elements with app-region: drag become the window's draggable surface: the app can build a custom title bar that actually moves the window — essential in unframed mode, where no system title bar exists.
• Elements with app-region: no-drag behave normally for clicks and text selection even when nested inside a draggable ancestor.
• Outside unframed and window-controls-overlay display modes the property has no effect (the spec's MUST), so the same stylesheet is safe in framed windows.

Errors

Context and exposure

• Applies to installed app windows whose applied display mode is unframed (Isolated Web Apps only) or window-controls-overlay; inert everywhere else, including normal browser tabs.
• For unframed, the surrounding prerequisites are the parent feature's: IWA package, window-management permission, desktop platform — see the overview requirements.
• The legacy -webkit-app-region spelling exists in some user agents for the same purpose (spec note); authors targeting both should be aware the standard spelling is app-region in this incubation.

Lifecycle

1. The property is evaluated with normal CSS cascade and style recalculation; it takes effect only while the window's applied display mode is unframed or window-controls-overlay.
2. Because an unframed window's display mode is fixed for its lifetime (see the overview lifecycle), the effective draggable map changes only when the app's own DOM/style changes — not on navigation.
3. Pairing with @media (display-mode: unframed) lets the app reveal its custom title bar — and its drag regions — only when the system frame is actually absent.

Examples

A custom title bar for an unframed window: the bar drags the window, its buttons remain clickable, and the whole bar only appears when the window is actually unframed:

.title-bar {
  display: none;            /* hidden while framed */
  app-region: drag;         /* the bar itself drags the window */
}
.title-bar button {
  app-region: no-drag;      /* buttons keep their clicks */
}

@media (display-mode: unframed) {
  .title-bar { display: flex; }
}

Browser compatibility

Interim table. No BCD entry exists for app-region (2026-07-28); the non-standard -webkit-app-region is a separate legacy spelling. Shipping status follows the parent feature:

Full analysis and evidence links: overview — browser compatibility.

Security and privacy

• app-region grants no new capability beyond pointer-capture semantics the app already has: it repurposes drags on designated regions into window moves. It cannot move other apps' windows or escape the app's own window.
• The relevant threat model is the parent feature's — a frameless window can spoof trusted UI; that is why the mode (and therefore an effective draggable title bar) is IWA-only and permission-gated. See the overview security section.
• A drag region reveals nothing to the app beyond the pointer events it would already receive on those elements.