CSS //-註解的可行性研究

www-style 上一位 Google 的前端又[1]提議了一次在 CSS 裡加上 //-單行註解
[2]。這種提案基本上實作的成本非常低，所以基本上反駁的論點就是：

一、跟 CSS 最小化等等處理工具不兼容

有不少 CSS 最小化工具會把換行符換成空格，造成

  // 註解
  background: 0;
  border: 0;

轉成

  // 註解 background: 0; border: 0;

造成支援 //-註解 的瀏覽器裡兩個宣告被覆蓋掉，也就是說支援 //-註解 的瀏覽
器看到這個東西變成一個壞掉網站的可能性比較高，也造成瀏覽器開發者不願意支
援這樣的東西（因為*使用者看到壞掉的網站很可能會換瀏覽器*）。

不要以為這種事不會發生，在整個網站更換 CSS 最小化工具的時候，如果本來有
用 //-註解 的網頁但是沒有注意到的情形，就可能會有這樣的結果。另外，網頁
作者也不見得會去測試太新的瀏覽器、、、


另外有人提到用正則做的 CSS 最小化工具，會把

  url(http://example.com/)

的 //... 當成註解，不過如果這樣也有問題的話，在檔案名稱開頭是星號的情形：

  url(path/*file*)

中，這種最小化工具早就有問題了（雖然出現這種狀況的可能性非常小）。

（註：在 CSS 2.1 中 /*file* 是 URI token [3]的一部分，所以不會變成
COMMENT token 的開頭。）

二、跟既有網站不兼容

這種不兼容大概是在

  div {
    border: 0; // 一些註解
    width: 0; /* 亂搞 */
  }

這種情形，就是說現在之所以網站沒有壞是因為「// 一些註解」把 'width: 0'
概念了，如果開始支持 //-註解 的話，反而會出現整個網站不能用的悲劇。

有網頁作者說「從沒看過 CSS 裡出現 //-註解」，也有瀏覽器 QA 說常常看到這
樣的東西。


總之，各說各話也對吵這兩個論點沒什麼實質幫助。我開了一個資料收集頁面
[4]，有興趣幫忙的朋友可以來填一下你用的 CSS 最小化工具的情形。向後兼容的
調查有點像阿菲之前做的那個，不過這次 1) 不用特別去蒐集某些頁面，用人家蒐
集到的就好 2) 不需要寫腳本分析，grep 一下就好。


[1] 這個提案已經之前已經提過三、四次了，應該是 www-style 上繼父元素選擇
器之後最常被提出的提案...
[2] http://lists.w3.org/Archives/Public/www-style/2012Aug/thread#msg622
[3] http://www.w3.org/html/ig/zh/wiki/CSS2/syndata#uri0
[4] http://www.w3.org/html/ig/zh/wiki/css-double-slash-comment



以上

Kenny
-- 
Web Specialist, Oupeng Browser, Beijing
Try Oupeng: http://www.oupeng.com/

Received on Wednesday, 5 September 2012 07:50:13 UTC