參加第三屆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/

最後附上大會重要嘉賓，以及舉辦方的合照：

以上謹表明我的看法，有不當之處，或若涉及圖片隱私或者其它問題，煩請指正。