摘要：剖析新版，為你所用大漠第二個議題是大漠老師的，大漠老師是的站長，著有圖解核心技術與案例實戰。自定義屬性大漠老師多次強調，這叫做自定義屬性，不叫變量。

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


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

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

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

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

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

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

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

CSS 的 display 屬性值對應不同的顯示類型，下面是我從規范里面復制來的：

外部顯示模型的值：block,?inline,?run-in

內部顯示模型的值：flow,?flow-root,?table,?flex,?grid,?ruby?

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

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

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

最后陳慧晶老師問了大家一個問題，我們做的在所有瀏覽器上顯示效果必須是一樣的嗎？答案是否定的，不同的瀏覽器顯示的樣式可能不一樣，我們可以針對不同尺寸的瀏覽器進行不同的布局，當然我們也可以針對不同 CSS 支持度的瀏覽器進行不同的降級處理。

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

在 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 屬性一樣，可以被繼承，也有作用域的概念。

  Hello,
  

    CSS
    World!
  

body {
    --color: red;
  color: var(--color);
}
.box {
  --color: blue;
}
span {
  color: var(--color);
}

demo 地址：https://codepen.io/fanmingfei/pen/mgJOvP

body 的 --color 屬性red，并且 body 的 color 屬性設置成了 var(--color)，所以，body 的 color 屬性是 red；

.box 沒有設置 color，所以繼承了 body 的紅色，但是設置 --color 為 blue，所以 .box 里面使用 var(--color) 獲取到的是 blue。

基于自定義屬性和 CSS 的一些特性，我們可以做到以前 CSS 做不到的一些條件判斷的能力，例如條件判斷，其實是基于自定義屬性的變化引發的狀態變化，后面張鑫旭的議題中也有用到這一點。
具體可以參考大漠老師這篇文章如何通過CSS自定義屬性給CSS屬性切換提供開關。

其實是基于 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 布局，大漠老師講了一些 Web Layout 相關的一些屬性和函數，并且指出了一些關于Web Layout 的一些誤區和社區爭論。

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

最后講了一些零散的點，有一些在項目里都可以用到，我們的項目也有用到過~而且都是一些小技巧，挺有意思的。

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

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

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

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

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

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

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

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

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

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

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

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

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

更多內容可以參考?https://www.pagedmedia.org/

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

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

以后可以使用 CSS 來設置頁面的 viewport 啦！

這個議題提到了關于 CSS 動畫的一些知識。
中文版Slide：https://birtles.github.io/cssconf2019/index.zh.html
英文版Slide：https://birtles.github.io/cssconf2019/#/title

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

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

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

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

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

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