前端技術週刊 2018-10-22：PostCSS

前端技術週刊 2018-10-22

前端快爆

• Chrome 70 已發佈，Credential Management API 中新支持了公鑰證書，Web Worker 支持 name 參數（此前已在 Firefox、Edge、Safari 中支持），實驗性支持了 Web Bluetooth 和 Intervention Reports，支持利用 PWA 技術製做桌面端 App。🔗

點評：足見前端對各個客戶端的滲透能力。

• 在 Windows 10 2018年10月的更新中，Edge 新支持了以下特性：Web Authentication 再也不須要前綴、媒體自動播放有面向用戶的 UI 進行控制、Service Worker 的 fetchEvent() 等接口、CSS Mask（帶 -webkit- 的版本也支持）、WebP 等等。🔗
• 在 Chrome 率先支持 WebP 圖片格式八年以後，WebP 在 EdgeHTML 18 中已被實現，Firefox 也將 WebP 支持提上日程。🔗

點評：Safari: 你看我幹嗎？

• 近期，Microsoft、Google、Mozilla 和 Apple 均聲明將在 2020 年三月中止對 TLS 1.0 和 TLS 1.1 的支持。已有十年以上歷史的 TLS 1.0 和 TLS 1.1 有較多安全漏洞，而其後的 TLS 1.2 爲當前主流版本，TLS 1.3 於今年八月份問世，最新版簡化了握手流程、加強了安全性。🔗

點評：目前 Android 5.0+、IE 11+ 纔開始支持 TLS 1.2。但願此次的聲明能帶動業界安全性發展。

• 在 Firefox Nightly 版本中，新支持了加密服務器名稱指示 ESNI （需打開 DNS over HTTPS 和 network.security.esni.enabled）。SNI 是對 SSL/TLS 協議的擴展，容許在單 IP 地址上承載多個 SSL 證書。ESNI 這個實驗性特性保證了不單單是 https 請求的內部內容不可被中間人截獲，且訪問的域名也可避免嗅探。🔗
• 在最近半年中，W3C 標準有以下更新：網頁內容可訪問性指南 WCAG 2.1 進入推薦階段、Web Authentication 進入候選推薦階段、WebDriver 進入推薦階段。🔗

瑞士軍刀

• Angular 7 發佈，ng-cli 將擁有更直觀的操做，打包流程支持了打包預算功能，CDK 支持了可拖放界面和滾動列表 DOM 複用。

• Trix 是又一個所見即所得的編輯器。

• Sal.js 是一個僅 3k 的掛鉤滾動和動畫行爲的庫。

• Omi 是由騰訊開源的集成了 JSX、Web Components、Proxy、Store、Path Updating 功能的前端框架，極限壓縮後僅 4kb。

點評：因爲依賴 Shadow DOM，兼容性稍稍有點尷尬，不過未來的發展是值得期待的。

• Low.js 是一款能夠在嵌入式設備上跑的 Node.js 的 port。
• Nodejs 10.12.0 發佈，可支持 WebSockets over HTTP/2。

專題：PostCSS

本期是由誠冉爲咱們帶來的 PostCSS 專題。這個工具可以對咱們生成的 CSS 進行處理，並帶來巨大的效率提高。

入門

1. 上手

   1. 官網 & Github 項目：羅列了 PostCSS 生態中全部優質資源
   2. PostCSS 插件庫
   3. 談談 PostCSS：一篇淺顯易懂的介紹，不用動手，直觀的瞭解 PostCSS 的能力範圍。
   4. CSS 工程化演進：瞭解 PostCSS 在 CSS 工程化進程中的位置

2. 體驗，使用社區中明星插件，star 數較高且開發活躍的

   1. PreCSS：SASS 的替代品
   2. cssnano：CSS壓縮
   3. lost：柵格系統
   4. stylefmt：CSS代碼格式化
   5. stylelint：CSS的 lint 工具

3. 定製

   1. 爲 PostCSS 書寫插件：官方文檔，很詳細
   2. 可參考比較簡單的插件，如 postcss-colormin
   3. 主要邏輯就是AST的遍歷，對照 AST 可視化遍歷，開發很直觀
4. 最後，成系統的規劃各個插件的功能，每一個插件儘可能作到單一職能，可複用

PostCSS vs SASS

PostCSS 並不能完整替代 SASS，遷移也有較大成本。

• 設計模式

  • SASS 語法是集中設計的，文檔齊全，體驗好
  • PostCSS 只是「核心處理器+一堆插件」

• 能力

  • PostCSS 更靈活，徹底掌控 CSS 的一切

• 可靠性

  • SASS 經歷更普遍的實踐驗證，可靠性更高

• 理念

  • PostCSS 積極擁護 CSS 標準的發展路線
  • 新增特性儘可能符合 CSS 語法的設計理念，每一個插件的輸出儘可能仍是一個合法的 CSS；若是不是，也須要有明顯的「特徵」，容易識別和批量替換
  • PostCSS 插件機制是「管道」式的協做，沒法實現相似 SASS 「逐行執行」的概念

$size : 1px + 1px;  /* PostCSS 從理念上不建議這種表達式 */
.selector {
    margin: $size * 2;
}

---

本期編輯：承虎(humphry) & 審閱：壹絲