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

时间：2016.12.17

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

主持人：裕波

主办方：W3C、w3ctech、前端圈

演讲嘉宾：
一、Mathias Bynens
二、大漠
三、勾三股四
四、廖洧杰
五、罗正烨
六、方潇仪
七、倪栩生
八、陈剑鑫
九、Wenting Zhang

内容：

1、第一场，前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/

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

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

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

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

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

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

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

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

以上谨表明我的看法，有不当之处，或若涉及图片隐私或者其它问题，烦请指正。