Forums
View unanswered posts | View active topics It is currently Thu Aug 28, 2014 5:14 pm



Reply to topic  [ 26 posts ]  Go to page Previous  1, 2, 3  Next
 Attach PIE.js automatically on elements with CSS3 properties 
Author Message

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1441
Post Re: Attach PIE.js automatically on elements with CSS3 proper
Quote:
Sadly, I can't make IE6 read the "-pie-background" property


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
Profile

Joined: Thu Apr 07, 2011 3:23 am
Posts: 73
Post 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... ;)

Code:
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>PIE</title>
  <!--[if lt IE 10]><script type="text/javascript" src="PIE.js"></script><![endif]-->
  <style>
    #div1{border-radius: 50%; width: 200px; height: 100px; border: 1px solid black; padding: 40px 90px;}
    #div2{box-shadow: #000 10px 10px 10px; width: 200px; height: 100px; border: 1px solid black; padding: 40px 90px; background: #fff;}
    #div3{-pie-background: linear-gradient(#000, #fff); width: 200px; height: 100px; border: 1px solid black; padding: 40px 90px;}
  </style>
</head>

<body>
  <div style="border-radius: 50%; width: 200px; height: 100px; border: 1px solid black; padding: 40px 90px;">ok</div>
  <br>
  <div style="box-shadow: #000 10px 10px 10px; width: 200px; height: 100px; border: 1px solid black; padding: 40px 90px; background: #fff;">ok</div>
  <br>
  <div style="-pie-background: linear-gradient(#000, #fff); width: 200px; height: 100px; border: 1px solid black; padding: 40px 90px;">ok</div>
  <br>
  <div id="div1">ok</div>
  <br>
  <div id="div2">ok</div>
  <br>
  <div id="div3">ok</div>

  <script>
  // IE version tester
  function ie(v){return(navigator.userAgent.indexOf("MSIE "+v)!=-1);}

  // CSS property tester
  function getCSS(e,p){var prop="";if(e.currentStyle){prop=e.currentStyle[p];}else if(window.getComputedStyle){prop=document.defaultView.getComputedStyle(e,null).getPropertyValue(p);}return prop;}

  // Attach PIE to all elements having a CSS3 property
  window.onload = function()
  {
    if(window.PIE)
    {
      for (i = document.all.length; i--;)
      {
        e = document.all[i];
        if
        (
            (!ie(9) && getCSS(e,'border-radius') != undefined ) // no border-radius = undefined for IE < 9
          ||(!ie(9) && getCSS(e,'box-shadow') != undefined )    // no box-shadow = undefined for IE < 9
          ||(getCSS(e,'-pie-background') != undefined )         // no -pie-background = undefined for IE > 6
          ||(ie(6) && getCSS(e,'pie-background') != undefined ) // no pie-background = undefined for IE 6
        )
        {
          // alert(e.tagName); // uncomment it if you want to be sure it's ok
          PIE.attach(e);
        }
      }
    }
  }
  </script>
</body>

</html>


Tue Nov 22, 2011 11:07 am
Profile

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1441
Post Re: Attach PIE.js automatically on elements with CSS3 proper
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
Profile

Joined: Mon Apr 11, 2011 4:54 pm
Posts: 53
Post 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
Profile

Joined: Thu Apr 07, 2011 3:23 am
Posts: 73
Post 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
Profile

Joined: Mon Apr 11, 2011 4:54 pm
Posts: 53
Post 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!


Wed Nov 23, 2011 3:17 am
Profile

Joined: Thu Apr 07, 2011 3:23 am
Posts: 73
Post Re: Attach PIE.js automatically on elements with CSS3 proper
Alright, I'm back!

[EDIT: see next post fot a better version]
PIE_auto 0.1: download/file.php?id=196



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

Done


Thanks!


Attachments:
File comment: PIE_auto 0.1
PIE_auto.zip [17.24 KiB]
Downloaded 353 times


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

Wed Nov 23, 2011 7:23 am
Profile

Joined: Thu Apr 07, 2011 3:23 am
Posts: 73
Post 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)

Thanks!!


Attachments:
File comment: PIE_auto 0.2
PIE_auto.zip [17.81 KiB]
Downloaded 290 times
Thu Nov 24, 2011 11:52 am
Profile

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1441
Post Re: Attach PIE.js automatically on elements with CSS3 proper
I'll try to find some time to play around with it this weekend. In the meantime, to your questions:

1) I'd check out how jQuery does it, there are quirks with IE and iframes that they've figured out: https://github.com/jquery/jquery/blob/m ... re.js#L446

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
Profile

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1441
Post 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?


Fri Nov 25, 2011 4:27 pm
Profile
Display posts from previous:  Sort by  
Reply to topic   [ 26 posts ]  Go to page Previous  1, 2, 3  Next

Who is online

Users browsing this forum: No registered users and 0 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.