會(huì)議官網(wǎng)

中國(guó) CSS 開發(fā)者大會(huì)

會(huì)議照片

會(huì)議照片

會(huì)議PPT收錄

ppt——當(dāng)然，上面官網(wǎng)的連接里面也有

演講記錄

3.14 Things I Didn’t Know About CSS

演講者：Mathias Bynens
描述：This talk will showcase a series of obscure CSS fun facts, such as CSS syntax gimmicks and quirks, weird tricks that involve CSS in one way or another, and security vulnerabilities that are enabled by (ab)using CSS in unexpected ways.

恕我聽不懂英文，只是記錄了演講者提到的例子、項(xiàng)目：
mathiasbynens
youmightnotneedjs
HTML Kong
HTML Kong Game
css-without-html
nojs.css
using-css-without-html
xss-game
csszengarden
evil.css

Unicode In CSS
大概是講很多東西都可以成為css的class，最突出的就是：居然用 emoji 都可以

CSS Grid Layout

演講者：大漠
描述：現(xiàn)在大量網(wǎng)頁(yè)設(shè)計(jì)基于網(wǎng)格布局。雖說(shuō)人們通常注意不到它，但雜亂無(wú)章的布局時(shí)代確實(shí)已經(jīng)過(guò)去了，現(xiàn)在是整齊結(jié)構(gòu)化的天下。無(wú)論從理論、美學(xué)和整齊來(lái)說(shuō)，這樣的布局都很好平衡。網(wǎng)格結(jié)構(gòu)是所有現(xiàn)代網(wǎng)站的基礎(chǔ)，它總能給最終用戶完美無(wú)暇的設(shè)計(jì)。

從古來(lái)的table布局、現(xiàn)在的Web布局（流布局、定位、flexbox）引出最新的布局方式——Grid Layout（將于2017年3月份開始被各大瀏覽器支持）。

Grid Layout歷程

• 2010年微軟提出，并且在IE10實(shí)現(xiàn)
• 2015.3.2，chrome支持
• 2016.9.29成為w3c候選標(biāo)準(zhǔn)
• 2017.3將會(huì)被各大主流瀏覽器支持

Grid術(shù)語(yǔ)

• 網(wǎng)格容器（display: grid|inline-grid;）
• 網(wǎng)格項(xiàng)目
• 網(wǎng)格線
• 網(wǎng)格軌道（Grid Tracks）
• 網(wǎng)格單元
• 網(wǎng)格區(qū)域
• 網(wǎng)格間距

Flexbox Layout Or Grid Layout

并沒(méi)有一種布局是完美的，不存 在說(shuō) 只用 Flexbox Layout或者Grid Layout就可以很好地完成網(wǎng)站的布局。Flexbox Layout 與 Grid Layout 并不是互斥關(guān)系，取兩者之長(zhǎng)補(bǔ)彼此之短才能有更舒適的開發(fā)體驗(yàn)。

資料

Grid規(guī)范
Box Alignment規(guī)范
Flexbox規(guī)范
Flexbox教程
Grid教程
Grid案例
CSS Grid Layout Example

零散的點(diǎn)

• Grid Layout可以將寬和高進(jìn)行等比縮放
• 就算設(shè)計(jì)師不懂Grid Layout，我們也可以使用Grid Layout來(lái)還原設(shè)計(jì)稿
• Grid Layout要真正運(yùn)用到實(shí)際項(xiàng)目中可能還要一段時(shí)間（畢竟兼容性問(wèn)題...），但作為一名前端，應(yīng)該與時(shí)俱進(jìn)，保持對(duì)新技術(shù)的好奇心和熱情。

Weex

演講者：勾三股四
描述：關(guān)于Weex的閃電分享

Weex，這個(gè)就不用多說(shuō)了，結(jié)合Vue.js寫Native App

零散的點(diǎn)

• 工作原理

  
  
  
  
  
  

• CSS的相關(guān)

  • 實(shí)現(xiàn)方式：CSS -> JSON -> Native View
  • 默認(rèn)布局：flexbox
  • weex不支持css的繼承
  • Support PostCSS by vue-loader
  • 像傳統(tǒng)的使用 after 畫三角形（你懂我在說(shuō)什么的），在weex中不推薦再使用這種方式（因?yàn)閭鹘y(tǒng)的使用 after 以及定位的這種方法很耗性能），建議使用SVG代替
  • 支持Icon font

  • 至2016.12.17，weex對(duì)css的支持度（有個(gè)工具icon的表示還在開發(fā)當(dāng)中）

    
    
    

Sass & CSS Design Pattern

演講者：廖洧杰
描述：如何設(shè)計(jì)出靈活性高、易維護(hù)的網(wǎng)頁(yè)版型，一直都是大家憧憬的目標(biāo)，這次我會(huì)介紹自己使用 Sass 預(yù)處理器的前端開發(fā)流程，并分享選擇 CSS/Sass 設(shè)計(jì)模式的方案策略。

題外話

一個(gè)月前看了廖老師的一套Sass教程：30天掌握Sass語(yǔ)法 - (1)什麼是SASS？它真的能加速我寫CSS的效率嗎？（注：要翻墻）、Sass & Susy教學(xué)手冊(cè)，然后自己結(jié)合Sass、OOCSS、BEM、SMACSS、張?chǎng)涡竦膠xx.lib.css、pug弄了一套快速寫靜態(tài)頁(yè)面的套路，暫時(shí)還是可以挺好滿足寫靜態(tài)頁(yè)面，維護(hù)代碼起來(lái)也挺方便（自我感覺(jué)有點(diǎn)良好^_）

模式金字塔

• config
  • 全局變量、檔案路徑（指組織Sass文件的目錄結(jié)構(gòu)）
• tools——開發(fā)資產(chǎn)
  • Sass中的各種mixin、Function、Helper，用來(lái)幫你記住各種奇淫怪巧：
    • 文字垂直韻律
    • 垂直居中
    • 多邊形圖形
    • transform
    • 清除浮動(dòng)
    • 限定行數(shù)
    • 各種動(dòng)畫效果
    • Media Query
    • SVG
    • 偽元素圖形
    • 圖片取代文字
    • 時(shí)間速率
    • 字型設(shè)定
    • 單位轉(zhuǎn)換
    • 滾動(dòng)條
    • 瀏覽器兼容方案
• browser——瀏覽器重置
  • reset的方案：meyerweb（樣式清得一干二凈）、Normalize（保留基本樣式）
  • 不過(guò)，話說(shuō)，對(duì)于reset，我一般是用到哪個(gè)標(biāo)簽再reset該標(biāo)簽的默認(rèn)樣式
• Base——預(yù)設(shè)樣式
  • 設(shè)定網(wǎng)站的全局樣式，例如 <a> 的字體顏色、<h1> <h2> <h3> ...的字號(hào)等。通過(guò)一開始就設(shè)定好，就不需要每次用到的時(shí)候再給特定的class。但這一步驟一定要先和設(shè)計(jì)師溝通好。
• elements、components
  • 由元素組成組件，組件構(gòu)成頁(yè)面
  • atomic design--原子設(shè)計(jì)模式

    • 原子組成分子，分子組成結(jié)構(gòu)，結(jié)構(gòu)組成模板，模板組成頁(yè)面

      
      
      
• vendors
  • 各種插件（經(jīng)典的如 Jquery plugin）
  • 對(duì)于后來(lái)迭代的樣式代碼，建議不要一開始就直接修改原來(lái)的文件（在不確定是否會(huì)弄死原來(lái)的代碼的前提下），最好使用 inbox 的方式——也就是不改動(dòng)原來(lái)的代碼，在原來(lái)的代碼后面引入一份新的css文件，用相同的權(quán)重對(duì)之前的樣式進(jìn)行覆蓋。

靠譜的設(shè)計(jì)師應(yīng)該考慮到的細(xì)節(jié)

• Responsive 響應(yīng)式布局
• 圖片格式
• 按鈕等在不同狀態(tài)下的表現(xiàn)形式（點(diǎn)擊、懸浮）...
• 頁(yè)面的反饋方式——異常情況下的提示方案...
• 元素動(dòng)畫速率
• web UI種類

更好用方便的設(shè)計(jì)師工具

sketch（sketch中文網(wǎng)）搭配其插件——zeplin，可以達(dá)到下圖效果（好像是說(shuō)自動(dòng)出現(xiàn)各個(gè)元素的標(biāo)注，十分方便我們前端開發(fā)者）

elements -components-pages

感覺(jué)自己還沒(méi)領(lǐng)會(huì)這種模式，現(xiàn)在自己的做法雖然也有點(diǎn)這種模塊化的感覺(jué)，不過(guò)更多傾向于無(wú)意義的命名方式，并沒(méi)有想這種的，嚴(yán)格分開layout、components、pages。

暫時(shí)在這里收錄一下，很多這些點(diǎn)是需要經(jīng)驗(yàn)的積累，然后有可能某天就頓悟了。

SVG工程化與動(dòng)畫實(shí)踐

演講者：羅正燁、方瀟儀、倪栩生
描述：從使用SVG的四大好處（色彩靚、質(zhì)量高、體積小、動(dòng)畫），給你N個(gè)使用SVG的理由。

一分鐘在項(xiàng)目中使用SVG——羅正燁

SVG的優(yōu)點(diǎn)&缺點(diǎn)

• 優(yōu)點(diǎn)
  • 色彩靚——1600萬(wàn)色
  • 質(zhì)量高——任何縮放
  • 尺寸小——只有png的1/5
  • 動(dòng)畫——炫酷的動(dòng)畫
• 缺點(diǎn)
  • 實(shí)時(shí)渲染耗時(shí)

位圖 & SVG

銳化（百度百科、維基百科）
SVG不單只是讓圖片更清晰，而是更加 “亮”

在Photoshop中不能導(dǎo)出SVG的作圖方法

以下的方法都不能導(dǎo)出SVG，需要更換其它畫法：

• 畫刷效果用鋼筆勾勒
• 層疊效果的顏色
• 對(duì)單個(gè)對(duì)象使用漸變
• 不使用智能對(duì)象
• 使用有限的自帶濾鏡

SVG的最佳使用場(chǎng)景

SVG更適合于扁平化的界面icon以及部分效果，不適合手繪的圖案、復(fù)雜的漸變、用了很多位圖的畫板。

SVG可以輕易解決的問(wèn)題

• 自動(dòng)添加寬高
  
  
• 相對(duì)base64，體積更小
  
  
• 解決Sprite和REM的坑（為什么會(huì)有這個(gè)坑，以及用Sass的解決方案）
  
  
  • 使用svg可以輕易解決上述問(wèn)題
    
    

SVG vs png@3X

雖然渲染相對(duì)png耗時(shí)，但是總體來(lái)說(shuō)性能還是和png接近的，差異幾乎可以忽略。

SVG降級(jí)方式

這里不知道為什么要給 background-image 設(shè)置 none

工具推薦

tmt-workflow
weflow
svgo
flaticon——基于SVG的icon庫(kù)
iconfont——阿里iconfont，同樣有基于SVG

SVG動(dòng)畫——方瀟儀

描線動(dòng)畫

變形

路徑運(yùn)動(dòng)

圖案填充（patterns）

濾鏡（filter）

工具 & 庫(kù)

Greensock MorphSVGPlugin——收費(fèi)
SVG Morpheus——免費(fèi)

談?wù)劸W(wǎng)頁(yè)中的信息——倪栩生

從UI設(shè)計(jì)的角度出發(fā)，給我們講述UI是如何更好地使用網(wǎng)頁(yè)向用戶傳達(dá)“信息”。

信息在網(wǎng)頁(yè)中的形態(tài)

• 意識(shí)形態(tài)： 元信息組成的上下文
• 實(shí)體形態(tài)： 標(biāo)記組成的上下文
• 表現(xiàn)形態(tài)： 樣式組成的上下文

標(biāo)簽的語(yǔ)義化

• 例子：

  • <b> 上下文中的關(guān)鍵詞，側(cè)重指示
  • <i> 上下文中不同的語(yǔ)氣，屬于隱式強(qiáng)調(diào)
  • <strong> 加重強(qiáng)調(diào)
  • <em> 側(cè)重內(nèi)容很可能發(fā)生變化

• 以微信聊天記錄來(lái)講述HTML標(biāo)簽的語(yǔ)義化

  
  
  

• 標(biāo)簽的語(yǔ)義化

  • 讓你不再需要糾結(jié)于使用什么標(biāo)簽來(lái)組織內(nèi)容
  • 更利于HTML文檔的閱讀
  • SEO

• 具體各個(gè)標(biāo)簽的語(yǔ)義，講師說(shuō)在W3C標(biāo)準(zhǔn)中有寫，詳細(xì)的沒(méi)找到，有同學(xué)知道嗎？

從矩陣走入 WebGL 世界

演講者：陳劍鑫
描述：CSS給大家?guī)?lái)了美妙絕倫的前端世界，但是大家是不是完全了解她的美呢？運(yùn)用CSS3的transform我們可以做出各種靈動(dòng)俏皮的網(wǎng)頁(yè)，但是瀏覽器給我們帶來(lái)的絢麗不僅僅是CSS3哦。這次我會(huì)從美麗的CSS3開始，和大家一起感受和創(chuàng)造多彩的前端世界。

總結(jié)一下

講師主要演示了使用WebGL可以做到的各種炫酷效果（3D旋轉(zhuǎn)、變化，AR技術(shù)，Web's VR）。另外，跟我們介紹了矩陣的各種用途（感覺(jué)需要回去惡補(bǔ)高數(shù)和線性代數(shù)）

零散的點(diǎn)

• 如何描述旋轉(zhuǎn)
  • 矩陣 -> matrix3d
  • 歐拉角 -> rotateX | Y | Z （圍繞自己X、Y、Z旋轉(zhuǎn)）
  • 四元數(shù) -> rotate3d （描述物體圍繞任意一個(gè)軸的旋轉(zhuǎn)）
• 矩陣的乘法不符合變換律
  • tip：“從右往左理解”
    在線Demo：
    transform: rotate(1turn) translateX(400px); ——從右往左看，先進(jìn)行平移，在平移的過(guò)程中進(jìn)行旋轉(zhuǎn)
    transform: translateX(400px) rotate(1turn);——從右往左看，先進(jìn)行旋轉(zhuǎn)，在旋轉(zhuǎn)的過(guò)程中進(jìn)行平移

CSS animation && CSS: The secret drawing tool

演講者：Wenting Zhang
描述：CSS可不僅僅是簡(jiǎn)簡(jiǎn)單單的布局語(yǔ)言，她還是繪畫和動(dòng)畫雙料小能手！512個(gè)極簡(jiǎn)風(fēng)格的圖標(biāo)都全部用CSS實(shí)現(xiàn)，然后再細(xì)細(xì)打磨動(dòng)畫。來(lái)自Adobe Typekit的用戶體驗(yàn)設(shè)計(jì)師Wenting Zhang將細(xì)細(xì)講述CSS的隱藏繪畫功能和高級(jí)動(dòng)畫技巧。漂亮極簡(jiǎn)的CSS icon設(shè)計(jì)與描繪，讓CSS進(jìn)階學(xué)習(xí)不再枯燥。那些不廣為人知的CSS高階技巧，讓網(wǎng)頁(yè)界面設(shè)計(jì)活起來(lái)！

資源

css-mono ——一款很好看的字體（其github倉(cāng)庫(kù)）
講師Twitter
講師Github

現(xiàn)場(chǎng)顯示前置知識(shí)

• 除了 <input> 一般的HTML標(biāo)簽都具備 before 以及 after 偽元素；
• box-shadow 可以定義為任意顏色，并且，同一個(gè)元素可以投射出任意多個(gè)不同box-shadow；
• 矩形的四個(gè)頂點(diǎn)可以有不統(tǒng)一的 border-radius ，我么可以一一分別定義。并且，每個(gè)頂點(diǎn)的兩條邊（指X方向和Y方向的兩條邊）都可以有不同的border-radius。關(guān)于border-radius可以參考：CSS3的圓角Border-radius、border-radius；
• 矩形的四條border，不一定永遠(yuǎn)都是一個(gè)長(zhǎng)條矩形的形狀。甚至，它們?cè)谡Ｇ闆r下是一個(gè)梯形的形狀，在我們改變這條邊相鄰的另外兩條邊的參數(shù)時(shí)，它的形狀會(huì)相應(yīng)得到改變。當(dāng)我們?cè)谶@條邊的兩個(gè)頂點(diǎn)加一些border-radius圓角值的時(shí)候，這個(gè)形狀還會(huì)有更奇異不可預(yù)測(cè)的形變。我們可以通過(guò)這兩個(gè)性質(zhì)，探索出很多意想不到的形狀。
  
  

現(xiàn)場(chǎng)展示Demo

• 畫胡子

• 其前置知識(shí)（除了上述的幾個(gè)之外，還補(bǔ)充了動(dòng)畫）

  • CSS變量：深入學(xué)習(xí)CSS自定義屬性（CSS變量）、CSS中的變量使用詳解
  • currentColor：深入學(xué)習(xí)CSS自定義屬性（CSS變量）--第一個(gè)CSS變量