突破矩形边界：探索PWA窗口控件叠加技术

突破矩形边界

CSS的核心是样式化矩形框。实际上，整个网络都是由矩形框构成的，从浏览器视口到页面上的元素皆如此。但偶尔会出现的新功能总会让我们重新思考设计方法。

例如，圆形显示屏让圆形裁剪区域的玩法变得有趣；移动屏幕的凹口和虚拟键盘对如何最佳组织避开它们的内容提出了挑战；而双屏或可折叠设备则让我们重新思考如何在不同设备形态中最佳利用可用空间。

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

我想讨论一个与上述类似的新功能：渐进式Web应用（PWA）的窗口控件叠加（Window Controls Overlay）。

关于标题栏和窗口控件

让我们先解释一下标题栏和窗口控件是什么。

标题栏是显示在应用窗口顶部的区域，通常包含应用的名称。窗口控件是使最小化、最大化或关闭应用窗口成为可能的操作元素（或按钮），也显示在顶部。

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

使用窗口控件叠加

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

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

表面上，该功能使用起来非常简单。这个清单更改是我们让标题栏消失并将窗口控件变为叠加层所需的唯一操作。

然而，为了为所有用户提供良好的体验，无论他们使用什么设备或浏览器，并在我们的设计中充分利用标题栏区域，我们需要一些CSS和JavaScript代码。

使用CSS避开窗口控件

随着该功能的推出，新的CSS环境变量也被引入：

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

您可以将这些变量与CSS env()函数一起使用，将内容定位在标题栏原本会出现的位置，同时确保它不会与窗口控件重叠。

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

拖动窗口

完全移除标题栏有一个重要的可访问性后果：移动应用程序窗口变得更加困难。

标题栏为用户提供了相当大的可点击和拖动区域，但通过使用窗口控件叠加功能，该区域变得仅限于控制按钮所在的位置，用户必须非常精确地在这些按钮之间瞄准才能移动窗口。

幸运的是，这可以使用CSS的app-region属性来修复。目前，该属性仅在基于Chromium的浏览器中受支持，并且需要-webkit-供应商前缀。

要使应用的任何元素成为窗口的拖动目标，我们可以使用：

-webkit-app-region: drag;

也可以显式地使元素不可拖动：

-webkit-app-region: no-drag;

适应窗口调整大小

对于应用来说，了解窗口控件叠加是否可见以及其大小何时发生变化可能很有用。在我们的案例中，如果用户使窗口非常窄，搜索字段、徽标和按钮将没有足够的空间容纳，因此我们希望将它们向下推一点。

窗口控件叠加功能带有一个JavaScript API，我们可以使用它来执行此操作：navigator.windowControlsOverlay。

该API提供了三个有趣的功能：

• navigator.windowControlsOverlay.visible 让我们知道叠加层是否可见
• navigator.windowControlsOverlay.getBoundingClientRect() 让我们知道标题栏区域的位置和大小
• navigator.windowControlsOverlay.ongeometrychange 让我们知道大小或可见性何时发生变化

三十像素的激动人心的设计机会

使用窗口控件叠加功能，我们能够将简单的演示应用程序转变为在桌面设备上感觉更加集成的东西。它突破了通常的窗口限制，为用户提供了自定义体验。

实际上，此功能仅为我们提供了大约30像素的额外空间，并带来了如何处理窗口控件的挑战。然而，这种额外的空间和这些挑战可以转化为令人兴奋的设计机会。

各种形状和形式的设备不断被发明出来，网络也在不断进化以适应它们。Web平台添加了新功能，使我们Web作者能够与这些设备进行更深入的集成。从手表或可折叠设备到台式计算机，我们需要发展我们的Web设计方法。现在为Web构建让我们可以跳出矩形框思考。

所以让我们拥抱这一点。让我们使用我们已经掌握的标准技术，并尝试新的想法，为所有设备提供量身定制的体验，所有这些都来自单一的代码库！
更多精彩内容 请关注我的个人公众号 公众号（办公AI智能小助手）
公众号二维码