Re: Is it possible to apply PIE effects statically?
First, your questions:
- Why does it work? How does this code make the original squared corners disappear? Why does the <css3pie> tag contain two <shape> tags?
Your code doesn't actually seem to work -- I still see the squared corners and the rounded shapes are obscured. To make it work, something would have to set the original element's background and border to transparent. Perhaps it's working for you because PIE.htc is still referenced in the element's style?
The two shape tags are: one for the background fill, and one for the border.
- Can we improve it? (i.e. do the same thing with less code inside the <css3pie> tag)
In a simple case like this you could probably replace the second border shape with a stroke on the background shape, but that doesn't work as a generic solution because borders aren't always uniform all the way around, strokes affect the calculated bounds of gradient/image fills in VML, etc. It's much simpler for PIE to just always create two shapes.
- Eventually, could CSS3PIE provide a "tool" to export the "static version" of a HTML page with PIE effects enabled, without having to install it?
Perhaps, with some pretty big limitations -- see below.
- Bonus question: is it a lot easier for IE6-8 to display this statically instead of running PIE? (how much times easier?)
I would imagine yes. I don't know how much.
I actually tinkered with something like this a while back. Here are the major limitations that made me abandon the idea:
- It assumes that the dimensions and position of the target element are known up-front. If the element's size or offset position changes in any way due to dynamic content or scripting, then the shape coordinates and other properties are no longer valid. Totally fixed elements are pretty rare in my experience so this severely limits the usefulness of this approach.
- You're now sending a lot of extra commented-out markup to browsers that don't need it. With PIE.htc/js you only have to send extra code to IE. I've always considered PIE less of a tool for improving IE and more of a tool for preventing harm to modern browsers. This sort of goes against that.