Does 9-Patch PNG can work somehow with CSS on browsers

Question

I have just discovered the 9-Patch PNG (somefile.9.png) while working on an android app and I was quite amazed by the amount of work & files that this technology saves.

Is there a way to implement this technology on regular browsers somehow? (using some sort of jQuery plugin, or some other way..). if it will work with CSS - that could be really great improvement...

Answer 1

border-image from CSS3 is the closest match:

• http://www.w3.org/TR/css3-background/#border-images
• https://developer.mozilla.org/en/CSS/-moz-border-image

Browser support: http://caniuse.com/border-image

A useful generator: http://border-image.com/

---

As far as jQuery is concerned, I found this by Googling for "jquery 9 slice scaling":

http://code.google.com/p/scale9grid/

(9-slice scaling is the Adobe Flash term for something similar)

Answer 2

The scale9grid plugin generates multiple DOM objects and only stretches on resize of the window or when resize is manually triggered by JavaScript.

You can't use sprite image because you can't repeart part of the image. You have to cut out 8 pieces of the image (4 corners,4 sides) and you must have a colour that will be applied in the centre of the image when streched.

Notable mention is that you have a minimum size whenever you use the techniques for stretching a bitmap image. You can only stretch it more than the minimum. This minimum depends on the cut out parts. If the corner is 5x5 pixels. The minimum in the best scenario will be 10x10 pixels for the entire element.