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

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


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

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

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

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

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

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

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

CSS 的 display 屬性值對(duì)應(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 會(huì)結(jié)合使用，小孩子才做選擇題，成年人全要了。

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

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

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

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

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

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

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

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

例如：

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

編譯后生成的代碼

a {
    color: red;
}

所以，網(wǎng)頁上我們無法對(duì) $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)變化，后面張?chǎng)涡竦淖h題中也有用到這一點(diǎn)。
具體可以參考大漠老師這篇文章如何通過CSS自定義屬性給CSS屬性切換提供開關(guān)。

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

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

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

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

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

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