参加第三届Css conf of China后的个人回顾

时间：2016.12.17

地点：广州 天虹宾馆会议中心

主持人：裕波

主办方：W3C、w3ctech、前端圈

演讲嘉宾：
1、Mathias Bynens
2、大漠
3、勾三股四
4、廖洧杰
5、罗正烨
6、方潇仪
7、倪栩生
8、陈剑鑫
9、Wenting Zhang

内容：

一、第一场，前Opera 开发者 Mathias Bynens带来的《3.14 Things I Didn't Know About CSS》，全程飙英语，怪我英语太差，仅仅能够吸收零星点点，我所听到的大概就是一些css不为人所知的小技巧，让我印象最深的就是：用.class.class代替！important看我demo:

html

<p class="pre">感谢W3C、w3ctech、前端圈组织的<span class="bar">第三届Css conf of China</span>!</p>

css

.pre .bar{
    color:red;
}
.bar{
    color: blue;
}

结果是：

想让.bar字体显示蓝色，其实有很多种方法，例如加个id,或者important,提高css解析的优先级就可以，今天 Mathias Bynens提出了用.class.class代替！important的方式，如图：

css改为：

.pre .bar{
    color:red;
}
.bar.bar{
    color: blue;
}

结果为：

接下来Mathias Bynens还介绍了一些关于font-family 字体名之间空格的注意,css without html,以及CSS Expressions in IE<=7 或 IE<＝10,IE's legacy documet modes,How to aviod CSS expression vulnerabilities,还讲到了xss攻击的一些手段，好吧～后面内容我已经搜尽我的英语词库，没怎么听明白了～sorry

附上css without html的截图：

Mathias Bynens个人博客：https://mathiasbynens.be/

二、第二场是淘宝的CSS专家大漠带来的《CSS Grid Layout》，刚开始大漠就自黑了自己一下，说自己说着一口流利的胡建话，又说自己的不会JS的CSS专家（不管你信不信，反正我不信哈哈哈哈～），大漠介绍了布局的发展历史，从初始table布局，随后的浮动布局，再到现在flexbox,还有即将普及的Grid Layout。
期间介绍了Grid Layout的功能和用法，以及和flexbox的区别，以及，如何和flexbox的结合应用。flexbox是一维布局，Grid Layout是二维布局，经常在实际应用场景中会结合应用，而且Grid Layout的灵活性高，在2010年已经提案给W3C,裕波说，大概在明年的9月份，已经可以大面积使用了。看来我们是时候学习Grid Layout了～

三、第三场是勾股的闪电分享，我还想问为何叫闪电分享，原来是勾股要在短时间速度分享。勾股带来的是weex的框架中css in native，以及一些特性（如支持 PostCSS），还有就是weex将来还会支持某些特性，以及现场展示了weex做出来的native端的demo，最后勾股也特别说明了最近 Weex 加入 Apache 基金会的事，说现在是进入孵化阶段，然后...我也不知道忘记说了什么了，实在太闪电了。
个人附上weex的介绍：
用vue写的Native框架,用来写出Native级别的性能体验，并支持iOS、安卓、YunOS及Web等多端部署。（类似react-native）

四、第四场是台湾友人廖洧杰带来的《Sass & CSS Design Pattern》，一口流利的台湾腔口音，讲的是：CSS工程化和设计模式，以及sass的趋势与局限，表达了一些自己团队平时所遇到的问题，以及自己常用的解决工具和方案，还有命名规则和对大家平时写代码的规范性和意识的统计。重点是领导者从整个项目的高度去考量，不同角色和团队，眼里的职能和能力范围，团队协作需要注意的东西。

五、第五场是三位来自微信前端的工程师，分别是罗正烨、方潇仪、倪栩生,第一位罗正烨大神主要介绍了svg是什么，相比png的灵活性，以及实用性，svg的优点有：颜色靓，质量高，尺寸小，可以动。缺点是：渲染有点迟缓（但是在实际测试中，所需时间还是可以接受的）。并介绍了基于插件模式构建，基本上所有的优化都是一个分离的插件--svgo。第二位方潇仪大神简直是一位女中豪杰，分享了svg的动画实现，对了我这种不懂svg动画的孩子，收获很大的，大致明白了svg的动画渲染经过。介绍了一个前端开发工作流工具：webflow,一个svg的js框架：snap.svg.js,还有svg的滤镜等等，干货满满！最后一位倪栩生主要介绍的是微信网页重构实践，以及网页中信息的一些实现方案。

六、第六场是来自UC的陈剑鑫 ，介绍了从矩阵走入 WebGL 世界，解析了具体的图形效果，是由底层矩阵算法如何实现的，例如transform ，rotateXYZ，rotate3D，解释一把计算机图形学，如何用算法实现，让我仿佛回到了上大学的线性代数＋计算机图形学＋上机课，大概就是关键词是：坐标，着色，视角移动。并且现场展示了VR／AR技术。

七、最后一位，来自Adobe Typekit的用户体验设计师Wenting Zhang,同时也是CSS ICON 和 underline.js的作者。不得不说，国外的女程序员，太全能了，技术实在屌屌的。全程掌声不断，一开始就现场演示了，如何画一个小胡子的icon,仅仅只用了十分钟，仅用一个element就把icon画出来，思路清晰流畅到飞起，先向我们普及了一个标签元素具有的两个伪类：before和：after,和一个box-shadow的属性，总结一下，就是一个元素总共有三个矩形可用，以及用box-shadow可做多个矩形用。不到10分钟效果如下：

随后还现场继续展示如何将这个小胡子动起来，变成一个小胡子的动画效果。
随后介绍了自己的画的icon,并免费开源给大家，以及icon相关的animation效果，链接为：http://cssicon.space/

最后附上大会重要嘉宾，以及举办方的合照：

以上谨代表个人见解，有不当之处，或若涉及图片隐私或者其它问题，烦请指正。