2011-04-11 108 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