我花了最近两天时间参加了 Chrome Dev Summit（感谢 Paul Kinlan 邀请我！）我记下了一些引起我注意的事情。
简要提到了 manifest.json 文件，我以前从未听说过。显然，这是 Chrome 的一项功能，对于扩展等非常重要，但（是？可能是？）被带到了 Web 上。
其想法是，您可以将很多放入 <head> 中的内容放在那里。诸如标题、元标记等非关键内容。我想它稍微清理了文档（以请求为代价），但最重要的是，这意味着您可以将更多内容放入“前 14K”中——这对 关键路径 加载来说非常重要。
说到元标记，这里有一个 新的
<meta name="theme-color" content="#db5945">这只是一个简单的方法，可以让您网站的外观融入浏览器 UI（Chrome for Android，无论如何）。这与当前的设计趋势一致（例如，Yosemite 中所有透明度/颜色渗透效果）。
可能对我来说最令人兴奋的事情是关于 跨页面加载过渡元素 的讨论。
1. 告诉当前页面您打算过渡的内容
<meta name="transition-elements" content="#move-me, .move-all-these">2. 链接一个专门用于这些过渡的 CSS 文件
在退出发生之前进行过渡
<!-- I imagine you'd defer loading of this one -->
<link rel="transition-exiting-stylesheet" href="page-transitions.css">或将元素过渡到进入页面上的新位置
<!-- But this one you'd want to link up right at the top -->
<link rel="transition-entering-stylesheet" href="page-transitions.css">3. 使用 @keyframes 移动元素
@keyframes moveToNewPosition {
from { /* where ever it was before */ }
to { top: 0; }
}
#move-me {
animation: moveToNewPosition 0.5s;
}当然，还有更大、更重要的事情正在讨论，这些事情会影响 Web 的未来。但嘿，我喜欢技巧。显然，此功能已在 Chrome 38 中发布，但隐藏在标志后面，我还没有时间尝试使其工作。
一个普遍的主题，如今在整个行业中都很常见，那就是如果我们希望 Web “获胜”（我们希望如此，这对世界有益），我们需要确保它能够与原生应用竞争。这意味着诸如“可安装”网站（出现在主屏幕上）、脱机功能和真正的（推送）通知等功能。
在后两者中，Service Workers 是关键。这主要超出了我的理解范围，但据我了解，它是对我们以前从未有过的某些更低级别 Web 内容的访问。例如，比我们以前更好的脱机/缓存控制（它不仅仅是“要存储在本地的一系列文件”，就像以前的尝试那样）。
Service Workers 将是您注册通知（即 navigator.push.register()）的地方。因此，即使网站已关闭，您仍然可以收到通知（以某种方式）。桌面 Safari 拥有它们，但我认为它是一个专有的东西。因为会有多种方法，所以我确信像 Roost 这样的中间商将成为以更低复杂度利用它们的一种方式。
其想法是更好地模糊原生应用和网站之间的界限，然后 Web 的所有其他优点（跨平台性、URL、普遍性……）将使其走向胜利。
听到 Paul Lewis 谈论设计一个真实的网站（Chrome Dev Summit 网站 本身）很酷。我想我们现在都看到了一些“材料设计”内容，比如扩展区域。但它主要用于移动应用。在这里看到它在响应式设计中工作很不错。
在任何地方，为了获得非卡顿的体验，目标都是“60fps”。每秒 60 帧。Paul 谈了很多关于在这个网站上实现这一点的内容，包括一些有趣的小细节，比如您并不总是需要 60fps，而只是在事物移动时需要，因此，如果您能重新安排昂贵的操作，则在没有任何东西移动时执行它们。
Paul 使用 CSS 中（已弃用）的 clip 属性来完成很多此类操作。我与他讨论过此事，他说他从中获得的性能比更新的 clip-path 更好。
但这并非纯粹的 CSS 尝试。每个动画基本上都像这样处理
- 通过
getBoundingClientRect();收集有关当前元素的大量信息 - 将这些位置动画化为新位置
很聪明，因为您不必在 CSS 中硬编码任何内容（或预先知道任何内容）来执行这些动画。页面流可以保持完全正常。我怀疑将来我们会看到很多这样的事情。在 JS 中找出发生了什么，然后使用 CSS 进行动画处理。
这是他的演讲（您可以从那里访问所有其他演讲）
不要错过使用 DevTools 检查和控制动画的部分。例如，减慢它们的速度，查看哪些元素受到影响，以及使用范围滑块浏览整个动画。
我可能对动画主要保留在 CSS 中的看法是错误的，因为 Web Animations API 即将到来。
它面向作者的一个功能是 .animate()——它与 jQuery（或 Velocity）的 .animate() 非常相似，因为它会将一些 CSS 属性和值传递给它，然后将其动画化到这些属性和值。它现在是原生的，而不是需要库。我想像 GSAP 之类的东西将开始检测原生支持并使用它或回退到 rAF 或更进一步。
我与 Alex Danilo 讨论了此事，并获得了更深入的理解。我想重要的是，这不仅仅是我们作者可以使用的新 API，它还是引擎盖下的整个动画引擎。因此，与其使用三个不同的动画引擎（CSS 过渡，它与 CSS 动画不同，它与 SMIL 不同），不如说只有一个所有内容都使用的引擎。
我一直在听到关于从 Blink 的 SVG 支持中删除 SMIL 支持的传闻，并且有点想听听关于此事的内容。显然，其根源在于，它本身就是一个完整的动画引擎，并且是相当多安全问题的根源。因此，现在显然有一位被聘用的员工正在尝试查看他是否可以使 SMIL 在引擎盖下使用 Web Animations API。如果可以，那就太好了，如果不行，SMIL 的使用频率非常低（并且用于一些不重要的事情，例如微调器），因此它可能会被删除。
我担心 SMIL 可以做一些我并不完全确定 Web Animations API 是否可以做到的非常酷的事情，例如 形状变形 以及让事件（或其他动画）触发动画。
有很多关于 Polymer 的讨论。就开发者理解而言，它们在 Polymer 中处于一个有趣的位置。我认为很多人将其视为“Web Components 的 polyfill”，但
- Web Components 实际上只是一个包含四种不同技术的总称：模板、自定义元素、Shadow DOM 和 HTML 导入。（Google 的 Rob Dodson 提供的优秀教程）。
- 每种技术都有不同的 polyfill
- 这些 polyfill 中没有一个是 Polymer
Polymer 是
- 一个使 Web Components 内容更容易和更强大的库
- 实际上非常小：6K 压缩后。
具有自定义 Shadow DOM 的自定义元素在其上有一个边界。有点像 iframe，其中父页面样式不会泄露进来，并且内部的样式不会泄露出去。这非常酷，但它也可能并非始终是理想的选择，因为如果您围绕这些组件构建整个网站，您可能希望您的样式穿透这些边界并设置样式，就像我们习惯使用的 CSS 一样。
已经进行过几次尝试来渗透 Shadow DOM 穿透 CSS 选择器，例如 .outside ^^ .inside，一些我忘记确切名称的伪选择器，例如 .outside:shadow(.inside)。现在有一个在 Chrome 中实际起作用的，例如 .outside /deep/ .inside，但显然它也不是答案（难以使其快速，我听到的一个原因）。
我渴望找到解决方案，因为它会影响通过那里发生的 Shadow DOM 边界设置 SVG <use> 的样式，这应该非常有趣。
也有很多关于“材料设计”的讨论。出于某种原因，我一直觉得需要用引号括起来。我非常喜欢它，但我觉得它只是一个事物的名称，而不是真实的事物。它是一个模式库。它是一套指南。它只是简单、雅致的设计。我同意 这里的 Khoi Vinh
我不确定除了 Google 的联系之外，材料设计是否会引起太多关注。需要说明的是，我发现材料设计是一项不错的作品，它当然很有吸引力，但围绕它的言论在我看来有点夸大其词。
像 Google 这样拥有无数属性的大公司需要一个连贯的系统来将所有内容联系在一起，现在他们拥有了它，这很棒。您和我可以从中学习，但我们不需要直接使用它或开始奇怪地将其带入日常对话。在您下次鸡尾酒会上随意不用它。
“就像，我觉得这场材料设计运动与 19 世纪末的工艺美术运动相似，因为它都是关于简单形式的。它关乎经济和谨慎地对待我们所拥有的一切。它关乎回归简单和重要的事物，伙计。”
Chris Palmer 谈了很多关于传输层安全 (TLS) 的内容。我一直称之为 SSL，但显然那像是旧版本。基本上，以 https:// 开头的 URL。
人们大力推动整个互联网都采用这种方式，Chris 坚定地支持这一点。没有它，任何处于 Web 请求中间的人（很多人）都可以干扰传输的内容。对于某些 ISP 来说，将其自己的 Google AdSense ID 插入网站的 HTML 中以替换网站所有者的 HTML 已经成为一种标准做法。这太疯狂了。HTTPS 无法做到这一点，因为通过网络传输的内容是加密的乱码。
对此的一种反对意见是 HTTPS“速度慢”，就像所有好的神话一样，其中有一些真相。它的一些部分可能需要花费几毫秒才能完成。但其中很多可以通过做一些通常明智的事情（例如连接请求）来缓解。此外，许多现代内容，例如 HTTP2 和 Service Workers 中非常棒的内容，都需要 HTTPS，因此现在是时候这样做。
我认为我可以在 CSS-Tricks 上轻松做到这一点，但在 CodePen 上，任何人都可以轻松链接到不安全的资源，因此我们需要评估在全 HTTPS 设置下 UX 的情况。
哇！学到了很多东西。那里发生的事情比我涵盖的这些内容要多得多。我刚从 An Event Apart 的两天活动中回来，所以我的大脑已经满了。
主题颜色功能在 Firefox OS 2.1 中也实现了。
拥有完整的头脑比拥有完整的结肠更好。
—— Clinton Gallagher @virtualCableTV @METROmilwaukee
我非常支持尽快将 SMIL 从 Blink 和其他所有地方移除。SMIL 的开发初衷很好，但文档一直很糟糕，没有可供使用的开发和测试工具，最终，浏览器大战扼杀了 SMIL 这只金鹅。
对我来说，弃用 SMIL 最棒的部分在于，它将彻底颠覆数字标牌市场，这些市场的软件供应商一直使用 SMIL 来对显示在屏幕上的资源进行编程控制；这为我们“普通”的客户端开发人员提供了一个机会，可以推出自己的产品和服务，从而在老牌标牌供应商重写他们的应用程序时获得先机。
……你刚刚引用了自己吗？
嘿，Chris！
很高兴在 CDS 上见到你。感谢你抽出时间参加。
Web Manifest 格式是JSON，但它与 Chrome 扩展程序格式完全不同。你可以在此处阅读相关信息：https://w3c.github.io/manifest/
它支持的大多数元数据都是你今天重复使用以支持在将内容保存为书签时创建快捷方式的那种内容。
非常感谢你撰写关于导航过渡的文章！非常期待看到你的读者用它们创造出什么。
此致
我仍在等待<foot>（<body>下面的内容）来存储所有这些额外的元标记，以及所有“页面加载完成后才运行”的脚本。但是将元标记卸载到一个单独的文件中也可以。
我曾使用技巧来“填充 DOM”，但现在使用 data- 属性已成为 W3C 认可的事实标准技巧，并指出了以下有用的见解
https://caniuse.cn/#feat=dataset
// 用例
‘’
让我们再尝试一下表达这个用例
<i data-[name]=”[value]”
data-[name]=”[value]”
data-[name]=”[value]”
…
>
我对 Web 动画不太了解，但其理念是拥有一个核心 API，该 API 集成 CSS、SVG/SMIL 和纯 JavaScript 动画。它不是 SVG 动画标记的替代品，而只是一个控制它的接口。
特别是，最新的编辑草案指出
换句话说，SMIL 支持可能会被移除，但你仍然可以在 SVG 中使用<animate> 元素（及其同级元素）。SMIL 规范实际上比浏览器在 SVG 中实现的内容复杂得多。也许更像是承认现有的 SVG 动画是 SMIL 的一个独立分支，并允许它独立发展（并与 CSS 和 JavaScript 组成一个名为 Web Animations 的大家庭）。
如我所说，我没有太关注讨论，所以如果有人可以纠正我，请务必这样做！
精彩的阅读……非常有见地……
关于页面过渡的新元标记听起来太棒了……迫不及待地想尝试一下……
主题颜色是否会更改浏览器 UI 的颜色？
无论如何……感谢分享你的学习成果……
迈克尔！
很棒的帖子 +1，来自我
不错的资讯，有助于创建更多类似于 Material Design 的过渡效果的 Web 应用。这里有一些与 Google Material Design 相关的网络字体。http://mirchu.net/material-design-icons/
嘿，Google！你“抄袭”了我的想法：P 哈哈
或者也许是我抄袭了你的，但我比你更早使用了它……嗯……
http://www.mywebexpression.com（点击页面底部的其中一个尾巴）
哎呦。而且这还是来自那些告诉我们最小化外部资源 HTTP 请求数量有多重要的人——难道他们找不到更好的方法来做到这一点，比如以某种方式扩展媒体查询语法以用于此目的（或基本上任何其他允许我们将此与页面其余格式一起保存在单个 CSS 资源中的方法）？