对于SVG路径动画，我相信大家都看到过这样的动效：一条线就像它自己画自己。非常的酷。@Jake Archibald是这项技巧的先驱，他在自己的博客写了一篇非常好的文章来介绍SVG的线条动画是如何实现的。@Brian Suda也在24 Ways网站上讨论过这种技术。Polygon使用它在一篇设计方面的文章里创建出了非常神奇的效果。Codrops也有很多非常酷的案例。在这篇文章中，我并没有什么要补充的，只是想把这种技术阐述的更简易些。所以，在这里我用我的方式把这种技术再次向大家阐述一遍。

任何有开发经验的前端工程师都会考虑到不成体系的设备生态所带来的挑战。设备间不同的屏幕尺寸、分辨率和比例使得产品难以提供一致的体验，对于那些对产品有着像素级完美追求的人这种体验差异尤其显著！SVG（可缩放的矢量图形）完美地解决了上文中提到的部分问题。尽管 SVG 有它的局限性，但是在某些场景下是非常有用的，如果你有一个好的设计团队，你也可以基于SVG创建一些震撼的视觉体验，而不必担心给浏览器带来过重的渲染负担或阻碍页面的加载时间。

在上一节介绍SVG填充特性中，提到了SVG中另一个特性描边特性（stroke）。SVG的描边特性主要包括stroke、stroke-width、stroke-opacity、stroke-dasharray、stroke-linecap、stroke-linejoin和stroke-miterlimit等属性。在这一节中，主要围绕这几个SVG属性进行展开。在SVG中咱们通过stroke来对绘制的图形边框进行设置，我们可以对图形边框的颜色、粗细、透明度，连接端，线帽和虚线等进行设置。为了更好的理解SVG中的描边特性，我们采用一个葡萄的轮廓图来展开介绍。

大约一年前，我写了一篇关于在Web中实现垂直排版的文章。这是一个简单的Demo，它允许你通过复选框来切换书写模式。在不久之后我遇到了@Yoav Weiss，并一起聊了一些关于响应式图片社区小组，因为我提到了如果可以通过媒体查询得到picture元素的writing-mode,就不必在切换排版的时候通过一些黑魔法的方式对图片进行转换。他建议我写一个响应式图片的用例。当我重新打开这个Demo的时候，看到的结果让我感到无语。为了宣泄一下，我将一步一步写下各种浏览器的渲染结果，以及目前可能的解决方案。这篇文章的篇幅很长，可能会花费你一定的时间。

今天在Twitter看到Codepen上的一个示例，感觉很神奇。刚开始以为是用了什么黑科技，但仔细一看是纯CSS实现的一个效果。示例中最关键的是使用了font-variation-settings属性。那么这个属性有什么神奇之处呢？容当后述。

随着美国性感女星玛丽莲·梦露曾主演过一部电影《七年之痒》播出之后，这个词已成为西方的谚语，而此谚语在中文中也常常被拿来使用，甚至比它的起源更为华人所熟知。当然，我们今天聊的不是感情也不是艳遇，只是想借“七年之痒”来描述我与前端之间的故事。就算是2017年的总结吧。

就目前为止，CSS的Grid和Flexbox结合将是解决布局的最佳方案。虽然浏览器对CSS Grid和Flexbox的属性未完全支持，但对于实现布局而言，这已是一种非常完美的结合。如果CSS Box Alignment Module Level3能得到更好的支持的话，那么对于Web的布局将是一种福音。就前面学习的CSS Grid和CSS Flexbox，我们对CSS的Flexbox和Grid有了很深入的了解。特别是在《使用CSS Grid和Flexbox制作Card》一文中，已经见识到了CSS Grid和Flexbox结合对布局的巨大优势。那么这篇文章，将再一次向大家展现CSS Grid和Flexbox的强大之处。那是因为他们的结合将解决布局的实际问题。

在JavaScript中合并多个对象是一个很常见的事情。但在JavaScript中，到目前为止并没有一种很方便的语法来进行合并。在ES5中，通过使用Lodash的_.extend(target, [sources])（或者其他选项），在ES2015中引入了Object.assign(target, [sources])。幸运的是，对象的spread语法（ECMAScript第3阶段建议）是如何操作对象，提供了一个简短且易于遵循的语法。

CSS布局中有一些概念，一旦理解了这些概念，就能真正的提高你的CSS能力。这篇文章主要介绍的是关于块格式化上下文（Block Formatting Context），也就是大家俗称的BFC。你可能从未听说过这个术语，但只要你曾经使用过CSS布局，你就可能知道它是什么。理解BFC是什么，它有什么功能，以及如何创建一个BFC是非常有用的，这些能帮助你更好的理解CSS布局。在这篇文章中，我将会通过几个很熟悉的示例来解释BFC。我还会介绍一个新的display的值，当你理解了BFC是什么的时候，你才能了解为什么需要这个值。也就能更好的理解它的真正意义。

这些特性在写这篇文章的时候还没有在任何的浏览器得到稳定的支持。但是，接下来要讨论的内容在Firefox Nightly中得到了支持，而且关键部分在Chrome Canary（开启Web实验性特性），所以我建议使用这些浏览器中的一个（在阅读本文时）。