What's new in web UI

• 欢迎来到Web UI新功能演讲，介绍Web平台所有与视觉相关的功能。
• 我们在过去五年里取得了长足的进步，跨浏览器兼容性大幅增强。
• 我们的目标是提升性能和可访问性，让复杂的UI模式实现变得简单。
• 介绍新功能，如下拉选择框、弹出框、hover card等。
• 通过声明式CSS和HTML，我们能够构建更高效、更可访问的复杂UI。

欢迎来到Web UI新功能演讲，
专注于Web平台所有与视觉相关的事物。
引人入胜的Web界面在过去五年来取得了长足的进步。
现在它们不仅已经落地，
而且跨浏览器兼容性的推进速度也比以往任何时候都快。

颜色函数、视图转换、嵌套三角函数和滚动驱动动画仍然非常非常困难，
来创建这些本应简单得多的UI模式以及交互式hover card（悬浮卡片）。
Web社区以及CSS工作组等标准机构合作，
所以这方面有好消息：性能更好、可访问性更强，这些功能正在落地。

但那些已经在Chrome中发布的功能，
也是一个名为“标准”过程的一部分以及已发布的功能。
首先，让我们从下拉选择框元素开始，
历来被浏览器模糊处理。
这些功能不仅是它们能做到的事情比想象中的多。

首先来谈谈下拉列表本身，那个浮动的选项框，
并在打开时管理焦点。
我去年在这个讲台上谈到了弹出框。
我很高兴地宣布，弹出框今年已经达到了Baseline新可用状态，
所以它在所有浏览器中都可用了。

举个例子，这里是YouTube的通知弹出框供视觉参考。
创建弹出框的方法相当简单，你只需要两个部分：
第二个是实际的弹出窗口本身。
你只需要给popover一个ID，并在popover上设置popover属性。

在幕后，popover API不仅仅是显示一个元素，它还在管理其整个生命周期。
弹出框自动支持顶层渲染，
它为自动弹出框提供了弹出框区域外部时就会关闭。
虽然你仍然需要选择正确的元素，但底层的交互模型是原生处理的。
这种混乱到此为止了，直接在模态对话框上启用轻量关闭，有了closedby="any"。
这种看似微小的交互对于连接到打开对话框这一动作的处理非常有用。

这里有一个按钮调用一个命令对话框，这可以在任何元素对话框等中使用。
浏览器会自动为你管理ARIA细节，无需额外的JavaScript。
对于不支持的浏览器，也有一个polyfill。
当你点击外面时，它不起作用，必须添加closedby="any"和command用于链接到对话框的ID。

而这里的command显示模态框，我可以对关闭按钮做同样的事情。
什么都没有发生，因为脚本已经删除了，它就链接在那里，这很酷。
有了命令调用器和closedby="any"将继续致力于发布语义UI组件。

稍微跑题了，但这些都是好东西。
Popover作为选项列表框，并自动处理边缘碰撞。
事实上，锚点定位功能是旨在尽快修复bug并落地急需的开发者功能，祝我们好运。

以及书写模式等等CSS锚点定位有很多很酷的功能，想不到吧？
你可能在之前的演示中注意到，浏览器会创建一个隐式锚点关系，这使得构建锚定弹出框的代码更加简洁。
所以我很高兴看到这个改变在规范中落地，并随着该功能的发布在各浏览器中推广。

就像你在这里看到的chrome.dev/anchor-tool，
这是锚点定位的一个有趣的关键细节，它有这个内联修改的包含块，这可以帮助你直观地了解它的位置。
但如果用户调整屏幕大小，例如，我们可以在操作栏中重新定位它。
我以前被迫实现过这样的逻辑，这并不好玩，花了几天时间。
而不是从右到左，当无法以最初的右到左位置定位时，你可以将其作为回退调用。

现在你可以确信，无论这个通知触发铃铛在你的UI中位于何处，这对于大量使用分层UI的布局尤其重要。
而你现在根本不必担心这些，你可以让浏览器为你处理，所以我认为这是一个很棒的功能。

回到我们可定制的下拉选择菜单，像这样的东西本应很容易构建。
然后你需要大量的JavaScript来处理点击、键盘导航、同步值，并手动添加必要的ARIA属性以实现可访问性。
它很脆弱，要正确实现需要大量的工作，但下拉选择框元素的原生样式终于来了，例如新的appearance属性。

首先，进入可定制下拉选择框模式的方式是::picker是一个功能性伪元素。
最终将接受其他选择器类型，包括公开下拉选择框新的内部部件和状态。
在顶层以弹出框的形式显示选项，并使用锚点定位来定位它们，这样你就可以使用自己的样式。
我隐藏了该选项中其余的内容，例如副标题和图标，用于该复选标记以指示选中项。
你可以在左侧看到它的样子，这很酷。

最重要的好处是，以及表单集成，开发者工具中将会有警告。
因此，我们希望确保你正确使用它。例如这种类型过滤功能，比如产品展示、图片库一点也不容易。

我们纠结于状态管理、滚动卡顿、交互性，但实际上，你仔细想想，我们来做一个轮播图。
第一步是创建一些会流出屏幕外的内容，但现在我们有了这个可怕的水平滚动条。
房间里很多人举手了，我很高兴这个功能落地了，为了让UI保持水平滚动能力。
一些与负边距有关的复杂技巧，这只是那些事半功倍的功能之一，因为这很快就会派上用场。

两者都已于2020年1月广泛可用，我实现了逐项吸附到轮播图中心的功能，那就是“上一页”和“下一页”按钮。
但它不仅仅提供了一个样式按钮的入口，用于表明无法在给定方向上继续滚动。
如你在此处开始时所见，这就是CSS滚动按钮真正的魔力所在。
将它们放入Tab顺序中，你还可以使用top、bottom和逻辑属性，同时对两者进行样式设置。
可访问的标签，这可以使用斜杠语法完成。

现在你可以随意布局这些按钮，包括放在父网格中或使用CSS锚点定位。
这就是它派上用场的地方，就像键盘上的向下翻页按钮一样。
想想那些点指示器或缩略图，这就是scroll-marker的作用。
Scroll-marker允许你将导航标记直接与滚动容器内的项目关联起来。
我更喜欢使用数据属性，就像这样，并将该标签赋给所有这些导航点。
这是一个很棒的功能，这是一个很好的用例，所以它现在更加强大了。这真是个很酷的功能。

以这个评分UI为例，直接将评分设置为这个div中的数据属性。如果你正在使用框架（我猜是的），这很可能是你通过提示进行操作的方式。
你正在设置data-rating，我们已经有了这些信息，并在你的样式中使用它，并且做一些计算来创建填充百分比。
它填充一个蒙版，这些星星都是蒙版。现在用rating的数字来创建想要填充蒙版的百分比。

现在可以在渐变内部使用该值，它超级有用。
我认为attr()函数扩展的强大类型功能非常棒。
它们会创建在这些元素中，这是一种浏览器魔法，这有点奇怪。
如果你开始用这些来构建应用，并将它连接到你的所有项目，并将标记视为链接，就像一个焦点组。

最后，有一个新的伪类原语，在本例中，我们给它这个蓝色背景，连接了它的所有内容，提供即将使用的项目的预览。
这是一个非常巧妙的功能，而且，它只是一个可滚动项目列表。
我们正在使用这些轮播图原语来创建它，从滚动状态查询到滚动驱动的动画。

这让我想到了一种新型媒体查询，即scroll state（滚动状态）查询。
我非常高兴看到这项功能落地，因为它解决了许多以前的滚动状态查询有3种类型：
它们是stuck（用于粘性元素）、snapped（用于吸附的滚动器中的元素）和scrollable（告诉你是否有溢出）。
第一个是用于粘性定位元素的stuck状态。
在本例中，这为用户提供了一个非常好的UI提示，并通过容器查询@container。

接下来，我们有scrollable状态查询，这对于可滚动体验的视觉指示器非常有用。
这里查询底部边缘的可滚动性，并对一个::after伪元素应用线性渐变，
在顶部还要重复这个操作，这不过是一个经典的滚动指示器罢了。
然后在这里将其从底部向上平移，这也会是一个锚点链接，我喜欢这个。
我认为这是一个巧妙的功能，超级有用。

最后，还有一个新的snapped状态查询。
在轮播图中，可以为吸附的元素添加样式，使其更受关注。
在这里，让它比同级项目更大。
我觉得这个效果在屏幕上展示起来有点模糊，但有一个浅蓝色背景，数字4正在扩大，它从0.8放大到1，以便你能更清晰地看到。我认为这样的滚动状态查询非常有用，确实是的。

第二个可以用来为轮播图和其他基于滚动的体验增添奇妙效果和动态风采的新功能是滚动驱动动画。
这是来自Web Studio的朋友们的滚动驱动动画的一些示例。
谁需要在网站上用到它们？设备可能很忙，但这一切都不能打断动画。
这些是丝滑流畅的浏览器原生动画，由Scroll Timeline API实现。
你可以对任何样式进行动画处理，例如旋转和颜色，以及你可能不习惯看到的东西，例如在视口中移动的阴影或滤镜。
依赖于尖端的浏览器技术，入门很简单，一切都性能完美，面向未来。

与所有现代浏览器兼容，并且现在就可以使用，
作为其商业模式的核心，在这个轮播图中，大部分工作都是通过滚动驱动动画完成的。
你可以发现它是滚动驱动动画，这是因为它不仅是吸附项目的独特状态。
在幕后，动画平移和缩放每个项目，CQI是一个容器查询行内单位，这个演示也使用了容器查询。
最重要的是，新的滚动按钮提供了很好的Web风格，增强了用户体验。

这次是在一个轮播滚动器中，可以看到在这里使用滚动驱动动画和轮播图原语所创造的体验的广度。
要了解更多关于滚动驱动动画的信息，它会引导你了解这个API中包含的所有功能。
如果想深入挖掘，请务必查看此链接。

轮播图的一个关键可访问性问题是能够将用户的注意力集中在活动内容上，
并轻松访问导航affordance，如按钮和标记，也就是模糊屏幕上某个时刻未聚焦的内容。
为了解决这个问题，Chrome团队正在与可访问性社区合作和焦点管理，
应用惰性HTML中已存在的inert属性。
要查看更多轮播图演示，请访问chrome.dev/carousel，
也请查看轮播图配置器工具，这样就可以更深入地了解如何使用这些API。

Google搜索已经在探索使用CSS轮播图，以便在保持现有UI的同时提高底层性能。
他们估计有可能节省60%到75%的轮播图脚本。
使用这些浏览器原生功能确实有性能优势，为Web上超过12%的网站提供支持。
事实上，Elementor已经决定将其整个Web开发方法转向CSS优先。
我们的立场也是支持CSS，通过纯CSS的轮播图，并大幅减小其页面大小，从而实现快速、即时的页面加载体验，为所有用户提供更好的体验。

CSS工作组也已经在展望未来，现在让我们转向最后一个UI模式hover card（悬浮卡片）。
你可能在社交媒体平台和Gmail中，通常会触发API显示个人资料信息、快速链接、额外的交互式内容，
或者即将点击进入的内容的预览。构建这个东西，嗯，真的很难。

它涉及管理多个基于兴趣的事件和状态，并添加基于兴趣的事件延迟，显示和关闭弹出框的打开和关闭状态，
触摸屏交互，并正确地接入可访问性，还包括Tab管理和内容模糊。
不久前，我曾与另一家大型科技公司的员工讨论他们构建分层UI功能时面临的挑战。
到最后，他们也不知道做没做对，
而且他们也没办法让它支持触摸设备。

彻底解决这个问题的原因，但你仍然需要一些额外的东西，这就引出了interest target的魔力。
这是一个早期的源试用功能，但它不再依赖点击来打开按钮。
键盘的Tab导航或触摸屏上的长按，这也意味着你现在可以将工具提示，
你只需将popovertarget更改为interest target即可，其他一切保持不变。

包括为通过兴趣打开的弹出框设置ID和popover属性，这意味着许多优点是相同的，
而改变的地方在于进入和退出效果，无论是悬停、Tab导航还是长按。
通过兴趣调用器，你现在还可以用一行CSS设置事件延迟，给用户更多时间进行交互，
或者在打开前等待更长时间的兴趣暂留期。

来看一个例子，在这个演示中，而无需离开页面中断你的流程，让交互在点击时兼顾多重任务。
文档结构使用简单的HTML，正如我刚才提到的，
你对这个弹出框有完全的样式控制，你甚至可以调整这些进入和退出延迟。
但如果你想让它以更大的延迟出现，你可以将时间增加到1秒，所以我这里显示的是1秒。

当他们失去兴趣时，延迟其模糊状态。如果你想要0秒的进入延迟和1秒的退出延迟，你也可以实现这一点。
你对这些进入和退出延迟有完全控制。最后，我想强调一下为元素设置样式，但其消失速度与黄色背景不同。
即与这个has-interest伪类的区别，hover和focus会立即发生。

但这里我们在兴趣调用器上设置了1秒的退出延迟，所以你可以看到它们以不同的速度发生。
来看看另一个例子，还记得这个演讲开始时的那个弹出框吗？
现在可以为其添加兴趣触发的工具提示，并保留通知弹出框的点击功能。

通知铃铛仍然会触发这个包含通知的自动弹出框，并通过点击、空格键或触摸打开。
但现在我们有一个兴趣触发的工具提示，它也会为你提供铃铛图标含义的预览描述。
为防止你没注意到，它实现了弹出框类型的三合一，向团队致敬。

你可能会好奇它们之间有什么区别，主要区别在于其行为。
关闭其他弹出框，并且不支持轻量关闭。
而popover=hint是唯一一种在打开时不会关闭其他弹出框的类型，
使用提示弹出框的方式和其他弹出框一样，只需给它一个hint的值。

提示弹出框与兴趣目标结合使用时最有用，因为如果点击UI中的其他任何地方，
自动或手动弹出框反正都会关闭。因此，为了保持它们打开。
这就是为什么兴趣调用器和提示弹出框就像花生酱和果冻一样互相适配。
提示弹出框适用于各种分层用户界面，如菜单、聊天窗口等。

CBS新闻使用兴趣调用器API构建了这些作者简介卡片。
使用原生浏览器功能意味着更少的开销，更平滑的整体实现。
如果你在现场，请来我们的演示展位或问答台与我们交流，
此功能的形态正在积极讨论中，你现在就可以加入对话，发表你的看法。

我们刚刚解决了三个出了名地难以实现的UI模式：popover API和锚点定位得以实现，
交互性和滚动状态查询，悬浮卡片即将成为声明式的。这些功能，
是的，这些功能绝大部分现在已在Chrome稳定版中可用。

这代表着一个根本性的转变，它们使我们能够以更可访问、性能更好、效率更高的方式构建复杂的UI模式，
所借助的是声明式CSS和HTML的强大功能。这意味着更少的代码工作、更好的性能、内置的可访问性。
这就是我们想做的事情，尝试重构你现有的某一UI组件，看看到底你能去除多少JavaScript代码。

我保证这会非常有趣，这样做会非常有趣。
今天这里提到的功能只是冰山一角，我们还有许多其他很棒的功能，
已经或即将在Web平台落地，这以前是不可能实现的。
还有非常酷的新text-box-trim属性，新响应式形状函数（如果你还没见过它，真的很棒），
CSS逻辑if和CSS函数，视图转换和导航方面也有进展，还有更多即将推出，以及CSS mixin（混合）。
要了解更多信息和上面所说的一样，可以加入我们的问答环节和演示展位，
关注Chromium开发者频道，查看我们为你提供的所有资源内容很多。
让我们为他们鼓掌，是他们为我们所有人构建了Web，也感谢你们一直以来的关注。
使用这些功能，向我们提供反馈，让Web变得如此棒。
不要害怕给我们反馈，你的观点，
再次感谢大家，谢谢！