我本来觉得应该从介绍CSS中引入变量的用途开始讲起，但事实上，很多流行的CSS预处理/后处理程序已经做了很好的诠释。当然，手动地去搜索或者查找/替换依然能满足你的需求，但这就像是不在JS中使用变量一样--很痛苦。事实上，CSS变量的动态性和作用域能够为你的实践和应用提供更加强大的能力--你可以非常高效的读取、设置和更新这些变量！同时，就像Webkit的小伙伴们在审查工具中做的那样，你也可以避免在你的代码中出现重复的代码片段（冗余）。

四年前，Jason Grigsby问了我一个出人意料的难题: 你是如何获取响应式图片断点的？一年之后，他得到了答案: 理想情况下，我们会设置响应式图片性能预算实现“在不同大小文件间的跳转。”Cloudinary创建了一种工具实现了这一想法，并且在社区获得了一致性的好评:“太棒了！现在，它还可以实现什么呢？

最近我在Codepen看到一个这样子的加载示例。使用CSS完成的具有渐变褪色倒影的、旋转的3D条形块。每一个条形块使用了一个元素，之后进行复制，这些元素形成倒影，最后添加渐变进行覆盖形成渐变褪色效果。这听起来有点像用你的左脚趾从背后抓右耳朵般不切实际。更不用说渐变覆盖方法形成褪色效果在非平面背景色不起作用了。是不是有更好的方法使用CSS可以实现这种效果呢？

最近，我在一个React同构网站工作。这个网站建立在React上，运行于Express服务器上。一切都进行得十分顺利，但是我仍对CSS包的加载阻塞不满意。因此，我开始考虑如何在Express服务器上进行关键路径的优化。这篇文章主要是如何使用Express和Handlebars进行安装以及配置一个关键路径的性能优化的笔记。

平面设计已成为2016年可见的趋势，显然，这就是SVG用法又重新走入人们的视野的原因。好处有很多: 独立的分辨率、跨浏览器兼容性以及DOM节点的可访问性。本文中，我们将看看如何使用SVG从简单的插图创建看似复杂的动画。

CSS最近介绍了一个关于scroll snap points的新功能，为触控以及输入设备的用户提供一个流式、精确的滚动体验。关于创建scroll snap效果，有许多jquery插件可供你选择，但是我们今天所讲述的不是通过安装一个插件来控制滚动的行为，而是使用原生的CSS scroll snap points来实现。

本指南不针对于具有优先级加载以及用例示范的font icons，或许，SVG会是一个更好地长期选择。如果你正在寻找具体的方法，这里的一些相关链接可能对你的帮助会更加直接。

介绍这个新CSS属性之前，我想要先讲一下使用JavaScript实现的一个功能—— 将一个元素锁定在滚动视窗之中。众所周知，使用JavaScript实现滚动的行为还是有些难度的。CSS Scroll Snap Points 新规范指出你仅仅使用几行简单的CSS代码就可以实现以上所述的功能。新出现的Web技术总是在不断的变化之中，这个规范也处于不断的修改之中。也存在“旧的”与“新的”属性与值。随着浏览器的不断地支持，这个新属性的前景还是不错哒~ 在规范处于中间的阶段，我将带你们获取浏览器对其最大的支持性。

可缩放矢量图形(SVG)作为当今新兴的图形格式，在Web应用中往往更受偏爱。你是否也放弃了icon font或者因为浏览器对SVG良好的支持使其取代了旧的jpg、gif以及png图像格式？接下来就让我们看看这将如何影响用户的辅助功能(AT)以及如何确保每个用户都可以拥有良好的用户体验。

最近，我在CodePen上看到了一个Twitter心形点赞动画。一般，如果我有时间就会研究案例代码，看是否可以进行利用或更改。在这个案例中，我很惊讶的看到演示使用的是Sprites图片。后来我学习了Twitter对其实现的原理。当然，这可以不使用图片就可以实现，不是吗？