Forums
View unanswered posts | View active topics It is currently Thu Apr 17, 2014 7:16 am



Reply to topic  [ 4 posts ] 
 Is it possible to apply PIE effects statically? 
Author Message

Joined: Thu Apr 07, 2011 3:23 am
Posts: 73
Post Is it possible to apply PIE effects statically?
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!


Attachments:
static_pie.zip [929 Bytes]
Downloaded 135 times


Last edited by xem on Fri Feb 15, 2013 3:57 am, edited 1 time in total.

Thu Feb 14, 2013 4:03 am
Profile

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1430
Post Re: Is it possible to apply PIE effects statically?
Fun stuff! :)

First, your questions:

Quote:
- 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.

Quote:
- 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.

Quote:
- 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.

Quote:
- 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.


Thu Feb 14, 2013 10:17 am
Profile

Joined: Thu Apr 07, 2011 3:23 am
Posts: 73
Post Re: Is it possible to apply PIE effects statically?
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?

Quote:
- 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.


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

Quote:
- 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.


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!


Attachments:
pie_static_2.zip [950 Bytes]
Downloaded 130 times
Fri Feb 15, 2013 3:53 am
Profile

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1430
Post Re: Is it possible to apply PIE effects statically?
Quote:
Is the IE DOM/CSS inspector lying to me?


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


Fri Feb 15, 2013 10:49 am
Profile
Display posts from previous:  Sort by  
Reply to topic   [ 4 posts ] 

Who is online

Users browsing this forum: Baidu [Spider] and 2 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group.
Designed by STSoftware for PTF.