CSS 魔法師（技術周刊 2018-03-02）

今天是元宵節，猜燈謎，吃元宵，又到了一年一度的朋友圈裡的成雙成對曬元宵的好日子了。不禁想到古人沒有朋友圈怎麼曬呢？北宋的大文學家歐陽修就睡不著啊，成宿成宿的寫詩，於是有了那句「月上柳梢頭，人約黃昏後」的千古名句了。不知今夜的你是否也是「不見去年人，淚濕春衫袖」呢？也罷，也許那個「去年人」還沒找到，還是看看周刊聊以慰藉吧??。

前端快爆

• webpack 4 正式發布，代號為「Legato」。新版本構建性能大幅提升，同時帶來了多項重要更新：零配置啟動、支持 ESM 和 JSON 形式的模塊類型、支持 WebAssembly、移除 CommonsChunkPlugin 取而代之的是 optimization.splitChunks 和 optimization.runtimeChunk、依賴的 node.js 環境升級為 6.11.5+。此外，新增了必選的模式選項 「production」 與 「development」，點此以了解更多副作用。

老絲點評：感謝 parcel 實現了 webpack 的偉大復興。(譯文）

• Firefox 60 的開發者工具實現了 CSS 自定義屬性聯想功能，輸入 var(- 後可以自動聯想。

1422635 - Show variable auto-completion in inspectorbugzilla.mozilla.org

老絲點評：隨著 CSS 自定義屬性的流行，這個功能會很有用。

• WOFF File Format 2.0 正式成為 W3C 推薦（W3C Recommendation）標準，新標準支持了整個 TrueType 和 OpenType 規範，包括可變字體、多彩字體、字體集合等。同時還採用了 Brotli 形式的熵編碼，針對部分字體做了預處理，最終得到比 1.0 平均高 13.5% ~ 27% 的壓縮比。

WOFF 2.0, the inside scoopwww.w3.org

老絲點評：多彩 iconfont 不是夢。

• Chrome 66 的開發者工具中，支持在網路面板把請求觸發的部分 JS 文件黑盒化以查看真正的資源載入觸發點，在設備模擬模式中允許自適應縮放，對默認樣式表的修改可以持久化了。更棒的是可以在預覽視圖看到到渲染後的 HTML 頁面或者格式化後的代碼。

https://developers.google.com/web/updates/2018/02/devtoolsdevelopers.google.com

老絲點評：其他瀏覽器的網路調試功能太弱了。

• npm 5.7.1 發布，支持了npm ci命令，此命令將讀取 package-lock.json 中的內容並安裝，在 angular-cli 中測試達到了 3 倍於 npm install 的速度提升；package-lock.json 的行為也修正為更符合直覺的方式：它由 npm install 構建，並能在 package.json 更新時由 npm install 觸發更新，用於 npm ci 進行快速構建。

https://medium.com/@tomastrajan/how-to-speed-up-continuous-integration-build-with-new-npm-ci-and-package-lock-json-7647f91751amedium.com

優秀 Demo

• 使用 CSS 變數創建的 Hover 效果

• Animated Fragment Slideshow

專題

CSS 魔法師（Houdini）

Houdini 是一個新的W3C工作組，該小組制定了一系列規範，使瀏覽器開放了 CSS 底層渲染相關的 API，供開發者更加方便靈活的擴展 CSS 功能。

• 規範：https://drafts.css-houdini.org/
• 瀏覽器實現進度：https://ishoudinireadyyet.com/

文章

• Houdini: Demystifying CSS
• Houdini：CSS 領域最令人振奮的革新（譯文）
• 使用 CSS Houdini 繪製平滑圓角（譯文）
• CSS 魔術師 Houdini API 介紹

Demo 合集

• CSS Houdini Experiments（@iamvdo）
• Google 官方 Demo

分享

• Houdini: Demystifying CSS（Google Developers）
• Houdini & Polyfilling CSS（CSS Day 2017-06-15）
• CSS Houdini 實戰（一絲）

本期編輯 @一絲， 審閱：humphry