在接到邀請在團隊分享有關于與 W3C 規範相關的話題時，就我個人而言還是很虛的。雖然從事 Web 前端開發已有近十年，接觸 W3C 規範也有多年，但要出來聊與 W3C 規範相關話題，還是沒有足夠多的信心。在開始寫 PPT 之前，我特意咨詢了好好友 @小倩 小姐姐，并且參考了她分享的《走進W3C》。雖然對 W3C 沒有全面的認識，但我還是想從我個人的角度來看和思考 W3C 規範。希望接下來的分享對初次接觸 W3C 或想深入 W3C 的同學有所幫助。
《走進 W3C》： https://www.w3.org/People/xiaoqian/talks/bytedance-2021/Overview.html
我想分享的話題
今天我想分享的主題是 《我認識的 W3C 規範》。僅從自己的角度和經驗來看待 W3C 規範。或者說我自己是如何使用 W3C 規範，又是如何借助 W3C 規範來幫助我解決問題，幫助我成長以及自己是如何參與 W3C 規範的建設。
W3C 是什麼？
W3C 是 “萬維網際網路聯盟” 的簡稱，由蒂姆-伯納斯-李（Tim Berners-Lee）在 1994 創⽴的，随着 Web 近二十多年的發展，現在 W3C 已經是一個擁有近 400份技術規範 和 超過 450個成員 的組織。大家一定會感到好奇，為什麼這麼多年以來，在 W3C 中技術标準規範和成員會越來越多。其實原因很簡單：
- 浏覽器是最為⼴泛使⽤與分布的開放平台
- 最⼤的開發者社群
- 跨平台，跨終端，低碎⽚化開發與分發
- 免版稅、開放、标準化
這些優勢對于其他平台來說都是無法匹敵的。另外 W3C 在多個國家和地區都有相應的組織，即 W3C 的總部：
- 北航
- 歐洲數學與原⼦研究中⼼
- ⽇本慶應⼤學
- 美國⿇省理⼯⼤學
Web 核心能力
作為 Web 開發者，很多人都認為建構一個 Web 頁面或 Web 應用主要由 HTML、CSS 和 JavaScript 三個部分組成：
- HTML：建構 Web 的基礎結構
- CSS: 美化 Web 頁面
- JavaScript: 控制Web控件互動行為
不過，對于現代 Web 開發者而言，建構 Web 不應該離開 A11Y 方面的能力。我認為，建構一個現代 Web 頁面或應用（或者說更具可通路性的Web）僅 HTML、CSS 和 JavaScript 不夠的，還應該在些基礎上新增 A11Y 相關的能力：
在 W3C 中也相應有幾個方面的相關規範。我把這些稱為是建構 Web 的核心能力：
- CSS ⼯作組 釋出 CSS 2020 技術概覽，記錄 100 多個 CSS 規範的技術進展
- HTML ⼯作組(HTMLWG) 與WHATWG合作釋出了 2020 版本的HTML與DOM正式推薦标準
- ⽆障礙指南⼯作組釋出了WCAG 3.0 ⼯作草案(WD)，除繼承WCAG 2.2及以前版本(2.1、2.0)之外，還⾸次納⼊ UAAG 2.0 (⽤戶代理⽆障礙指南) 和ATAG 2.0 (創作⼯具⽆障礙指南) 的内容并進⾏擴充。将提供⼀個新模式來更全 ⾯和靈活地解決 Web ⽆障礙（可通路性）問題
除了這幾個方面，還有：
- Web 性能⼯作組繼續釋出性能監測與優化相關的 API
- Web 應⽤⼯作組持續用戶端應⽤接⼜相關技術讨論，Web 線上編輯相關的技術接⼜，如⾼亮選擇、虛拟鍵盤、内 容選擇等，獲得越來越多的關注
- WPT Web 平台測試項⽬持續協助标準實作統
你可能好奇這裡怎麼沒有 JavaScript 方面的标準呢？是的，JavaScript 相關的标準規範不在 W3C 中，他由單獨的組織 ECMA-TC39 來維護，并且相關規範都在 ECMAScript規範中。
大家都應該都知道，要建構出一個優秀的 Web 頁面或應用，僅僅依賴于 HTML、CSS 、JavaScript 和 A11Y 方面還是遠遠不夠的，還需要其他的一些能力，比如“Web性能”，“具有類似用戶端的體驗”。這些目标都是給使用者提供一個更好的體驗的 Web 頁面或應用。
W3C 除了提供相關規範之外，也還提供相應的測試平台，比如 WPT Web 平台，該平台為喜歡 Web 開發者提供一些關于 W3C 規範特性的測試平台，我們可以向該平台送出一些關于 W3C 特性的測試案例。
我關注的 W3C 相關标準
在衆多的 W3C 标準規範中，我個人主要關注點還是在 HTML、CSS 和 A11Y 方向。接下來和大家聊聊我對這幾個方向的認識。先從 HTML 開始。
WHATWG 的 HTML
對于 HTML 來說，一直以來是有兩個組織在維護的，即 HTML ⼯作組(HTMLWG) 與WHATWG。早期他們是兩個獨立的組織，即使到今天他們也是兩個獨立的組織，隻不過随着後期的發展，有關于 HTML 相關的标準都由 WHATWG 組織來維護和推進。
平時在查閱有關于 HTML 相關規範，我也更喜歡查閱 WHATWG 維護的 HTML 規範。該規範提供了 Web 的 HTML 方面的所有規範，比如 HTML 元素、屬性、DOM API 等。在這個規範中可以查閱到你想查閱的資料。也能提供你使用 HTML 标簽元素的理論依據。
就拿 HTML 的
<img>
元素來舉例：
從規範中我們可以知道
<img>
屬于什麼類型的标簽、内容模型、屬性和 DOM API 等。對于大多數 Web 開發者來說，他們可能更多的關注于 标簽屬性 和 DOM API 方面的特性，而往往會忽略有關于 A11Y 方面的描述。但對于想建構出一個更具有可通路性的 Web 頁面或應用來說，這個特性又是非常重要的。
他可以把我們引入兩個地方：
- For Authors(針對作者)：把我們引到ARIA (WAI-ARIA) 或 ARIA in HTML(ARIAHTML)，該規範告訴作者（Web頁⾯或應⽤程式開發者）可以在 HTML 元素上使⽤ ARIA 的 “⾓⾊” 、 “屬性” 、 “狀态”
- For Implementers(針對實作者)：把我們引到HTMLAAM（HTML 可通路 性 API 映射）規範中，該規範告訴⽤戶代理或輔助技術的實作者，HTML 元素 是如何映射到平台的可通路性 API的
我們更多的是關注 ARIA 和 ARIA in HTML 這兩個規範。舉個例子來說，我們在建構 Web 的時候，有的時候會使用一個 Icon 标簽來建構一個控件。而這個 Icon 有可能是一個純
<img>
标簽，也有可能是一個
background-image
，也有可能是一個
<svg>
标簽。如果我們希望讓螢幕閱讀器可以識别，那就需要在建構 HTML 的時候使用 ARIA 相關的特性：
<div style="background-image: url(back.png)" role="img" aria-label="傳回"></div> 簡單地說，ARIA 是 Web 開發者建構具有可通路性 Web 應用不可或缺的理論依據之一！
W3C 的 CSS 規範
對于 CSS 規範來說，要比 HTML 要複雜的多。不過有關于 W3C 的 CSS 相關的規範都可以在 《CSS current work & how to participate》 中擷取。我們在這個頁面中可以擷取到有關于 CSS 規範的衆多資訊，或者說所有關于 CSS 規範的資訊。
我們可以在這裡擷取到一些重要資訊：
- 訂閱有關于 CSS 最新特性
- 從釋出的 CSS 快照報告中擷取 CSS 規範發展狀态，比如釋出 CSS 2020 技術概覽，記錄 100 多個 CSS 規範的技術進展
- 從單獨的規範子產品中查閱 CSS 相關特性
說實話，閱讀 CSS 規範是痛苦的，對于一位初次或有一定經驗同學來說一樣是如此，如果你想更好的掌握閱讀 CSS 規範的技巧，那麼下面兩篇文章就非常值得閱讀：
- @fantasai的《Understanding the CSS Specifications》
- @J.David Eisenberg的《How to read W3C specs》
我來簡單的解讀一下。在 CSS Current Work 頁面有關于功能子產品的表格中，至少可以獲得三個方面的資訊。其一是規範狀态（States）：
- Completed（已完成）
- Stable（穩定）
- Testing（測試）
- Refining（完善）
- Revising（修改）
- Exploring（探索）
- Rewriting（重寫）
- Abandoned（廢棄）
除了了解規範所處狀态之外，還可以知道規範所處的階段，因為每一個規範成為标準都會經曆一個漫長的過程：
- ① 編輯草案 (ED: Editors’ Draft)：規範的初始階段，可能很粗糙，也沒有什麼要求，也可能不會被⼯作組準許。也是每個修訂版本必經階段，每 次變更都是先從⼀個 ED 中産⽣，然後才釋出出來
- ②⾸個公開⼯作草案(FPWD:First Public Working Draft)：⼀項規範的⾸個公開釋出版本，它應該準備就緒，以接受⼯作組的公開回報 （
FPWD
- ③⼯作草案(WD: Working Draft)：在第⼀個 WD 之後，還會有更多的 WD出來。這些 WD 會吸收來⾃⼯作組和社群的回報，⼀版接着⼀版⼩幅改 進。浏覽器⼚商早期實作通常是從這個階段開始的 (
WD
- ④ 候選推薦規範(CR:Candidate Recommendation)：⼀個相對穩定的版本，此時⽐較适合實作和測試。⼀項規範隻有具備⼀套完整的測試套件和 兩個獨⽴的實作之後，才有可能繼續推進到下⼀階段（
CR
- ⑤候選推薦草案(CRD:Candidate Recommendation Draft)：CRD 釋出在 W3C 的技術報告頁⾯(TR)上，以整合⼯作組打算納⼊後續候選推薦快 照(CRS)的前⼀個候選推薦快照中的變化。可以讓⼤家更⼴泛地審查這些變化，并便于參考整合後的規範 (
CRD
- ⑥提名推薦規範(PR:Proposed Recommendation)：這是 W3C 會員公司對這項規範表達反對意見的最後機會。實際上他們很少在這個階段提出異 議，是以每個 PR 推進到下⼀階段（也是最後⼀個階段）隻是時間問題（
PR
- ⑦正式推薦規範(REC:Recommendation)：⼀項 W3C 技術規範的最終階段 （
REC
- ⑧被取代的推薦規範(SPSD:Superseded Recommendation)：缺少⾜夠的市場相關性，被 W3C 推薦的較新版本所取代的規範 （
SPSD
- ⑨⼯作組說明(Note)：不打算成為标準的⽂檔。通常記錄規範以外的資訊，⽐如規範的⽤例及其最佳實踐，解釋規範被棄⽤的原因等（
NOTE
對于每一個特性，隻有到了 WD 階段才有浏覽器開始實施，當然，很多特性在這個階段也開始運用到了Web 開發當中。事實如此，即使到今天，CSS 中很多特性都還處于 WD 階段，但也同時被運用于生産中。換句話說，并不是每個屬性隻有到了 PR 或 REC 階段才能被用于生産環境。
以前描述 CSS 都是使用版本号來描述的，比如說 CSS 1.0 ，CSS 2.0， CSS 2.1 和 CSS3 之類：
但随着 CSS 的功能子產品越來越多，而且每個功能子產品發展進度也有所差異。後面定義 CSS 規範就不再以整體版本号來描述了，比如說，以後就不會再有 CSS 4.0 之類的說法了：
詳細可閱讀 《Why there is no CSS4 explaining CSS Levels》
https://rachelandrew.co.uk/archives/2016/09/13/why-there-is-no-css4-explaining-css-levels/基于這些原因，現在 W3C 的 CSS 工作組在維護 CSS 功能子產品都是以單獨子產品的版本來維護，比如 CSS Grid 子產品，他分為 Levle1，Level2 和 Level3 之類：
當然，随着 CSS Grid 功能子產品不斷向前發展，在未來可能還會有 Level 4，Level5 之類，其他 CSS 功能子產品也是類似。
雖然說每個功能子產品在不同的階段會有不同的版本，但不是說他們之間（版本級别之間）是完全割裂的，還是拿 CSS Grid 子產品來說吧：
- Level 2 在 Level 1 基礎上新增了子網格功能
- Level 3 在 Level 2 基礎上新增了瀑布流功能
每一個 CSS 功能子產品都涵蓋了一個或多個屬性的介紹。如果隻是想了解每個 CSS 屬性的基本使用，那麼隻需要在每個屬性的介紹中擷取相應的資訊：
正如上圖所示，大多數屬性都會有相應的基本資訊，而這些資訊中的
value
、
initial
和
inherit
以及 "Percentages" 和 “Computed Value” 對于 Web 開發來說是非常重要的。比如：
- value 可以告訴我們該屬性可運用的值
- initial 會告訴我們該屬性的初始值
- inherit 會告訴我們該屬性是否可繼承
- percentage 會告訴我們該屬性如果可取值百分比，他是相對于誰計算
- computed value 會告訴我們該屬性屬性計算值是什麼
我們還可以在規範中找到屬性每個值的介紹：
如果你對一些屬性不僅是想做一些初步了解，而是想更深入的探究，同樣可以在相應的規範中擷取。好比 CSS Flexbox 和 CSS Grid 功能子產品，如果你想深入了解其一些布局相關的算法，則可以閱讀其算法相關的描述：
簡單地說，CSS 規範中的資訊量要比 HTML 規範中複雜的多，不同角度都能在規範中擷取自己想要的資訊。隻是難易度的問題。
W3C 的 WCAG 3.0
W3C 的 WCAG 相關規範是幫助我們建構具有可通路性 Web 應用的理論參考和依據。今年釋出的 WCAG 3.0 ⼯作草案(WD)，除繼承WCAG 2.2及以前版本(2.1、2.0)之外，還⾸次納⼊ UAAG 2.0 (⽤戶代理⽆障礙指南) 和ATAG 2.0 (創作⼯具⽆障礙指南) 的内容并進⾏擴充。将提供⼀個新模式來更全 ⾯和靈活地解決 Web ⽆障礙（可通路性）問題。
而且 WCAG 3.0 規範對于 Web 開發者更具閱讀性，相比以往的版本要友好的多。我們可以在規範中對應的清單項快速找到想要的資訊。比如“使用指南”、”結果、細節和方法“、”功能分類“、”關鍵錯誤“和”評級“等。除了 WCAG 相關規範之外，WAI-ARIA 對于建構具有可通路性的 Web 頁面或應用也是不可缺少的相關理論與指南：
W3C 規範中不容錯過的資訊
不管是 HTML 規範，還是 CSS 規範，或者說 WCAG 規範，都會有一些重要資訊，而且這些重要資訊都會以高亮的形式向大家展示。比如”注釋“、”警告“等：
作為 Web 開發者，規範閱讀者或使用者，這些資訊是非常重要的，千萬不要随意錯過。因為這些資訊可能是一些邊緣情況，也可能是一些待解決的 Issue。甚至還有些可以幫助你快速定位和解決實際使用碰到的問題。就好比 Flexbox 布局中，使用
flex: 1
時，為什麼要時常配合
min-width
或
min-height
為
一起使用。這些其實都在規範中有較長的描述。再比如說，CSS Grid 布局中，使用
minmax()
函數時，為什麼
fr
機關值隻能用于
max
值才有效，規範中都是有相關描述的：
除了這些提示資訊不能錯過之外，規範中所提供的示例也是值得我們閱讀，甚至是值得你親手寫寫：
這些示例除了告訴我們怎麼使用之外，也會提供一些邊緣示例。甚至我們還可以通過這些示例，以及示例展示的結果示意圖，提前知道相關特性的功能和所起作用。
Web 标準生命周期
正如前面介紹 CSS 規範所示一樣，W3C 的每份标準規範都像人一樣，有着自己的生命周期。W3C 流程⽂檔規定了 W3C 作為中⽴的技術交流平台的運作規則：
正如上面流程圖所示，每一份規範從提議、到草案再到正式規範是一個不容易的過程，甚至要成為一份标準規範曆史也需要很多年。也正因為如此，我們現在正在使用的一些功能子產品，他不一定都是處于标準規範階段，而還處于 WD 階段。
W3C 工作組
在 W3C 中有很多個工作組，比如我們熟悉 WG（Working Group）工作組、興趣組、社群組和 Web 孵化社群組。每個不同工作組都有着自己的職能：
- WG 工作組：唯⼀能釋出正式推薦标準的⼯作組
- 興趣組：讨論某個産業興趣點或 Web 技術焦點的組，⽐如中⽂興趣組
- 社群組：為你的想法建立⼀個社群
- Web 孵化社群組：我們希望給你的，是在你構想提案的過程給予回報，是在你把提案呈現到正确的組織後、幫助你疊代和推進你的想法
就拿中文興趣組來說吧。
中文興趣組主要是：
- 為 W3C 成員提供了⼀個加強中國 Web 社群對 Web 标準⼯作的參與的平台
- 側重于确定中國的獨特要求，幫助中國成員熟悉 W3C 标準流程，讨論 可能送出給 W3C 的技術提案、标準的測試，實作以及和 W3C 相關的标準 化機會
- 同時協助中國 Web 社群對 Web 标準化進⾏參與和貢獻
- ⼀個全新的嘗試：使⽤熟悉的語⾔讨論技術想法和獨特的 Web 需求
- 每三個⽉⼀次的⾯對⾯專題讨論，今年的計劃包括：适⽼化、WebXR 虛拟體驗、雲遊戲等
如何參與 W3C 讨論
W3C 是為每一位 Web 開發者提供服務，同時也是由每一位 Web 開發者建構的。如果你希望自己能參與 W3C 的建設和讨論當中，你可能需要有一些初步的工作需要做，比如說，你需要先申請注冊一個 W3C 賬号（你也可以參閱 ”W3C 會員參與指南“）。
如果你隻是希望參與一些讨論的話，你也可以直接在 GitHub 上參與讨論。
https://github.com/w3c/ 比如說，你可以進入 CSS 規範組（CSSWG），找到你自己想要參與讨論的功能子產品，在相應的 Issue 評論中發表你自己的看法，你也可以在相應的子產品中送出新的 Issues：
你也可以在這裡送出新的提議或草案。如果你有這種想法，想向 W3C 的 CSS 工作中送出新的提議，可以參考下面這兩份：CSS 容器查詢 和 折疊裝置 API 。個人認為這是一個非常好的樣例，值得我們參考和學習。
https://github.com/w3c/csswg-drafts/issues/5796 https://github.com/w3c/device-posture 除了這些，你也可以參與一些會議，比如線下研讨會，如 TPAC 會議。如果你感興趣的話，2021 年 TPAC 會議正在進行：
https://www.w3.org/2021/10/TPAC/ 你可以選擇你自己喜歡的話題：
當然，你也可以不定期的參與線上的電話會議和相關研讨會。比如今年上半年舉辦的 沉浸式 Web 和 Web适老化和無障礙 等。
https://www.w3.org/2021/07/chinese-ig-xr/minutes.html https://www.w3.org/2021/05/29-older-users-and-accessibility/minutes.html除了上面所提到的方式，應該還有其他我沒有掌握的方式。如果你有所了解，歡迎分享。最後我想以這麼一句話來結束今天有關于 W3C 方面的分享：
你需要 W3C 标準，同時 W3C 标準也需要你