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

明非發表於2019-04-10
CSS

前言

對於我來講，雖然做前端那麼多年，但對 CSS 的探索非常少，很多 CSS 知識還是在畢業之前積累下來。揣著一本《精通CSS:高階Web標準解決方案(第二版)》（現在出第三版了，這是我在 CSS 道路上的啟蒙書）在前端路上走了這麼幾年。這次懷著對 CSS 的偽熱愛，狠了狠心買了一張 CSSConf 的票上了車。


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

開場

開場的時候，嚴肅而又詼諧主持人，周裕波，做了開場白，描述了這可能是最後一次辦 CSSConf 了，其實我是很不解的，只是說行業裡有一些不同的聲音，並沒有具體說明原因，其實會後我問了一下他，為什麼以後不再辦 CSSConf 了，他回答找到好的主題比較難，大家參會意願不強。

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

新時代 CSS 佈局 - 陳慧晶

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

陳慧晶老師主要講解了一些關於最新的 CSS 佈局方面的知識，細節講的比較多，講解了一些屬性，並做了一些演示，讓我們能夠非常直觀的感受到各個屬性的效果。

CSS 顯示模組

陳慧晶老師講到，之所以縱向比橫向難排是因為，網頁一開始是為了展示文字所產生。隨著瀏覽器的發展，才慢慢開始支援彈性盒子、網路佈局、盒模型。

目前已經有很多關於佈局的屬性，通常佈局我們是使用配置 display 屬性，這個屬性有很多可選的值，分為內部顯示模型和外部顯示模型。

image.png

CSS 的 display 屬性值對應不同的顯示型別，下面是我從規範裡面複製來的：

後面講了一些 CSS flex 佈局的具體用法和現象，這些在網上就可以學得到，不過我感覺 grid 佈局很神奇。flex 和grid 會結合使用，小孩子才做選擇題，成年人全要了。

以內容為主的尺寸計算方式

image.png

靈活性尺寸

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

舊版瀏覽器的支援

舊版瀏覽器使用 @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 - 矩陣》中。

image.png

張老師這次分享了很多的非常實用的案例。

image.png

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

張鑫旭老師的 Slide 裡面每個效果都有demo，感興趣的話可以直接下載檢視 《CSS 創意與視覺表現.pdf》

其實有很多實現佈局、特效的技巧，都是一些大師發明出來的，我們可以在專案中使用這些技巧，CSS 提供了很多屬性，達到效果的方式不是唯一的，我們在日常工作中，其實可以多去思考這個效果如何實現，可能會發明出自己的奇淫技巧。

CSS 生成藝術 - 袁川

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

幾張圖片

image.png

image.png

image.png

image.png

image.png

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

image.png

CSS 有著天然生成樹的特性。

現場視訊

放一個現場的視訊感受一下，在文末大會官網上可以看全部視訊。
cssconf.mp4

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

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

float

float & CSS Shapes

我們使用 float 可以進行文字環繞圖片、多列布局，但是現在我們已經很少用 float 了。大家已經開始使用更新的佈局方案。但是如果想實現圖文混排 float 還是少不了的。

image.png

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

其他效果

image.png

image.png

page

網頁裡面有個列印的功能，可以針對列印狀態下的頁面進行樣式設定，裡面擴充了一些和列印相關的屬性。

image.png

更多內容可以參考 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…

image.png

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

CSS TIME - 陳在真

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

簡單案例

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

講了一個複雜案例的實現，他做的動畫很多都是他自己來設計的，所以在實現動畫的設計理論上也有一些介紹。

各種裝置下的時間

在不同的裝置下，比如 pad、手機、穿戴裝置，使用者對時間的體感不同，一個動畫使用的時間可能是不同的。

image.png

後語

這裡只是按照我的理解和記憶總結了一些在大會上的所見所聞，列出了各位講師分享的一些點，如果大家對哪些點感興趣可以深入到 Slide 中學習。大會視訊後續也會放出，可以進入大會官網中國第五屆 CSS 開發者大會檢視議題、Slide 以及視訊。

相關文章