突破方框限制

CSS本质上是关于盒子样式的。事实上，整个Web都是由盒子组成的，从浏览器视口到页面上的元素。但偶尔会有新功能出现，促使我们重新思考设计方法。

例如，圆形显示屏让圆形裁剪区域的玩法变得有趣；移动设备屏幕的刘海和虚拟键盘对内容布局提出了挑战；双屏或折叠设备则让我们重新思考如何在不同设备形态下最有效地利用空间。

这些Web平台的最新发展使得产品设计既更具挑战性又更加有趣。它们是我们突破矩形框限制的绝佳机会。

窗口控件覆盖功能

我想讨论一个与上述类似的新功能：渐进式Web应用(PWA)的窗口控件覆盖(Window Controls Overlay)。

渐进式Web应用模糊了应用和网站之间的界限。它们结合了两者的优点：像网站一样稳定、可链接、可搜索且响应迅速；同时又像原生应用一样提供额外强大功能、支持离线和文件读取。

作为设计界面，PWA非常有趣，因为它们挑战我们思考如何混合Web和设备原生用户界面。特别是在桌面设备上，我们有超过40年的历史告诉我们应用程序应该是什么样子，要打破这种思维模式可能很困难。

但归根结底，桌面上的PWA被限制在它们出现的窗口中：一个顶部带有标题栏的矩形。

窗口控件覆盖功能移除了标题栏和窗口控件区域的物理限制。它释放了应用窗口的完整高度，使标题栏和窗口控制按钮能够叠加在应用程序的Web内容之上。

实现窗口控件覆盖

要使用这个功能，我们需要在Web应用的manifest文件中添加以下display_override成员：

1
2
3


{
  "display_override": ["window-controls-overlay"]
}

这个manifest变更会让标题栏消失，并将窗口控件变成覆盖层。但为了在所有设备和浏览器上提供良好体验，我们还需要一些CSS和JavaScript代码。

新的CSS环境变量让我们可以避开窗口控件：

titlebar-area-x
titlebar-area-y
titlebar-area-width
titlebar-area-height

使用这些变量定位内容，确保不会与窗口控件重叠：

1
2
3
4
5
6


header {
  position: absolute;
  left: env(titlebar-area-x, 0);
  width: env(titlebar-area-width, 100%);
  height: var(--toolbar-height);
}

窗口拖动与调整大小

移除标题栏会影响窗口的可拖动性。我们可以通过CSS的app-region属性解决这个问题：

1
2
3
4
5
6


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

窗口控件覆盖API(navigator.windowControlsOverlay)让我们可以检测覆盖层是否可见及其尺寸变化：

1
2
3
4
5
6


if (navigator.windowControlsOverlay) {
  navigator.windowControlsOverlay.addEventListener('geometrychange', () => {
    const { width } = navigator.windowControlsOverlay.getBoundingClientRect();
    document.body.classList.toggle('narrow', width < 250);
  });
}

结语

窗口控件覆盖功能虽然只提供了约30像素的额外空间，却开启了令人兴奋的设计可能性。随着各种形态设备的出现，Web平台不断演进让我们能够越来越深入地与这些设备集成。从手表、折叠设备到桌面电脑，我们需要发展我们的Web设计方法。构建Web应用现在让我们能够突破矩形框的思维限制。