这是一个很酷的 PostCSS 插件，它允许我们与其他样式一起在 CSS 中直接编写 SVG

.arrow {
    @svg {
        polygon {
            fill: green;
            points: 50,100 0,0 0,100;
        }
    }
}

然后这些值将转换为数据 URI，如下所示

.arrow {
    background-image: url(data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpolygon%20fill%3D%22green%22%20points%3D%2250%2C100%200%2C0%200%2C100%22%2F%3E%3C%2Fsvg%3E)
}

正如 Sara Soueidan 提到的，我希望在 Sass 中也能看到这个功能。

更新：David Khourshid 刚刚制作了 sass-svg，它允许你在 mixin 中编写 SVG。

Edd Sowden 开始了一段史诗般的无障碍之旅，试图了解为什么更改表格的display属性会影响其语义含义。

我在这里发现了一些有趣的笔记

• 将来我们或许可以使用<table role="table">作为一种有用的技巧来覆盖这些样式更改并保留可访问性。
• Chrome 的 Web 检查器中的辅助功能选项卡可以通过“开发者工具实验”并启用“辅助功能检查”来启用。

Chris Manning 带领我们走过网络上自定义字体的奇特旅程。我们从“未设置样式文本的闪烁”开始，起初我们不喜欢它，因为它很突然，感觉很卡顿，甚至可能导致回流，这不利于读者集中注意力。浏览器做出了反应，并在自定义字体准备好之前开始隐藏文本（各种实现方式不同）。“不可见文本的闪烁”就是这样。时代变了，现在 FOUT 再次成为首选，因为至少你可以立即阅读一些内容。Chris 展示了如何通过各种 JavaScript 方法重新获得它。

对我来说是新的：未来将拥有原生浏览器方法来提供更多控制。一个 字体加载 API 和一个 CSS font-display 属性。

Dan Wilson 有一篇介绍文章，后面跟着一个关于 Web 动画 API 的五部分系列。如果你不知道，.animate()现在是原生功能了。我认为 Web 动画 API 有很多有趣的东西，比如

• 另一个很好的例子说明了库如何铺平道路，然后浏览器从中学习并变得更好。然后
  

  这些库可以专注于提供更新的功能，循环可以继续。

• 在浏览器的俗语“引擎盖”下，Web 动画 API 也为 CSS 动画提供动力。
• 动画库是否会在其引擎盖下将此用作回退堆栈的一部分？或者他们是否在使用requestAnimationFrame或他们现在正在使用的任何其他方法时看到了同样好或更好的性能？
• 并非每个新的 Web 功能都有一个 官方 polyfill。

Ashley Nolan 收集了我们今天作为前端人员正在使用的工具的数据。剧透：Sass、Gulp、jQuery。但这里还有很多有趣且有些令人惊讶的数据值得探索。

因为有时查看带有指向每个小部分并解释其作用的箭头的代码是理解的最佳方式。

如果您不熟悉响应式图像，可以 在这里查看 以获取更多信息，包括 一些 视频。

上周我们写了关于 预取和预加载 的内容，但忘记提及preconnect。幸运的是，Ilya Grigorik 撰写了一篇关于这个难以捉摸的资源提示的精彩文章

预连接是优化工具箱中的重要工具。如以上示例所示，它可以消除请求路径中的许多代价高昂的往返——在某些情况下，请求延迟减少了数百甚至数千毫秒。也就是说，明智地使用它：每个打开的套接字都会在客户端和服务器上产生成本，并且您希望避免打开可能不会使用的套接字。与往常一样，应用、衡量实际影响并进行迭代以从此功能中获得最佳性能。

Stephen Hay 关于经典的设计师应该学习编码格言。他很好地设定了它

当你挂起数百幅儿童绘画和素描时，尤其是在年纪较小的孩子中，你会注意到很多孩子倾向于画出他们所看到事物的符号。他们不画太阳，而是画一个周围有线条的圆圈。

然后，也许，你学会了画画

学会仔细观察那里真正存在的东西。真正发生的事情。酒杯上的圆圈变成了椭圆。太阳的硬线变成了色彩渐变。[…] 对于那些没有绘画经验的人来说，这将是迄今为止你画过的最好的画之一。

网站也一样

…重要的不是编码。而是远离我们正在设计的那些事物的象征性表示。是不使用扁平图像作为不同事物的糟糕代理

希望利用srcset属性或<picture>元素，但不想存储每个图像的不同版本？希望对不会钉住浏览器的图像应用模糊？imgix 可以提供帮助。

imgix 是一种实时图像调整服务和 CDN。只需更改图像的 URL 即可调整大小、裁剪和处理图像。混合搭配超过 90 个 URL 参数，以无限不同的方式处理图像。

注册免费，每个新账户都会获得 10 美元的信用额度。不要让工程限制影响你的设计决策。

Jason Grigsby 刚刚完成了一个关于响应式图像的 10 部分系列大师班。每个帖子底部都有一个目录，用于跳转。