CSS3 support: iPhone Safari VS Android default browser?

if I make website for iphone and android user and assume they will use iPhone and Android's default browser and I use some CSS which only runs on Web-kit.

And as we know for iphone "Opera Mini" is also available and for Android "Firefox 4" has been launched.

So if i want compatibility with all browser, because user can use any browser. Shouldn;t I use CSS3 advanced webkit transitions and other thing?

Because I think Latest Opera Mini and Firefox 4 for Android will not support CSS3 as much as Web-开发者_如何转开发kit browsers do.

Example: I wanted to use this http://vxjs.org/buttons/SubpixelButtons-2/buttons.html

on iphone and Android but it's looking good in Android default browser and in Firefox 4 (Android) it's messing

.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));
}

Edit

Why this is http://vxjs.org/buttons/SubpixelButtons-2/buttons.html

not looking proper in other Google Chrome and Android browser while all are using same rendering engine.

The best approach is to base your decision on your target user group: try to find out which versions of which browsers they use, and then decide which features to use so that the majority of your target users can use what you build.

A tool to check browser support for various features I've found useful is caniuse.com.

Also, its important to realise that CSS3 isn't an all-or-nothing decision. You can always build something that looks "OK" even in basic browsers, and add extra eye-candy (e.g. using -webkit-... or -moz-... CSS selectors) for more modern browsers, which will be ignored by older browsers. The caniuse tool will help you get a perfect match for selecting individual CSS features to match your target user group.