《第五屆中國CSSConf開發者大會》參會總結

前言

對於我來說，雖然作前端那麼多年，但對 CSS 的探索很是少，不少 CSS 知識仍是在畢業以前積累下來。揣着一本《精通CSS:高級Web標準解決方案(第二版)》（如今出第三版了，這是我在 CSS 道路上的啓蒙書）在前端路上走了這麼幾年。此次懷着對 CSS 的僞熱愛，狠了狠心買了一張 CSSConf 的票上了車。

我我的常常會參加一些前端的會議，參加大會主要是能看看業界都在用什麼方案，處理一些什麼問題，雖然這些在會後都會有分享，可是實際體感仍是不同的，其實這也不是最主要緣由，更重要的是能在會議上認識一些朋友，相互交流，聽一些解決方案和他們遇到的問題，或許之後就是同事了。css

開場

開場的時候，嚴肅而又詼諧主持人，周裕波，作了開場白，描述了這多是最後一次辦 CSSConf 了，其實我是很不解的，只是說行業裏有一些不一樣的聲音，並無具體說明緣由，其實會後我問了一下他，爲何之後再也不辦 CSSConf 了，他回答找到好的主題比較難，你們參會意願不強。html

後面的議題就正式開始了。前端

新時代 CSS 佈局 - 陳慧晶

Slide：www.chenhuijing.com/slides/53-c…
大會第一個議題正式開始以前，講師上臺準備 Slide，我就想這個講師好娘啊，難道是女的麼？我還發消息給朋友，說這個講師好娘哦，朋友說：「她是個女的吧！」哈哈，真是誤會了誤會了，跟陳慧晶老師遠程道個歉。陳慧晶老師曾經是個專業籃球運動員，後來慢慢的轉向了 CSS 技術領域，在佈局和中文排版方面研究很是深刻。css3

陳慧晶老師主要講解了一些關於最新的 CSS 佈局方面的知識，細節講的比較多，講解了一些屬性，並作了一些演示，讓咱們可以很是直觀的感覺到各個屬性的效果。git

CSS 顯示模塊

陳慧晶老師講到，之因此縱向比橫向難排是由於，網頁一開始是爲了展現文字所產生。隨着瀏覽器的發展，才慢慢開始支持彈性盒子、網絡佈局、盒模型。github

目前已經有不少關於佈局的屬性，一般佈局咱們是使用配置 display 屬性，這個屬性有不少可選的值，分爲內部顯示模型和外部顯示模型。
web

CSS 的 display 屬性值對應不一樣的顯示類型，下面是我從規範裏面複製來的：chrome

外部顯示模型的值：block, inline, run-in
內部顯示模型的值：flow, flow-root, table, flex, grid, ruby

後面講了一些 CSS flex 佈局的具體用法和現象，這些在網上就能夠學獲得，不過我感受 grid 佈局很神奇。flex 和grid 會結合使用，小孩子才作選擇題，成年人全要了。瀏覽器

之內容爲主的尺寸計算方式

靈活性尺寸

這種佈局方案比較靈活，能夠優先使用某個尺寸，達到某個臨界點纔會變化，或者固定某個尺寸不變化。描述起來可能有些困難，能夠參考陳慧晶老師的 Slide，裏面有視頻。ruby

舊版瀏覽器的支持

舊版瀏覽器使用 @supports() 方案，能夠查看當前瀏覽器是否支持該屬性。

最後陳慧晶老師問了你們一個問題，咱們作的在全部瀏覽器上顯示效果必須是同樣的嗎？答案是否認的，不一樣的瀏覽器顯示的樣式可能不同，咱們能夠針對不一樣尺寸的瀏覽器進行不一樣的佈局，固然咱們也能夠針對不一樣 CSS 支持度的瀏覽器進行不一樣的降級處理。

剖析css-tricks新版，爲你所用 - 大漠

第二個議題是大漠老師的，大漠老師是 www.w3cplus.com 的站長，著有《圖解CSS3：核心技術與案例實戰》。他的議題是對最新版的 css-tricks 進行剖析，看看最新版 css-tricks 都用了哪些有意思的東西。大漠老師也提到了一些無障礙化的事情，講到 css-trickers 使用黑色或許是出於對無障礙化的考慮，其實這一塊也是目前業界比較關注的一方面。大漠老師已經將演講內容發表到本身的博客：www.w3cplus.com/css/css-css…，感興趣能夠到這裏來看一下。下面，我可能會根據我本身的理解來拓展一些其餘的想法。

SVG的使用

在 css-tricks 中使用 SVG 比較多的地方是圖標，大漠老師從性能的角度分析了，圖標從小圖片到 CSS Sprites 而後到 icon-font，後來使用 SVG，到 SVG Sprites 的演變，分析了每種方案的優劣。
QA環節有一我的問，如今 SVG 這種格式出來之後，還有其餘格式的圖片，是否其餘格式就不須要再用了，SVG和WebP哪一個好？其實，每種圖片格式解決了不一樣的問題，SVG 是一種矢量圖，解決一些簡單的幾何圖形能夠解決的圖像表達問題，WebP、JPG、PNG等是一基於像素造成的位圖，能夠展現一些顏色和圖形比較複雜的圖像信息。其實他們的定位不同。

滾動特性

滾動條樣式

在不一樣的瀏覽器或者系統版本下，滾動條的樣式實際上是不一樣的，滾動條樣式在幾年前就已經可使用了，只不過須要加 -webkit- 前綴，因此目前只支持 chrome 和 safari 瀏覽器，目前不支持手機上的 safari。

滾動捕捉

好比在 banner 輪滾這種場景下，咱們但願自動停到對應的位置，大漠老師還舉了一個特別有意思的人物換裝的demo。

自定義屬性

大漠老師屢次強調，這叫作 CSS 自定義屬性，不叫 CSS 變量。在 LESS 和 SCSS 中，也實現了相似的概念，可是在 LESS/SCSS 中，這真是一個變量，先定義了一個變量，在後續的 LESS/SCSS 中使用，可是這樣的問題在於，在編譯之後，這些變量對應的值就固定到了 CSS 代碼中，不會再「變」。

例如：

/* SCSS */ 
$color: red;
a { color: $color; }
複製代碼

編譯後生成的代碼

a {
    color: red;
}
複製代碼

因此，網頁上咱們沒法對 $color 進行修改。

CSS 自定義屬性和一些普通 CSS 屬性同樣，能夠被繼承，也有做用域的概念。

<body>
  Hello,
  <div class="box">
    CSS
    <span>World!</span>
  </div>
</body>
複製代碼

body {
    --color: red;
  color: var(--color);
}
.box {
  --color: blue;
}
span {
  color: var(--color);
}
複製代碼

demo 地址：codepen.io/fanmingfei/…

body 的 --color 屬性red，而且 body 的 color 屬性設置成了 var(--color)，因此，body 的 color 屬性是 red；

.box 沒有設置 color，因此繼承了 body 的紅色，可是設置 --color 爲 blue，因此 .box 裏面使用 var(--color) 獲取到的是 blue。

條件判斷

基於自定義屬性和 CSS 的一些特性，咱們能夠作到之前 CSS 作不到的一些條件判斷的能力，例如條件判斷，實際上是基於自定義屬性的變化引起的狀態變化，後面張鑫旭的議題中也有用到這一點。
具體能夠參考大漠老師這篇文章如何經過CSS自定義屬性給CSS屬性切換提供開關。

JS in CSS (Houdini)

實際上是基於 CSS Paint API 來定義 CSS 自定義屬性。使用一個相似 Canvas2D API 的上下文，能夠直接繪製圖形，大漠老師的demo是將 JS 代碼寫在了 CSS 自定義屬性後面，而後用 JS 去獲取了 CSS 自定義屬性，拿到了這個方法的字符串，而後用 eval 去執行了，這樣顯得像是在 CSS 裏面寫了 JS。不過這樣寫也是一個思路，由於咱們能夠直接在屬性後面面定義屬性的樣式，看起來也是合理的，可是若是用來渲染的 JS 量比較大，並非一個好的方案。其實咱們能夠直接將用於繪製的 JS 代碼寫在 JS 文件中。

有了 CSS Paint API 咱們用 CSS 作的事情有能夠變得更多了，這是一個很使人興奮的 API！

其餘

看到這裏，大漠老師再三強調的，沒有 CSS 變量，只有 CSS 自定義屬性，是很是合理的。咱們實際上是定義了一個 CSS 屬性，而且給於它一個值，真正用到它的時候纔是真正描述這個值去作什麼事情的時候，用 var() 函數，它就變成了一個變量，用 paint() 函數，它就變成了 CSS Houdini.

Web Layout

陳慧晶老師全篇都在講 Web 佈局，大漠老師講了一些 Web Layout 相關的一些屬性和函數，而且指出了一些關於Web Layout 的一些誤區和社區爭論。

混合模式和濾鏡

簡單講解了一些濾鏡的效果和一些屬性，並且這些功能已經能夠在線上跑了，我在去年項目中已經用過 CSS 濾鏡了。

其餘(^_^)

最後講了一些零散的點，有一些在項目裏均可以用到，咱們的項目也有用到過~並且都是一些小技巧，挺有意思的。

CSS創意與視覺表現 - 張鑫旭

張鑫旭老師，常常會在搜 CSS 問題的時候搜到他的博客，張鑫旭-鑫空間-鑫生活，他寫文章有時候特別幽默，好比《理解 CSS3 transform 中的 Matrix - 矩陣》中。

張老師此次分享了不少的很是實用的案例。

CSS 屬性放在那裏，具體怎麼用？有些人真的可使用一些屬性加上一些思惟作出很好的效果，這個多是要看天分的。此次大會混入了一個產品經理，她提了一個問題，如何提高前端的這種創意思惟，張鑫旭老師給出的答案是，能夠招聘新的符合你要求的前端，這種創意不是每一個人都有的，業界有不少優秀的做品已經出來了，你們不須要本身去研究，直接用現有的就好。

張鑫旭老師的 Slide 裏面每一個效果都有demo，感興趣的話能夠直接下載查看《CSS 創意與視覺表現.pdf》

其實有不少實現佈局、特效的技巧，都是一些大師發明出來的，咱們能夠在項目中使用這些技巧，CSS 提供了不少屬性，達到效果的方式不是惟一的，咱們在平常工做中，其實能夠多去思考這個效果如何實現，可能會發明出本身的奇淫技巧。

CSS 生成藝術 - 袁川

Slide: yuanchuan.name/talk/genera…
看了這個議題，非常震撼，袁川老師把瀏覽器當作了他的畫板，CSS 當成他的畫筆，生成了不少震撼的藝術做品，整個議題過程當中，會場屢次響起掌聲。具體能夠看 Slide，也能夠看他的Codepen。

幾張圖片

上面這兩張圖，都是用逗號作的。

CSS 有着自然生成樹的特性。

現場視頻

放一個現場的視頻感覺一下，在文末大會官網上能夠看所有視頻。
cssconf.mp4

你不知道的五個 CSS 新特性 - 勾三股四

勾股介紹了幾個 CSS 的新特性，感受實用性沒有那麼好，還有不少在草案階段。勾股的 Slide 地址：jinjiang.github.io/slides/five…

float

float & CSS Shapes

咱們使用 float 能夠進行文字環繞圖片、多列布局，可是如今咱們已經不多用 float 了。你們已經開始使用更新的佈局方案。可是若是想實現圖文混排 float 仍是少不了的。

若是想讓文字根據圖片內容進行排版，單單隻用 float 是不夠的。須要配合 CSS Shapes 實現。

其餘效果

page

網頁裏面有個打印的功能，能夠針對打印狀態下的頁面進行樣式設置，裏面拓展了一些和打印相關的屬性。

更多內容能夠參考 www.pagedmedia.org/

scroll

勾股也講了一些滾動條相關的內容。

font

Adobe, Apple, Google, Microsoft 4大巨頭企業聯合宣佈了全新的字體規範Variable Font，字體在設計過程當中能夠提供出一些參數，CSS 中能夠對參數進行配置。

viewport

之後可使用 CSS 來設置頁面的 viewport 啦！

CSS動畫你應該知道的10件事 - Brian Birtles

這個議題提到了關於 CSS 動畫的一些知識。
中文版Slide：birtles.github.io/cssconf2019…
英文版Slide：birtles.github.io/cssconf2019…

我都不用去總結啦！對某個點感興趣的話，能夠看一下他的 Slide，每個點，都對應了一些解釋和實踐。

CSS TIME - 陳在真

陳在真老師的 CSS TIME 這個話題，介紹了一些他作了不少 CSS 動畫後總結的一些方法論。後面我和他有過一些交流，我在想，是否能有什麼工具能夠按照他的這種方法論產生的規則設計動畫，直接產生線上可用的 CSS 動畫效果，其實這也是從工程化上要考慮的事情。

簡單案例

使用了幾個簡單的案例，總結出在作 CSS 動畫時候，如何讓多個動畫聯動起來，如何實現循環時間統一。

講了一個複雜案例的實現，他作的動畫不少都是他本身來設計的，因此在實現動畫的設計理論上也有一些介紹。

各類設備下的時間

在不一樣的設備下，好比 pad、手機、穿戴設備，用戶對時間的體感不一樣，一個動畫使用的時間多是不一樣的。

後語

這裏只是按照個人理解和記憶總結了一些在大會上的所見所聞，列出了各位講師分享的一些點，若是你們對哪些點感興趣能夠深刻到 Slide 中學習。大會視頻後續也會放出，能夠進入大會官網中國第五屆 CSS 開發者大會查看議題、Slide 以及視頻。