iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 1
1
Modern Web

CSS Secrets 導讀系列 第 1

[前言1] CSS 標準以及它們的產地

CSS 標準是怎麼定的?

事實上 W3C 不是制定標準的單位,CSS Working Group 才是制定標準的單位。
CSS WG 大部分成員來自瀏覽器廠商
因此瀏覽器廠商比起W3C有更大的權力
CSS標準的討論方式透過信件、視訊以及面對面的會議來制定
每一項標準規格前後會經過六個草稿階段

CSS 的版本歷史
CSS 1 在 1996 年發佈,簡單的規則,全部印出來也只需要68張A4的紙。
CSS 2 在 1998 年發佈,規則更嚴格,功能也更強大。但是它已經成長到印出來需要整整480張的A4紙,難以規範在單一規格裡。
CSS 2 以後的規則太多,加上規則制定過程很嚴謹耗時,因此CSS WG決定把規則分類成模組,各個模組有自己的審核進度及版本號。
在CSS 2.1 時就已經有的模組有了更新版本升級成第3版
至於那些在當時是全新的模組,就從第1版開始
所以說根本沒有CSS 3這種東西,大家習以為常的CSS3, 其實是眾多第3版本的規格,加上一些剛開始第1版的規格

Vendor prefixes

WG需要開發者的使用經驗來制定規則
如果不能用在production,開發者根本不會想使用
如果一些實驗性的方法被大量採用,那麼WG被迫要服從市場規則,不然許多現有的網站就廢了無法使用
如此一來就喪失了希望開發者試用的初衷
這些年來嘗試了許多方法,沒有一個是完美,其中最普遍的是 vendor prefixes
它的概念是瀏覽器能自行實踐實驗功能,只要加上專屬的引擎前綴字
開發者就可以使用這些實驗功能,然後回饋給WG
WG可以逐步修正規則,正式發佈的規則沒有這些前綴字,所以不會和現有的起衝突
但是想像總是完美,一旦開發者發現這些包含前綴字的實驗功能可以做到以前需要很費力才能實現的效果,就開始被大量使用
然後他們又發現只寫上現行的規則,一旦那些沒有列在上面的瀏覽器開始支援的時候,又要重新加上去,很麻煩
不如在一開始就先加上去,
甚至連沒有 vendor prefixes 的規則也加在最後
就算沒有用,也沒關系,至少 future-proof
於是就產生了無用的code

當時就產生了許多自動工具來解決太多前綴規則的問題
比如 CSS3, Please! 貼一段沒有前綴字的規則,網頁就會回給你包含所有前綴字的規則
Autoprefixer 會自動去 Can I Use 參考要加入哪些前綴字
LESS及Sass也有各自對應的做法,和開發者們分享的 mixins

Vendor prefixes 初衷是希望開發者們試用實驗功能,再回饋給WG
然而最後開發者們大量使用沒有 prefix 的規則來讓代碼不會過時
造成了許多半套的代碼
CSS WG 也很難改變這個習慣
所以說 vendor prefix 這個做法是個徹底的失敗

至今,新的實驗功能已不再使用 vendor prefix
而是需要在瀏覽器裡將 config flag 打開
這樣使得開發者不會濫用這些規則
因為不能預期一般的使用者懂得在瀏覽器更改設定
雖然得到的回饋少了
不過回饋的質量卻提升了
然而 vendor prefix 氾濫造成的效應還需要很長的時間才會離我們而去


下一篇
[前言2] 那些年我們一起錯過的 CSS 編碼技巧
系列文
CSS Secrets 導讀30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言