突破矩形边界

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

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

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

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

关于标题栏和窗口控件

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

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

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

使用窗口控件叠加

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


{
  "name": "1DIV",
  "description": "1DIV is a mini CSS playground",
  "lang": "en-US",
  "start_url": "/",
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display_override": [
    "window-controls-overlay"
  ],
  "icons": [...]
}

使用 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 可以在 Web 应用清单文件中使用 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 像素的额外空间，并带来了如何处理窗口控件的挑战。然而，这个额外的空间和这些挑战可以转化为激动人心的设计机会。

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