2016 CSS Dev Conf会议笔记

这篇文章主要是整理了国外两场有关于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)还要舒服。

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

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

这个方案较大的争论是:

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

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

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

扩展阅读

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

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

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

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

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

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

Alicia Sedlock分享的如何抵抗疲劳

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

剩余80%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/css/notes-css-dev-conf-2016.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部