iphone - CSS3 支持 : iPhone Safari VS Android default browser?

Question

如果我为 iphone 和 android 用户制作网站并假设他们将使用 iPhone 和 Android 的默认浏览器并且我使用一些仅在 Web-kit 上运行的 CSS。

据我们所知，适用于 iphone 的“Opera Mini”也可用，适用于 Android 的“Firefox 4”已经推出。

所以如果我想要与所有浏览器兼容，因为用户可以使用任何浏览器。我不应该使用 CSS3 高级 webkit 转换和其他东西吗？

因为我认为最新的 Opera Mini 和 Firefox 4 for Android 不会像 Web-kit 浏览器那样支持 CSS3。

示例:我想使用这个 http://vxjs.org/buttons/SubpixelButtons-2/buttons.html

在 iphone 和 Android 上，但它在 Android 默认浏览器中看起来不错，而在 Firefox 4 (Android) 中它很乱

.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 浏览器中看起来不正确。

Answer 1

最好的方法是根据您的目标用户群做出决定:尝试找出他们使用哪些浏览器的哪些版本，然后决定使用哪些功能，以便大多数目标用户可以使用您构建的内容。

我发现有用的检查浏览器对各种功能支持的工具是 caniuse.com .

另外，重要的是要认识到 CSS3 不是一个全有或全无的决定。即使在基本浏览器中，您始终可以构建看起来“不错”的东西，并为更现代的浏览器添加额外的视觉效果(例如使用 -webkit-... 或 -moz-... CSS 选择器)，这将被忽略较旧的浏览器。 caniuse 工具将帮助您完美匹配选择单个 CSS 功能以匹配您的目标用户组。