配了X年 Electron/PWA 的拖拽区，今天发现它终于被 CSS 标准命名了——window-drag 把 app-region 那笔糊涂账彻底结了

做 Electron 或者 PWA 的自定义标题栏，你一定用过 app-region: drag 这个 CSS 属性。把它往一个 div 上一加，用户就能拖动整个窗口了。

但这个名字一直是个谜。app-region 到底是给「应用」用的，还是给「区域」用的？drag 是拖窗口还是拖元素？谁能从名字里猜到它是干这个的？

CSS Working Group 在 2026 年 1 月正式拍板了：把这个属性重命名成 window-drag，值改成 none | move，意思一目了然。

这个改动已经在 Chromium 里落地了，Chrome 152+ 可以直接用新名字，老的 app-region 和 -webkit-app-region 作为别名继续兼容，迁移成本为零。

官方讨论：为什么非改不可

W3C CSS Working Group 的会议上，Tab Atkins 解释了改名背景：开发者反馈 app-region 这个名字不够直观，改成 window-drag 一下子就能看懂。另外 drag | nodrag 的值命名模式也不太符合 CSS 一贯风格，改成 none | move 更干净。

CSSWG 1 月会议纪要里，fantasai 直接说 window-drag 比 app-region 清晰得多，一票通过。

Firefox 那边也已经表态（standards-positions 标记为 Positive），愿意跟进这个标准化方向。

怎么用

/* 标准新版 */
.titlebar {
  window-drag: move;
}
button {
  window-drag: none; /* 按钮还是要能点的 */
}

/* 兼容旧版，两个一起写没事 */
.titlebar {
  app-region: drag;
  -webkit-app-region: drag;
  window-drag: move;
}

Manifest 配置不变，还是 display: standalone 加 display_override: ["window-controls-overlay"] 那套。

为什么说这是 Electron/PWA 的事

app-region 最早是 Chromium 为 Window Controls Overlay 量身定制的，属于浏览器专属扩展，后来被 Electron 广泛采用，成了桌面应用自定义标题实施拖拽的行业标准。

现在 WCO 功能在所有 Chromium 桌面浏览器里都支持，Edge、Chrome、Arc 都可以用。但 Firefox 和 Safari 还没跟，app-region 只有 Chromium 系认。

CSSWG 这次拍板改名，也把行为正式写进了 CSS UI Level 4 规范，以后其他浏览器想实现这套逻辑就有了标准参考，而不是各玩各的。

三个值的细节

window-drag 支持三个关键字，但规范里明确写了只有 move 和 none 两个正式值：

• window-drag: move — 把这个元素变成窗口拖拽区
• window-drag: none — 取消拖拽，恢复正常交互

关于继承行为，规范也补了坑：之前 app-region 有没有继承性一直模糊，新规范明确 window-drag 是可继承的，子元素默认也有拖拽能力。这在某些场景下会更方便，但要注意：如果子元素你不希望它能拖窗口，要记得显式关掉。

迁移建议

新项目直接上 window-drag: move，老项目不用急着改，Chromium 会把 app-region 长期映射过去。但如果你的代码里有注释写着「app-region drag」，现在可以顺便改成更自解释的写法了。

window-drag 这个名字最大的价值不是功能本身，是团队新成员看到它不用再靠搜索引擎猜它是干什么的了。Chrome、Edge、Arc 用户马上就能体验到，新规范正式写进了 CSS UI Level 4。

下一步：检查你的 Electron 或 PWA 项目，把自定义标题栏区域的 app-region: drag 替换成 window-drag: move，顺手更新一下代码注释。