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

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


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

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

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

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

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

陳慧晶老師講到，之所以縱向比橫向難排是因?yàn)?，網(wǎng)頁一開始是為了展示文字所產(chǎn)生。隨著瀏覽器的發(fā)展，才慢慢開始支持彈性盒子、網(wǎng)絡(luò)布局、盒模型。

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

CSS 的 display 屬性值對應(yīng)不同的顯示類型，下面是我從規(guī)范里面復(fù)制來的：

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

內(nèi)部顯示模型的值：flow,?flow-root,?table,?flex,?grid,?ruby?

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

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

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

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

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

在 css-tricks 中使用 SVG 比較多的地方是圖標(biāo)，大漠老師從性能的角度分析了，圖標(biāo)從小圖片到 CSS Sprites 然后到 icon-font，后來使用 SVG，到 SVG Sprites 的演變，分析了每種方案的優(yōu)劣。
QA環(huán)節(jié)有一個人問，現(xiàn)在 SVG 這種格式出來以后，還有其他格式的圖片，是否其他格式就不需要再用了，SVG和WebP哪個好？其實(shí)，每種圖片格式解決了不同的問題，SVG 是一種矢量圖，解決一些簡單的幾何圖形可以解決的圖像表達(dá)問題，WebP、JPG、PNG等是一基于像素形成的位圖，可以展示一些顏色和圖形比較復(fù)雜的圖像信息。其實(shí)他們的定位不一樣。

在不同的瀏覽器或者系統(tǒng)版本下，滾動條的樣式其實(shí)是不同的，滾動條樣式在幾年前就已經(jīng)可以使用了，只不過需要加 -webkit- 前綴，所以目前只支持 chrome 和 safari 瀏覽器，目前不支持手機(jī)上的 safari。

比如在 banner 輪滾這種場景下，我們希望自動停到對應(yīng)的位置，大漠老師還舉了一個特別有意思的人物換裝的demo。

大漠老師多次強(qiáng)調(diào)，這叫做 CSS 自定義屬性，不叫 CSS 變量。在 LESS 和 SCSS 中，也實(shí)現(xiàn)了類似的概念，但是在 LESS/SCSS 中，這真是一個變量，先定義了一個變量，在后續(xù)的 LESS/SCSS 中使用，但是這樣的問題在于，在編譯以后，這些變量對應(yīng)的值就固定到了 CSS 代碼中，不會再“變”。

例如：

/* SCSS */ 
$color: red;
a { color: $color; }

編譯后生成的代碼

a {
    color: red;
}

所以，網(wǎng)頁上我們無法對 $color 進(jìn)行修改。

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 屬性設(shè)置成了 var(--color)，所以，body 的 color 屬性是 red；

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

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

其實(shí)是基于 CSS Paint API 來定義 CSS 自定義屬性。使用一個類似 Canvas2D API 的上下文，可以直接繪制圖形，大漠老師的demo是將 JS 代碼寫在了 CSS 自定義屬性后面，然后用 JS 去獲取了 CSS 自定義屬性，拿到了這個方法的字符串，然后用 eval 去執(zhí)行了，這樣顯得像是在 CSS 里面寫了 JS。不過這樣寫也是一個思路，因?yàn)槲覀兛梢灾苯釉趯傩院竺婷娑x屬性的樣式，看起來也是合理的，但是如果用來渲染的 JS 量比較大，并不是一個好的方案。其實(shí)我們可以直接將用于繪制的 JS 代碼寫在 JS 文件中。

有了 CSS Paint API 我們用 CSS 做的事情有可以變得更多了，這是一個很令人興奮的 API！

看到這里，大漠老師再三強(qiáng)調(diào)的，沒有 CSS 變量，只有 CSS 自定義屬性，是非常合理的。我們其實(shí)是定義了一個 CSS 屬性，并且給于它一個值，真正用到它的時候才是真正描述這個值去做什么事情的時候，用 var() 函數(shù)，它就變成了一個變量，用 paint() 函數(shù)，它就變成了 CSS Houdini.

陳慧晶老師全篇都在講 Web 布局，大漠老師講了一些 Web Layout 相關(guān)的一些屬性和函數(shù)，并且指出了一些關(guān)于Web Layout 的一些誤區(qū)和社區(qū)爭論。

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

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

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

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

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

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

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

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

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

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

放一個現(xiàn)場的視頻感受一下，在文末大會官網(wǎng)上可以看全部視頻。
cssconf.mp4

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

我們使用 float 可以進(jìn)行文字環(huán)繞圖片、多列布局，但是現(xiàn)在我們已經(jīng)很少用 float 了。大家已經(jīng)開始使用更新的布局方案。但是如果想實(shí)現(xiàn)圖文混排 float 還是少不了的。

如果想讓文字根據(jù)圖片內(nèi)容進(jìn)行排版，單單只用 float 是不夠的。需要配合 CSS Shapes 實(shí)現(xiàn)。

網(wǎng)頁里面有個打印的功能，可以針對打印狀態(tài)下的頁面進(jìn)行樣式設(shè)置，里面拓展了一些和打印相關(guān)的屬性。

更多內(nèi)容可以參考?https://www.pagedmedia.org/

勾股也講了一些滾動條相關(guān)的內(nèi)容。

Adobe, Apple, Google, Microsoft 4大巨頭企業(yè)聯(lián)合宣布了全新的字體規(guī)范Variable Font，字體在設(shè)計(jì)過程中可以提供出一些參數(shù)，CSS 中可以對參數(shù)進(jìn)行配置。

以后可以使用 CSS 來設(shè)置頁面的 viewport 啦！

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

我都不用去總結(jié)啦！對某個點(diǎn)感興趣的話，可以看一下他的 Slide，每一個點(diǎn)，都對應(yīng)了一些解釋和實(shí)踐。

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

使用了幾個簡單的案例，總結(jié)出在做 CSS 動畫時候，如何讓多個動畫聯(lián)動起來，如何實(shí)現(xiàn)循環(huán)時間統(tǒng)一。

講了一個復(fù)雜案例的實(shí)現(xiàn)，他做的動畫很多都是他自己來設(shè)計(jì)的，所以在實(shí)現(xiàn)動畫的設(shè)計(jì)理論上也有一些介紹。

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

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