2011-04-11 110 views
1

如果我爲iphone和android用戶製作網站,並假設他們將使用iPhone和Android的默認瀏覽器,並使用一些只能在Web-kit上運行的CSS。CSS3支持:iPhone Safari VS Android默認瀏覽器?

正如我們知道iphone「的Opera Mini」也可用於Android「的火狐4」已經啓動。

所以,如果我想與所有的瀏覽器的兼容性,因爲用戶可以使用任何瀏覽器。不應該使用CSS3高級webkit轉換和其他東西?

因爲我覺得最新的Opera Mini和火狐4 Android將不支持CSS3不亞於網絡套件瀏覽器做。

例子:我想使用iPhone和Android這http://vxjs.org/buttons/SubpixelButtons-2/buttons.html

但它在尋找的Android默認瀏覽器和火狐4(安卓)好它搞亂

.button.bordered.back:before { 
    content: " "; 
    display: block; 
    z-index: 0; 
    background-image: 
     -webkit-gradient(linear, left top, right bottom, 
      from(#92a1bf), 
      color-stop(0.3, #798aad), 
      color-stop(0.51, #6276a0), 
      color-stop(0.51, #556a97), 
      color-stop(0.75, #566c98), 
      to(#546993)); 
    border-left: solid 1px #484e59; 
    border-bottom: solid 1px #9aa5bb; 
    -webkit-border-top-left-radius: 5px; 
    -webkit-border-bottom-right-radius: 5px; 
    -webkit-border-bottom-left-radius: 4px; 
    height: 23.5px; 
    width: 23.5px; 
    display: inline-block; 
    -webkit-transform: rotate(45deg); 
    -webkit-mask-image: 
     -webkit-gradient(linear, left bottom, right top, 
      from(#000000), 
      color-stop(0.5,#000000), 
      color-stop(0.5, transparent), 
      to(transparent)); 
    position: absolute; 
    left: -9px; 
    top: 2.5px; 
    -webkit-background-clip: content; 
} 
.button.bordered.back:hover:before, .button.bordered.back.touched:before { 
    background-image: 
     -webkit-gradient(linear, left top, right bottom, 
      from(#7d88a5), 
      color-stop(0.3, #58698c), 
      color-stop(0.51, #3a4e78), 
      color-stop(0.51, #253c6a), 
      color-stop(0.75, #273f6d), 
      to(#273f6d)); 
} 

編輯

爲什麼這是http://vxjs.org/buttons/SubpixelButtons-2/buttons.html

在其他Google Chrome瀏覽器和Android瀏覽器中看起來不合適,而所有人都使用相同的呈現引擎。

回答

1

最好的辦法是立足你的決定對你的目標用戶羣:嘗試找出哪個版本哪些瀏覽器,他們使用,然後決定哪些功能,使廣大你的目標用戶可以使用你建立了什麼。

的工具來檢查各種功能,瀏覽器的支持,我發現有用的是caniuse.com

此外,它的重要的是要認識到,CSS3不是全有或全無的決定。即使在基本的瀏覽器中,你總是可以構建一些看起來「OK」的東西,併爲更現代的瀏覽器添加額外的視覺效果(例如使用-webkit -...或-moz -... CSS選擇器),這將被忽略舊版瀏覽器。 caniuse工具將幫助您完美匹配選擇單個CSS功能以匹配您的目標用戶組。

+0

感謝您的回答。感謝您使用有用的鏈接,但它沒有關於適用於Android的Firefox 4的任何信息。也許他們很快就會升級 – 2011-04-11 12:04:01