CSS Grid Layout（技術周刊 2018-04-20）

來自專欄 阿里媽媽前端快爆

老絲機上周有點忙不過來，周刊延遲到這周一發布了，差點翻車。為了回饋各位，特請來女神鎮場。

前端快爆

• Redux 4 正式發布，新版隱藏了之前的 ActionTypes 介面、在 reducer 中不允許調用 getState 或 subscribe、放棄了對 IE11 以前瀏覽器的支持。了解更多不兼容更新。

reactjs/redux?

github.com

Humphry 點評: 由於大家用 Redux 或多或少會依賴其他社區方案，因此升級可能還需要再等到生態里的 redux-saga/redux-thunk 等更新了。

• Chrome 開發者工具中現在 CSS 自定義屬性可以顯示顏色預覽了，同時 Hover 的時候還可以顯示實際的值。

https://developers.google.com/web/updates/2018/04/devtools?

developers.google.com

老絲點評：有了CSS 自定義屬性，我好像還是一個配置工程師 ??。

• 4月10號，W3C官方宣布：FIDO（線上快速身份驗證聯盟）與 W3C 聯合取得 Web 認證標準的里程碑式進展，在全球實現更簡單更強大的 Web 認證方式。FIDO2 標準化工作的完成，W3C WebAuthn 標準的推進，以及瀏覽器供應商對實現這一標準的承諾，都預示著一個新時代的開啟，一個為所有互聯網用戶提供普適的、硬體支持FIDO身份驗證保護的時代。

https://mp.weixin.qq.com/s/enjl4i-3naF0iOdZMfrYuw?

mp.weixin.qq.com

• Vue 驅動的靜態網站生成器 VuePress 正式發布，基於 Markdown 語法來寫作，支持目錄、代碼高亮等更多 Markdown 擴展語法。

VuePress?

vuepress.vuejs.org

老絲點評：Vue 作者親自操刀，值得一試。

• Chrome Canary 已經實現了 CSS Layout API 的一個雛形，該 API 可以實現自定義布局，比如瀑布流，Demo：

yisibl/houdini-demo?

github.com https://www.zhihu.com/video/971835050774405120

老絲點評：《CSS 有哪些不能實現的布局》「Xiaogege and Xiaojiejie」 了解一下？

優秀 Demo

• CSS 實現內切圓角 （譯文）

• CSS 氣泡進度條

專題——CSS Grid Layout

文檔

• CSS Grid 完整指南(css-tricks.com)
• Grid Layout 基本概念
• 學習 CSS Grid（Jonathan Suh）
• CSS Grid Layout (MDN官方手冊)

文章

• Best Practices with CSS Grid Layout
• An introduction to the `fr` CSS Unit
• Deep Dive into Grid Layout Placement
• CSS Grid Layout and Positioned Items
• Getting rid of "grid-" Prefix on CSS Grid Layout Gutter Properties
• 帶你入門 CSS Grid 布局
• 漸進增強的 CSS 布局：從浮動到 Flexbox 到 Grid

討論

• 前端未來頁面布局發展方向是 Flexbox 還是 Grid？
• 對於 CSS 布局中 Grid Layout 和 Box Alignment 兩大模塊有何看法？

示例

• CSSGrid.io（Wes Bos）
• Grid by Example（Rachel Andrew）
• Intro to CSS Grid（Jen Simmons）
• CSS Grid 元素周期表（Dudley Storey）
• A game for learning CSS grid（Codepip)

分享

• CSS Grid Layout | Frontend NE: Slides
• Designing with Grid (Jen Simmons)
• Start Using CSS Grid Layout Today (Rachel Andrew)
• CSS Grid Layout by Afonso Pacifer (in Portuguese)

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

推薦閱讀：