v151 · css · pwa

OS Integration Storyboard

Visual comparison across five states: browser tab, standalone installed, Window Controls Overlay, file-handler launch, and migrating from -webkit-app-region. See exactly which CSS applies in each context and why.

window-drag: drag (moves window)

window-drag: no-drag (keeps clicks)

Standard browser chrome

Browser tab window-drag: OFF

https://myapp.example/

App content (no titlebar customisation)

The OS window chrome is fully managed by the browser. window-drag rules are parsed but have no visible effect — there is no custom titlebar surface to drag.

/* no effect in browser tab */ .titlebar { window-drag: drag; }

Standalone PWA window-drag: partial

My App

App titlebar (window-drag: drag) ⚙☰

The browser still renders its own slim titlebar (window controls). Below it, the app renders its own custom bar. window-drag: drag on the custom bar region makes it act as an additional drag handle.

/* manifest: "display": "standalone" */ .custom-bar { window-drag: drag; } .custom-bar button { window-drag: no-drag; }

Window Controls Overlay window-drag: FULL

My App

_ □ ✕

App renders here — no browser UI strip above

WCO replaces the browser's titlebar with the app's own content. The entire top strip is app-controlled. window-drag: drag on that strip moves the window natively; the OS window controls (close/minimise/maximise) remain in the overlay space.

/* manifest: "display_override": ["window-controls-overlay"] */ .titlebar { window-drag: drag; app-region: env(titlebar-area-x) env(titlebar-area-y) env(titlebar-area-width) env(titlebar-area-height); } .titlebar > button { window-drag: no-drag; }

File-handler launch window-drag: FULL

📄 report.csv — My App

File content rendered here

When launched via file handler, a new standalone window opens. The same WCO + window-drag setup applies — the titlebar can even reflect the open file name via window.setAppBadge() or document.title.

/* file_handlers in manifest trigger a new standalone window */ /* window-drag behaviour is identical to WCO case */ launchQueue.setConsumer(async (params) => { for (const handle of params.files) { /* load file */ } });

Legacy migration -webkit-app-region

My Legacy App

Legacy app — uses -webkit-app-region

Existing Electron apps and older PWAs used -webkit-app-region: drag. Chrome 151 still honours it as an alias, but the canonical property is now window-drag. Emit both during the transition period.

/* Transitional pattern — emit both */ .titlebar { -webkit-app-region: drag; /* legacy */ window-drag: drag; /* Chrome 151+ */ } .titlebar button { -webkit-app-region: no-drag; window-drag: no-drag; }

This browser, right now Detecting…

Detecting display mode…

State comparison table

State	window-drag active	Custom titlebar	WCO env()	Drag moves window
Browser tab	No	No	No	No
Standalone PWA	Yes	Yes	No	Yes
Window Controls Overlay	Yes	Yes	Yes	Yes
File-handler launch	Yes	Yes	Yes	Yes
Legacy -webkit-app-region	Alias	Yes	No	Yes (legacy)

implementation reference

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