IE6 drops the leading dash. So you just have to check for "pie-background" instead of "-pie-background". PIE does this internally too.

Tue Nov 22, 2011 9:43 am

xem

Joined: Thu Apr 07, 2011 3:23 amPosts: 73

Re: Attach PIE.js automatically on elements with CSS3 proper

Thanks a lot Jason! I finished (and optimized) my code!Here's the demo code (needs PIE.js in the same folder)Now the question is: why not doing that directly in the next version of PIE (maybe as an option?) - or publish this tip on PIE.js documentation...

I'd be happy to provide something along these lines, probably not within the main file but perhaps alongside it. At the very least it can be documented as a helpful tip.

A few comments on it:

1) This will only work for very static designs, where the CSS3 styles are all applied up front. That won't include elements that have no CSS3 styling at first but get a background gradient applied on hover, for instance, as is pretty common. This would have to be made clear as a caveat to users.2) It listens for window.onload, which is fired *way* too late for a good experience (it waits for all external images etc. to load), not to mention it uses the singular window.onload property so it will clobber or be clobbered by any other listener set that way. We really want this to fire on document ready instead, and to use attachEvent/addEventListener to prevent clobbering.3) Should add border-image to the list of properties.

Other than that, and some JS style cleanup (wrap it all in a function to prevent global scope pollution, etc.), I think you may be onto something here.

Tue Nov 22, 2011 2:49 pm

webaware

Joined: Mon Apr 11, 2011 4:54 pmPosts: 53

Re: Attach PIE.js automatically on elements with CSS3 proper

xem, adding to what Jason said, I have to ask: why? What are you actually hoping to achieve here? Using the .htc instead of the .js will do what you're trying to do, and doesn't have the drawbacks Jason raises.

If you are using .js instead of .htc so that you can attach dynamically created elements, realise that you can do that with the .htc too:

Code:

if (window.PIE) PIE.attach(element);

Maybe there's some other benefits to using the .js that I don't know about, in which case I'd like to know

Tue Nov 22, 2011 4:52 pm

xem

Joined: Thu Apr 07, 2011 3:23 amPosts: 73

Re: Attach PIE.js automatically on elements with CSS3 proper

@webaware: why indeed. For the fun. I'm not good at JS, and I thought such en exercise would be nice (because I like PIE) and useful (because I'd really like a way for PIE to enable automatically, instead of doing PIE.attach "manually") and would make me learn things (it does.)

I prefer PIE.js because of two limitations of the .htc file (has to be on the same domain, and it adds elements into the DOM before the end of the page load, which can crash IE on big pages (I had bugs with that, and since I use PIE.js, it's okay))

Anyway, I didn't know I could use the HTC file too, I'll try that!

@Jason: thanks! Those are very good advices and I'm going to follow them I'll post a new version soon!

Wed Nov 23, 2011 2:36 am

webaware

Joined: Mon Apr 11, 2011 4:54 pmPosts: 53

Re: Attach PIE.js automatically on elements with CSS3 proper

xem, fair enough. I don't have a problem with the same-host requirement, but I do recall having IE6 crash with PIE on some sites. My solution there was to just not care about IE6 not having CSS3 and all has been well since. My preference for the .htc is because it is more seamless and easier to integrate, but if you need to make IE6 look like a modern browser then it's good to know that using the .js works. In fact, I might even revisit a couple of sites and look at that, so thanks for the tip!

1) This will only work for very static designs, where the CSS3 styles are all applied up front. That won't include elements that have no CSS3 styling at first but get a background gradient applied on hover, for instance, as is pretty common. This would have to be made clear as a caveat to users.2) It listens for window.onload, which is fired *way* too late for a good experience (it waits for all external images etc. to load), not to mention it uses the singular window.onload property so it will clobber or be clobbered by any other listener set that way. We really want this to fire on document ready instead, and to use attachEvent/addEventListener to prevent clobbering.3) Should add border-image to the list of properties.

1) For elements that don't have CSS3 by default, let's give'em the class "pie" and detect with JS if the class "pie" is present as a PIE enabling condition.2) I'm not sure how to write such an eventListener, could you help me? As a solution, I removed window.onload, so my code just has to be at the end of the page...3) Done

Quote:

Other than that, and some JS style cleanup (wrap it all in a function to prevent global scope pollution, etc.)

Last edited by xem on Thu Nov 24, 2011 11:53 am, edited 1 time in total.

Wed Nov 23, 2011 7:23 am

xem

Joined: Thu Apr 07, 2011 3:23 amPosts: 73

Re: Attach PIE.js automatically on elements with CSS3 proper

Hi guys,Here's a new version of PIE_auto that includes some optimizations PLUS a margin-top fix for IE6/IE7!It's not perfect yet but it works!

Can you please try it and try to answer to my questions:- How can I write an eventListener that detects that the DOM is loaded?- How can I know how deep in the DOM tree is an element? (like HTML = depth 1, HTML > BODY = depth 2, HTML > BODY > DIV = depth 3 etc.)(This question is to enhance my IE6/7 margin-top fixer)

2) You probably just need to walk up the DOM tree in a loop, something like

Code:

var depth = 0;while( node = node.parentNode ) { depth++;}

Thu Nov 24, 2011 12:36 pm

jason

Joined: Wed Jul 14, 2010 11:46 amPosts: 1452

Re: Attach PIE.js automatically on elements with CSS3 proper

Since you're trying to tackle margin collapsing here, do you happen to have a set of testcases that you're using to verify it works? If so, could you send them my way? I'm trying to integrate a workaround into PIE itself and testcases would be very useful.

I've got some more comments on the current code, but this forum is a bit awkward for making line-level comments. Would you be able to check it into a public GitHub repository or something?

Who is online

Users browsing this forum: No registered users and 1 guest

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