突破矩形边界

CSS是关于样式化盒子的。实际上，整个网络都是由盒子组成的，从浏览器视口到页面上的元素都是如此。但偶尔会有新功能出现，让我们重新思考设计方法。

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

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

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

关于标题栏和窗口控件

让我们从解释标题栏和窗口控件是什么开始。

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

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

使用窗口控件叠加

对于本文的其余部分，我们将在一个演示应用上工作，以了解更多关于使用该功能的信息。

演示应用名为1DIV。这是一个简单的CSS游乐场，用户可以使用CSS和单个HTML元素创建设计。

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

1
2
3
4
5


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

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

使用CSS避开窗口控件

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

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

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

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);
}

改变窗口控件背景色使其融合

我们可以通过改变应用的主题色来修复这个问题。有几种定义方式：

PWA可以在网络应用清单文件中使用theme_color清单成员定义主题色
网站也可以使用theme-color元标签

在我们的案例中，我们可以将清单theme_color设置为白色，为我们的应用提供正确的默认颜色。操作系统将在应用安装时读取此颜色值，并使用它使窗口控件背景色变为白色。

theme-color元标签可以在运行时使用JavaScript更改。因此，我们可以在打开演示时用正确的演示背景色覆盖白色。

以下是我们将使用的函数：

1
2
3


function themeWindow(bgColor) {
  document.querySelector("meta[name=theme-color]").setAttribute('content', bgColor);
}

拖动窗口

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

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

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

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

1

-webkit-app-region: drag;

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

1

-webkit-app-region: no-drag;

适应窗口调整大小

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

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

该API提供了三个有趣的东西：

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

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

使用窗口控件叠加功能，我们能够将简单的演示应用转变为在桌面设备上感觉更加集成的东西。某种突破常规窗口约束并为用户提供自定义体验的东西。

实际上，这个功能只给了我们大约30像素的额外空间，并带来了如何处理窗口控件的挑战。然而，这个额外的空间和这些挑战可以转化为激动人心的设计机会。

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