Hello,

I have a project where I can't install any htc or js library, but still want one element to be rounded on IE6-8. Is it possible?

I tried.

I took the example of the CSS3Pie.com demo (with just border-radius enabled), I copied the HTML code of the <div> and the associated <css3pie> element in a blank html file and in a conditional comment.

I wrote a "shim" to enable <css3pie>, <shape> and <fill> on IE 6-8, and of course, didn't install PIE. (See the attached result. EDIT: don't. it's wrong)

It didn't work perfectly: we could see the squared corders behind the rounded corners, and we couldn't see the text "Mmm, pie".

EDIT: to fix this, remove the background and the borders of the element.

Questions:

- Why does it work? How does this code make the original squared corners disappear? Why does the <css3pie> tag contain two <shape> tags?

- Can we improve it? (i.e. do the same thing with less code inside the <css3pie> tag)

- Eventually, could CSS3PIE provide a "tool" to export the "static version" of a HTML page with PIE effects enabled, without having to install it?

- Bonus question: is it a lot easier for IE6-8 to display this statically instead of running PIE? (how much times easier?)


Thanks!

Fun stuff!

First, your questions:



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.



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.



Perhaps, with some pretty big limitations -- see below.



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.

Hi! Thanks for your answer!

Indeed, the file I sent yesterday was ... wrong.
Indeed, the target element has to lose its border and background in order to see the PIE'ing underneath.
A fixed file is attached.

About that, it's logic to remove the borders and the background on the target element on IE < 9, but then, when I inspect the demo div on http://css3pie.com/, why does it still have borders, and a background? Is the IE DOM/CSS inspector lying to me?



Sure, it's only useable for static pages...



Yeah, that's a lot of extra code indeed (1.2kb just for this). But at least it's a solution for that project where I can't add any JS or HTC library!

Thanks!

Yes, it is. PIE applies the background/border overrides using runtimeStyle, which doesn't get reflected in the inspector.