这篇文章主要是整理了国外两场有关于CSS分享大会分享的相关主题，前面一部分是@Chris Coyier在CSS Dev Conf大会上做的相关笔记。最后在文章末尾附上了2016年CSS Conf分享的相关主题。如果你对CSS相关话题感兴趣的话，可以关注2016年12月17日在中国广州举办的第三届CSS Conf大会相关主题。

特别声明：文章中附有多份Slides和Videos，而且大部分都在墙外，如果在浏览器不能看到相关数据，请君自备天梯到墙外。

我连续五年都参加了CSS Dev Conf大会。虽然这个会议聚集点有点小，但说实话我一直非常喜欢这种会议。每次会议不会有什么大惊喜，主要集中在分享CSS方面的主题，对于我而言，在这里每一次都可以获取到CSS有关的最新资讯和趋势。

过去在CSS Dev Conf出现的主题：预处理器、CSS架构、测试、性能...去年主要讲的是SVG

CSS Dev Conf是一个多轨道(multi-track)会议，加上我错过了最好的机会在上面展示和讲述CodePen。所以下面的的内容并不是代表整个会议的。我只能说对不起，明年重新来过。

Mike Riethmuller分享的响应式排版

响应式排版其更确切的说是“先进的洗式排版”。他还获得最佳展示！我想，这是应得的。

他从介绍calc()如何工作开始，然后引入视窗单位(viewport units)以及将这些运用到font-size属性上。最后的结果就是“流式排版”，不管是基于屏幕的尺寸还是最小值或最大值。效果看上去很清爽，比单独使用视窗单位(或SVG)还要舒服。

@MadeByMike在CodePen写的一个示例：Precision responsive typography。 建议在新窗口中打开这个示例，然后缩放浏览器视窗大小，你可以看到一个非常清爽的流式排版效果。

这个方案可以用来替代使用媒体查询断点改变font-size固定值的方案。

这个方案较大的争论是：

• 这就类似于自适应布局和响应式布局之间的区别。我们都知道响应式设计获取了
• 根据断点来调整font-size并不是那么令人满意
• 它基本上就是一行代码，所有采用这个方案应该还是很容易的

这还是全部的！如果是按比例进行缩放，有点类似于SVG中的<text>。那么它的极限性就非常的小，而且可以扩展出其他的概念：

• 流式模块缩放：header中的文本在大屏幕上是旁边文本的1.5倍，但在小屏幕上是1.2倍
• 流式Vertical Rhythm：不仅仅改变font-size，而且line-height和其他间距也能更好和适配

扩展阅读

• Fluid Type Blogs
• Truly Fluid Typography With vh And vw Units
• Fluid typography with viewport units
• FLUID TYPE
• Readable, Fluid Type With Basic CSS Smarts
• vertical-rhythmic 3.0.1
• A guide to vertical rhythm

David Khourshid分享的响应式动画(Reactive Aniamtion)

这是一些严重的CSS trickery。使用JavaScript来控制CSS的变量，就像是给CSS深度访问DOM事件。

David在他的写的演示示例中采用了RxJS和他自己的RxCSS库。

他以前分享过类似的话题：

因为CSS Dev Conf，David收集了很多演示CSS变量的案例。这也激发了其他几个人一起探索这个领域，比如：

如果你从未接触或了解过有关于CSS变量相关知识点，建议你可以先阅读一下《深入学习CSS自定义属性（CSS变量）》。

Alicia Sedlock分享的如何抵抗疲劳

这个主题引起了观众的共鸣。在这个话题中我学会了“brownout”这个词：