Remember when you wanted a growable area with rounded-goodness and you had to cut up the image into a million pieces to have the top corners and the sides? Since then we have gotten nice effects to help us, and John Resig just posted on how Firefox 3.1 will implement what WebKit already has in the border-image CSS 3 magic:

Now you can create the iPhone search button that iUI contains, using the simple CSS:

Hmm.. Seems to also stretch the colors lighter. Likely by a function of the stretch width, this will make all buttons with the same img but diff widths look inconsistent. Let’s hope I’m missing something or that they get that fixed.

Nice thing about targeting iPhone (as it appears the example does) is that it is a single platform. No worry about different browsers (though, you do have to worry about the difference between 1.0 and 2.0 software (though x2, 2.0 software, and future software updates, may become ubiquitous rather quickly due to Apple’s method of propagation)).

Very nice but this highlights a problem with the naming of non standard properties.

Firefox should simply recognize the -webkit-border-image one instead of forcing us to add another line to our css files for -moz-border-image.

In other words: the first browser to implement a property should get credit and give it the name it wishes. The other browser should use it and eventually drop the browser specific name when the property gets approved.

Why can’t both just support something like -css3-border-image instead of making us type out the individual rendering engine? I understand theres some places where there might be overlap, but the webkit and mozilla teams should collaberate to eliminate those.

There’s a reason for it. -vendor- are necessary because the draft versions might not behave like the final version and specifically might not even behave the same in different browsers. And we all want to avoid something like we have in HTML were we have totally different properties (i.e. -msie-width vs width) that have the same name.

The reason for the -vendor- prefix, as Hans Schmucker sort of explained, is that it is a vendor-specific implementation even if it conforms to the draft, until the spec is out of draft. If FF 3.1 implements this as it is described in the draft, and the draft is edited and made official tomorrow, then 3.1 has a non-standard implementation until it is updated to the new spec and takes 3.1’s market share.