我们前几天在 ShopTalk 上就有这个问题。我们非常（正确地）担心网络性能，感觉我们不应该一直加载 polyfills，而应该只在检测到需要时加载。Philip Walton

……今天太多人构建网站时采取了“最低公分母”的方法。我的意思是，他们向所有用户发送相同的 JavaScript 包（无论浏览器功能如何），并且他们发送的包包含使网站在他们想要支持的最旧浏览器中正常工作所需的所有代码。

虽然我理解这种方法很简单，但它不尊重你的用户，并且优先考虑你的便利而不是他们的体验。

在略微出人意料的转折中，他的策略是

1. 满足支持所有所需功能的浏览器的需求
2. 如果通过：启动所有其他操作
3. 如果任何操作失败：加载所有 polyfills，然后启动操作

其理念是保持简单，并且不要让自己陷入复杂的状态，在这种状态下，你试图适应“浏览器现在可以处于 32 种不同状态”的情况。

我很高兴地宣布，我将与 Val Head 合作启动一个全新的网络动画工作坊系列！从今年 11 月开始，我们将前往不同城市举办为期两天的工作坊，首先是奥斯汀和纽约。无论你是新手还是已经深入研究动画，本课程不仅能让你入门，你还能获得制作微妙而美丽的网络动画所需的所有工具，以及如何选择合适的工具。

Val 和我都在世界各地发表演讲和举办工作坊，我们一起构成了在网络上如何进行动画的优势和知识的韦恩图。我们将涵盖从理论到技巧，再到错误修复和跨浏览器稳定性的所有内容。我们都专注于可访问性和性能。你将学习如何从设计和技术角度做出出色的动画决策。我们将介绍使用 SVG、CSS 和 JavaScript 技术，包括原生和 API。我们将讨论复杂的动画、响应式动画和 UX 动画，并探讨何时使用每种动画。你不会在其他任何地方找到如此丰富的网络动画知识集中在一个工作坊中！

为了确保你能从这些工作坊中获得最大收益，我们将保持班级规模较小。每个工作坊仅限 40 名参与者，并将包括动手练习以帮助你入门。

我成功地让 CSS-Tricks 发布到 Apple News（示例链接）、Instant Articles（示例链接）和 AMP（示例链接）。链接的文章介绍了所有这些是如何运作的，从这个自托管的 WordPress 网站开始。

如果你想批评我推广围墙花园和破坏网络，尽管来。

— Chris Coyier (@chriscoyier) 2016 年 9 月 18 日

我喜欢在我的网站上写作，然后发布到任何人们会阅读的地方的想法。

— Chris Coyier (@chriscoyier) 2016 年 9 月 18 日

与RSS 订阅相差无几。这是 IndieWeb 背后的理念

POSSE 是“发布在自己网站上，然后同步到其他地方”的缩写。

POSSE 关注的是与现在的朋友保持联系，而不是将来可能与朋友保持联系的可能性。

在 Typekit 博客上，Tim Brown 撰写了一篇关于网络字体世界中令人兴奋的进展的文章：对 OpenType 字体文件规范的改进。

这起初可能听起来并不那么令人兴奋，但“变体字体”允许设计师和开发人员将单个字体文件嵌入网页，然后从单个文件中插值我们需要的各种宽度和粗细。这意味着文件更小、请求更少，并且设计师拥有更大的灵活性。但是，此格式尚无法在浏览器中使用。相反，它表明 Google、Microsoft、Apple 和 Adobe 正在为此做出努力。

想象一下，稍微压缩或扩展字形宽度以适应窄和宽的视口。想象一下，在较小的尺寸下稍微提高你最喜欢的字体的 x 高度。想象一下，按照字体设计师的意图，以某种方式锐化或圆化你的品牌字体，以用于艺术指导。想象一下，几乎察觉不到地缩短降部，以便标题可以设置得非常紧凑，而不会让字母相互碰撞。想象一下，所有这些都可以在网络上实时发生，作为响应式设计的自然组成部分。

如果你有兴趣了解更多信息，我们写过关于响应式字体格式的呼吁，其中解释了为什么它在未来会如此有用。John Hudson 还撰写了一篇关于整个故事的长篇概述，并且规范在这里。

Divi 3.0 和 WYSIWYG 的未来已经到来。立即试用 Divi 的新型 WordPress 可视化页面构建器，并了解为什么它是构建精美网站的最佳和最简单方法。现在，你可以在你的实际网站上构建你的网站。

只需拖放、编辑和组合 40 多个内容元素，即可创建你能想到的几乎任何类型的页面。调整字体、颜色、大小和间距，并立即观察你的更改。新的前端编辑器超级快速，因为它几乎不需要传统的加载。 立即试用。

Rachel Andrews

……为了宣布 CSS 版本完成，在 CSS 的所有部分停止所有工作是没有意义的。因此，在 CSS2.1 之后，所有属于 2.1 规范的内容都被分解成模块。

很容易开玩笑地“也许我们会在 CSS17 中得到它！”，但这暗含了 CSS 将按版本发布（类似于“ES6”）的想法，而那些日子已经过去了。

CSS3有点道理。Tab Atkins说，关于分裂

如果我们的某些模块扩展了 CSS2.1 中的内容，那么它们从级别 3 开始。

但并非所有模块都是这样。大部分情况下，“CSS3”只是一个好的营销手段，就像“HTML5”一样。人们似乎真的理解了这一点，但这不利于语言本身。正如 Rachel 所说

单体规范的问题在于，为了完成规范，每个组成部分也必须完成。

我们都不希望 Web 标准发展得更慢。因此，我们对每个模块进行版本控制，并摒弃单体结构

从未有过 CSS4。也永远不会有 CSS4。CSS4 不是一个存在的东西。

我会称之为一个货真价实的 CSS 技巧，由 Lea Verou 提供。

不要错过评论，其中 Sérgio Gomes 提醒我们，这可能会让在 JavaScript 中更改值更容易，因为你可以在那里不用担心前缀。在 JavaScript 中更改 CSS 变量已经相当有吸引力，因为更改会自然地分散到它们在任何地方使用的位置。

以及 Andrea Giammarchi 的技巧，你创建一个几乎像@mixin 且具有默认值的设置

* {
  --box-shadow:
    var(--box-shadow-x, 0)
    var(--box-shadow-y, 0)
    var(--box-shadow-blur) /* no default, required */
    var(--box-shadow-radius, 0)
    var(--box-shadow-color, black);
  box-shadow: var(--box-shadow, initial);
}

p {
  --box-shadow-blur: 8px;
}

p.special {
  --box-shadow: 10px 0 0 green;
}

Florens Verschelde 深入探讨了Tim Brown 前几天谈论的概念背后的数字。

当我试图理解 Tim 的实现并创建其变体时，我很难确切地弄清楚发生了什么。我做了很多纸上计算，我认为分享一个数学解释会很有用。

以下是我的通俗解释

1. 你可以使用视口单位使值（如font-size）变得灵活。
2. 仅使用视口单位，该值可能会过于灵活，导致值太小或太大。
3. 你可以使用@media 查询“锁定”上下限。
4. 你仍然需要一个复杂的计算来计算两个“锁”之间的“中间”值。
5. 计算的复杂程度可能会有所不同，尤其是在尝试使用相对单位并适应用户字体缩放时。

在一个特定的示例中，代码最终如下所示

@media (min-width: 320px) and (max-width: 959px) {
  h1 {
    font-size: calc( 1.5rem + 16 * (100vw - 320px) / (960 - 320) );
    /* For a negative slope, we have to invert the breakpoints */
    line-height: calc( 120% + 3.2 * (100vw - 960px) / (320 - 960) );
  }
}

请记住，有一个PostCSS 插件。

Paul Lewis 制作了一个 3D 卡片翻转动画。在那里非常简单，但这还需要一个阴影元素

阴影可能需要四处移动或淡出，因此我们需要一个可以使用变换和不透明度进行动画处理的解决方案，因为它们可以传递给 GPU。它需要与它所遮蔽的元素分开，因为我们可能希望使其淡出和移动而不影响其他元素。

他尝试了box-shadow 和filter: blur()，但两者性能都不够好。

他尝试了一个带有模糊滤镜的 SVG 元素，但 SVG 本身无法执行 9 切片缩放（保持角部不会尴尬地缩放是必要的）。

获胜者是使用 SVG 图像，但通过border-image将其应用于元素，这本质上是 9 切片缩放。

Zach Leatherman 谈论数字输入的怪异之处。一个新的英雄诞生了

幸运的是，Web 标准人员已经认识到这个混乱，并标准化了一个诱人的替代方案：inputmode 属性。inputmode 允许你直接指定要使用的键盘类型，而与 type 属性值无关。

但是，这个新属性还没有得到任何地方的支持。

他们还创建了一个新的插件来帮助规范化数字输入行为。