[Webkit] CSS支援能力整理

針對各家的Browser，CSS的支援似乎是存在於其中的最大差異
很多web designer都需要針對不同的瀏覽器來最佳化CSS，來讓網頁能在各個瀏覽器上有最好的呈現效果。

這篇文章旨在整理一些沒有被廣泛支援的style ，能有個了解。

首先，針對Webkit
可以在 Webkit debug的網站上看到現時你正在使用的瀏覽器的webkit 版本
因為某些CSS或是property都是在某個版本之後才開始支援，
先清楚webkit的版本，很重要。

---

<marquee behavior="alternate" >

marquee，跑馬燈，這個tag並不是W3C所定義的，是IE早期自己發展的
因為歷史悠久，各家的瀏覽器也會支援
refer: http://msdn.microsoft.com/en-us/library/ms533502(v=VS.85).aspx

behavior 是指定其多動的行為
有｛scroll | slide | alternate｝這三種，沒有設置的話，default 為scroll

今天遇到了一個問題

<marquee behavior='alternate'>來回移動</marquee>

這樣的一句，可以正常顯示的話，
應該是會有"來回移動"這四個字在螢幕上左右來回

來回移動

而問題就是在Android4.0 的Browser上面卻沒有反應

當behavior為scroll / slide時都沒有問題，就只有alternate沒反應

bug report: https://bugs.webkit.org/show_bug.cgi?id=64230
http://w3help.org/zh-cn/causes/BW5008

經自己多方測試後，發現是Webkit 535之後的版本才有支援
而Android4.0上的Webkit是534.3，所以沒支援。

refer:
非IE瀏覽器對marquee的支援：
http://www.hoxing.net/Knowledge/Website/20111103326.html
mozilla: https://developer.mozilla.org/en/HTML/Element/marquee
safari: https://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariHTMLRef/Articles/Attributes.html

---

[Webkit] WCSS支援能力

WCSS （Wap CSS／Wiress CSS）, 是WAP2.0專屬的CSS，屬於CSS 2.0的一個sub set 和一些WAP的特性所集結而成的，顧名思意，是應用於mobile上的CSS。
（refer:
http://www.developershome.com/wap/wcss/
http://baike.baidu.com/view/1689014.htm）

WCSS應用於Xhtml MP文件中
關於WCSS的使用範疇
refer:
http://bbs.blueidea.com/thread-2905812-1-1.html

---

以下為一些我遇到過在Webkit支援上比較有問題的style

---

-wap-input-required : { true|false }

/*if true, 指定的input text 不能空白，submit時會發出alert */

根據測試，只有opera有support

refer: http://answers.oreilly.com/topic/2218-how-to-validate-text-for-mobile/

---

vendor-prefixed 的CSS style在各家browser的支援度

refer: http://peter.sh/experiments/vendor-prefixed-css-property-overview/

OMA doc:

http://www.openmobilealliance.org/Application/Search/?search=support%20list