写过前端的都踩过这个坑——PWA 装到桌面之后，标题栏想拖拽只能靠一个非标准的 -webkit-app-region，Firefox 不认、Safari 当它是空气。今天 Chrome 152 把这件事彻底翻了一篇

写过前端的都踩过这个坑——PWA 装到桌面之后，标题栏想拖拽只能靠一个非标准的 -webkit-app-region，Firefox 不认、Safari 当它是空气。今天 Chrome 152 把这件事彻底翻了一篇：CSSWG 正式把 app-region 改名叫 window-drag，值名也改了（drag → move，no-drag → none），还加了显式继承行为。

这个故事有意思的地方在于：app-region 是 Chrome 自己先跑出来的实验性功能，因为太好用了，CSS Working Group 决定把它标准化。换句话说，浏览器厂商自己造的功能，反过来被写进了 CSS 规范。

为什么非要用 window-drag

桌面 PWA 的标题栏定制，是 Window Controls Overlay 这套方案的一部分。流程是这样的：你在 manifest 里声明 "display_override": ["window-controls-overlay"]，浏览器就把原生标题栏藏起来，让出空间给你画 UI。这块空间的位置信息，通过 CSS 环境变量暴露出来：

.titlebar {
  position: fixed;
  top: env(titlebar-area-y, 0);
  left: env(titlebar-area-x, 0);
  width: env(titlebar-area-width, 100%);
  height: env(titlebar-area-height, 40px);
}

有了空间，下一步就是告诉浏览器：哪些区域可以拖动窗口，哪些不能。对按钮、输入框这类要响应点击的元素，就不能让它拖。

旧写法（Chrome 专有）

.drag-region {
  -webkit-app-region: drag;
}
button, input {
  -webkit-app-region: no-drag;
}

新写法（Chrome 152+ 标准）

.drag-region {
  window-drag: move;
}
button, input {
  window-drag: none;
}

两套写法 Chrome 152 都认，因为 app-region 和 -webkit-app-region 内部会映射到 window-drag，属于向后兼容的别名。对现有代码来说，这个迁移是增量的，不需要立刻改。

新加的显式继承

这次还有一个细节：window-drag 有显式继承行为。也就是说，如果你在父元素上写了 window-drag: move，子元素会继承这个拖拽属性，除非你显式覆盖为 none。旧版 app-region 的继承行为是不明确的，不同浏览器实现不一致，这次标准化把它写清楚了。

浏览器支持情况

Chrome 152 和 Edge 152 已经稳定支持。Firefox 态度积极（positive signal），Safari 还没表态。考虑到这是桌面 PWA 专属功能，移动端不受影响，所以兼容性压力不大。生产环境里，建议用 @supports 做渐进增强：

.drag-region {
  -webkit-app-region: drag;
  app-region: drag;
}

@supports (window-drag: move) {
  .drag-region {
    -webkit-app-region: none;
    app-region: none;
    window-drag: move;
  }
  button, input {
    window-drag: none;
  }
}

下一步怎么走

如果你现在就在用 -webkit-app-region，Chrome 152 开始可以逐步切换到 window-drag，先在新功能分支里验证，再合入主分支。app-region 的别名映射不会去掉，不用担心线上出事。如果还没接触桌面 PWA，这波 Window Controls Overlay 的核心 API 其实是一整套东西：manifest 配置、env() 环境变量、windowControlsOverlay JS API，加上 window-drag CSS 属性——四个东西拼在一起，才能做出一个真正像本地 App 的 PWA 标题栏。

总结一句话

app-region 从 Chrome 实验变成 CSS 标准，不只是改个名字，是浏览器专有功能进入 Web 平台的标志——下一步就是 Firefox 和 Safari 跟进，真正的跨浏览器桌面 PWA 拖拽体验快要来了。