參加第三屆Css conf of China后的個(gè)人回顧

tinylcy 發(fā)布于2019-08-30 13:16 / 2495人閱讀

摘要：是一維布局，是二維布局，經(jīng)常在實(shí)際應(yīng)用場(chǎng)景中會(huì)結(jié)合應(yīng)用，而且的靈活性高，在年已經(jīng)提案給裕波說，大概在明年的月份，已經(jīng)可以大面積使用了。

時(shí)間：2016.12.17

地點(diǎn)：廣州天虹賓館會(huì)議中心

主持人：裕波

主辦方：W3C、w3ctech、前端圈

演講嘉賓：
1、Mathias Bynens
2、大漠
3、勾三股四
4、廖洧杰
5、羅正燁
6、方瀟儀
7、倪栩生
8、陳劍鑫
9、Wenting Zhang

內(nèi)容：

一、第一場(chǎng)，前Opera 開發(fā)者 Mathias Bynens帶來的《3.14 Things I Didn"t Know About CSS》，全程飆英語，怪我英語太差，僅僅能夠吸收零星點(diǎn)點(diǎn)，我所聽到的大概就是一些css不為人所知的小技巧，讓我印象最深的就是：用.class.class代替！important看我demo:

html

感謝W3C、w3ctech、前端圈組織的第三屆Css conf of China!

css

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

結(jié)果是：

想讓.bar字體顯示藍(lán)色，其實(shí)有很多種方法，例如加個(gè)id,或者important,提高css解析的優(yōu)先級(jí)就可以，今天 Mathias Bynens提出了用.class.class代替！important的方式，如圖：

css改為：

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

結(jié)果為：

接下來Mathias Bynens還介紹了一些關(guān)于font-family 字體名之間空格的注意,css without html,以及CSS Expressions in IE<=7 或 IE<＝10,IE"s legacy documet modes,How to aviod CSS expression vulnerabilities,還講到了xss攻擊的一些手段，好吧～后面內(nèi)容我已經(jīng)搜盡我的英語詞庫，沒怎么聽明白了～sorry

附上css without html的截圖：

Mathias Bynens個(gè)人博客：https://mathiasbynens.be/

二、第二場(chǎng)是淘寶的CSS專家大漠帶來的《CSS Grid Layout》，剛開始大漠就自黑了自己一下，說自己說著一口流利的胡建話，又說自己的不會(huì)JS的CSS專家（不管你信不信，反正我不信哈哈哈哈～），大漠介紹了布局的發(fā)展歷史，從初始table布局，隨后的浮動(dòng)布局，再到現(xiàn)在flexbox,還有即將普及的Grid Layout。
期間介紹了Grid Layout的功能和用法，以及和flexbox的區(qū)別，以及，如何和flexbox的結(jié)合應(yīng)用。flexbox是一維布局，Grid Layout是二維布局，經(jīng)常在實(shí)際應(yīng)用場(chǎng)景中會(huì)結(jié)合應(yīng)用，而且Grid Layout的靈活性高，在2010年已經(jīng)提案給W3C,裕波說，大概在明年的9月份，已經(jīng)可以大面積使用了。看來我們是時(shí)候?qū)W習(xí)Grid Layout了～

三、第三場(chǎng)是勾股的閃電分享，我還想問為何叫閃電分享，原來是勾股要在短時(shí)間速度分享。勾股帶來的是weex的框架中css in native，以及一些特性（如支持 PostCSS），還有就是weex將來還會(huì)支持某些特性，以及現(xiàn)場(chǎng)展示了weex做出來的native端的demo，最后勾股也特別說明了最近 Weex 加入 Apache 基金會(huì)的事，說現(xiàn)在是進(jìn)入孵化階段，然后...我也不知道忘記說了什么了，實(shí)在太閃電了。
個(gè)人附上weex的介紹：
用vue寫的Native框架,用來寫出Native級(jí)別的性能體驗(yàn)，并支持iOS、安卓、YunOS及Web等多端部署。（類似react-native）

四、第四場(chǎng)是臺(tái)灣友人廖洧杰帶來的《Sass & CSS Design Pattern》，一口流利的臺(tái)灣腔口音，講的是：CSS工程化和設(shè)計(jì)模式，以及sass的趨勢(shì)與局限，表達(dá)了一些自己團(tuán)隊(duì)平時(shí)所遇到的問題，以及自己常用的解決工具和方案，還有命名規(guī)則和對(duì)大家平時(shí)寫代碼的規(guī)范性和意識(shí)的統(tǒng)計(jì)。重點(diǎn)是領(lǐng)導(dǎo)者從整個(gè)項(xiàng)目的高度去考量，不同角色和團(tuán)隊(duì)，眼里的職能和能力范圍，團(tuán)隊(duì)協(xié)作需要注意的東西。

五、第五場(chǎng)是三位來自微信前端的工程師，分別是羅正燁、方瀟儀、倪栩生,第一位羅正燁大神主要介紹了svg是什么，相比png的靈活性，以及實(shí)用性，svg的優(yōu)點(diǎn)有：顏色靚，質(zhì)量高，尺寸小，可以動(dòng)。缺點(diǎn)是：渲染有點(diǎn)遲緩（但是在實(shí)際測(cè)試中，所需時(shí)間還是可以接受的）。并介紹了基于插件模式構(gòu)建，基本上所有的優(yōu)化都是一個(gè)分離的插件--svgo。第二位方瀟儀大神簡(jiǎn)直是一位女中豪杰，分享了svg的動(dòng)畫實(shí)現(xiàn)，對(duì)了我這種不懂svg動(dòng)畫的孩子，收獲很大的，大致明白了svg的動(dòng)畫渲染經(jīng)過。介紹了一個(gè)前端開發(fā)工作流工具：webflow,一個(gè)svg的js框架：snap.svg.js,還有svg的濾鏡等等，干貨滿滿！最后一位倪栩生主要介紹的是微信網(wǎng)頁重構(gòu)實(shí)踐，以及網(wǎng)頁中信息的一些實(shí)現(xiàn)方案。

六、第六場(chǎng)是來自UC的陳劍鑫，介紹了從矩陣走入 WebGL 世界，解析了具體的圖形效果，是由底層矩陣算法如何實(shí)現(xiàn)的，例如transform ，rotateXYZ，rotate3D，解釋一把計(jì)算機(jī)圖形學(xué)，如何用算法實(shí)現(xiàn)，讓我仿佛回到了上大學(xué)的線性代數(shù)＋計(jì)算機(jī)圖形學(xué)＋上機(jī)課，大概就是關(guān)鍵詞是：坐標(biāo)，著色，視角移動(dòng)。并且現(xiàn)場(chǎng)展示了VR／AR技術(shù)。

七、最后一位，來自Adobe Typekit的用戶體驗(yàn)設(shè)計(jì)師Wenting Zhang,同時(shí)也是CSS ICON 和 underline.js的作者。不得不說，國(guó)外的女程序員，太全能了，技術(shù)實(shí)在屌屌的。全程掌聲不斷，一開始就現(xiàn)場(chǎng)演示了，如何畫一個(gè)小胡子的icon,僅僅只用了十分鐘，僅用一個(gè)element就把icon畫出來，思路清晰流暢到飛起，先向我們普及了一個(gè)標(biāo)簽元素具有的兩個(gè)偽類：before和：after,和一個(gè)box-shadow的屬性，總結(jié)一下，就是一個(gè)元素總共有三個(gè)矩形可用，以及用box-shadow可做多個(gè)矩形用。不到10分鐘效果如下：

隨后還現(xiàn)場(chǎng)繼續(xù)展示如何將這個(gè)小胡子動(dòng)起來，變成一個(gè)小胡子的動(dòng)畫效果。
隨后介紹了自己的畫的icon,并免費(fèi)開源給大家，以及icon相關(guān)的animation效果，鏈接為：http://cssicon.space/

最后附上大會(huì)重要嘉賓，以及舉辦方的合照：

以上謹(jǐn)代表個(gè)人見解，有不當(dāng)之處，或若涉及圖片隱私或者其它問題，煩請(qǐng)指正。