当我们使用CSS3动画时，我们经常讨论如何使用过渡，动画等实战方法。然而动画的强大之处不是集中在单个动画是如何工作的，而是多个动画结合起来，创造出令人震撼的效果。良好的动画设计可以使我们的作品脱颖而出。Disney的 动画的12个基本原则 定义“感染力”为“一个演员的迷人之处。” 它是描述如何使用虚实，风格，和动画的物质叠加起来创建生动的角色，使得观众觉得真实而有趣。

在这篇文章中，我们将研究CSS中的will-change这个属性，研究它是什么，何时、如何使用它以及如何不使用它。这儿有许多关于wil-change的技术文章，所以在这篇文章中，我将参考大量的这些资源，并且在文章的末尾编辑一份列表。通过一些简单例子，这篇文章将作为重要部分的概述。

Flexbox布局（Flexible Box）模块(目前处于W3C工作草案)旨在提供一个更佳有效的布局方式，更好的控制项目的对齐和自由分配容器空间，即使它们的大小是未知的或动态的。因此得其名"flex"。本文是根据CSS-Tricks整理的一篇《A Complete Guide to Flexbox》和W3C中文兴趣小组翻译的Flexbox规范整理。

其实currentColor已经出现了有一段时间了，但我是几个月前在阅读Dudley Storey的文章时才听说了currentColor的。Dudley Storey指出currentColor的浏览器 (包括IE9+)支持是非常好的。这对于我把它用于生产已经是非常足够的了，而且我非常惊讶地发现这个关键字其实非常好用：它有助于让CSS代码变得更简洁和智能。

如果你有使用Sass或LESS，你可能已经在你的样式表中使用过变量了，也知道它们确实非常有用。如果你没有使用预处理器，那么你就可能会好奇这到底是怎么一回事，为什么变量会如此受欢迎，它们为何会这么有用。在这篇文章中，我们先大概讲一下为什么变量如此有用，然后再认识一下另一个特殊的变量：currentColor。

响应式网页设计是针对多屏幕问题的一个很好的解决方案，但从印刷的视角来看有点困难。没有固定的页面尺寸，没有毫米或英寸，没有任何的物理限制，无从下手。为了desktop和mobile单独使用像素设计的方法也成为了过去，因为越来越多的设备都可以打开网站。因此，我们需要弄清楚响应式网页设计的一些基本原则，接受流体网页，而不是与之相抗。为了让它保持简单，我们将着眼于布局（是的，响应式比它更复杂，如果你想了解更多，这是一个很好的开端。）

Flexbox最大的优点是计算空间能力强，尤其是当对一个容器里未知数量的子项目进行布局时。更具体来说，当给导航栏或者网格布局时，它们所需的空间有可能远超过现在计算的数值。想象一下在CMS里面当用户增删导航栏的项目时，既不想更改样式，又要填充其空间。你甚至可以用它同时计算不同类型的单元。对于不熟悉Flexbox的人来说，在CSS里它就是一种计算并分布空间的智能布局模式，同时也解决了一些困扰多年的布局问题以及hack。

Cindy Krum 最近发表了一篇非常值得一读的文章：《9 Things You Need to Know About Google's Mobile-Friendly Update》，强烈建议在阅读本文前理解一下该文的思想。已经准备好了？那我们开始吧。为了在 4 月 21 号前迅速优化为移动端网站，最简单的方法就是牺牲一些性能。但是谷歌曾经多次提醒我们，站点的响应性能是非常重要的搜索权重点，比如 2010关于桌面端 和 2013 关于移动端 的这两篇文章。在本文中，我将会讲述一下最佳实践方案，希望你在创建或重构设计时牢记这些经验。此外，建议你精读谷歌关于移动友好型站点的指导文档。