Mozilla Behavior Emulation 8

Dean Edwards has created an XBL binding that allows Mozilla to use IE behaviors. This is something I’ve thought about doing but I put that on hold because Mozilla does not allow custom style properties. Dean, however came up with a pretty good solution. He uses the id of the binding as the URI to the HTC file.

 img#ticker {
   behavior: url(ticker.htc);
   -moz-binding: url(moz-behaviors.xml#ticker.htc);
}

The XBL binding use the XMLHTTPRequest object to read the HTC file and then parses that and creates the property getters/setters and methods and attaches the events.

The emulation also does a minimal job of making IE specific code work in Mozilla, much like IE Emu. There is a minor issue with his emulation and that is that he incorrectly emulates clientWidth/clientHeight. Client width is the width minus borders and possible space for the scroll bar. Not only is the emulation incorrect, Mozilla correctly supports clientWidth (since 1.4?) so the emulation is therefore not needed. (Sorry if I sound harsh, the binding is actually great.)

  • http://dean.edwards.name/ Dean Edwards

    the browser compatibility stuff was added at the last minute. i was more interested in loading and applying the behavioral interface to start with.

    i’ll look into to the clientWidth/Height properties (i kinda knew about borders and stuff but just plain forgot). it’s important to have some browser compatibility in the wrapper because people will expect it work “out of the box” (not that there’s a box).

    i’d appreciate some help in refining this wrapper, so if anyone out there is interested in developing cross-browser behaviors, please get in touch.

    thanks for your comments (really!)

    dean edwards

    dean@edwards.name

  • http://dean.edwards.name/ Dean Edwards

    just started looking at your ie-emu code. it looks great! i’m going to have to incorporate some of your ideas into the compatibility layer of my wrapper. i’ll accredit you accordingly ;)

    dean edwards

  • http://erik.eae.net Erik Arvidsson

    Dean: Great. The currentStyle emulation I have in IE Emu is stupid. Yours is the way to go.

    HTMLElement.prorotype.__defineGetter__( “runtimeStyle”, function () {
    return this.ownerDocument.defaultView.getOverrideStyle( this, null );
    } );

    The problem with currentStyle is that it is not the same as getComputedStyle. currentStyle gives the cascaded value (for example “auto”) where getComputedStyle always gives the value in a fixed unit. In some cases these are the same. I don’t think there is a way to get the cascaded value in Mozilla/DOM and there is no way to get the computed value in IE.

  • http://dean.edwards.name/ Dean Edwards

    OOh i like your runtimeStyle. gonna use that for definite. i think i’m gonna support “document.all” by adapting your approach as well. there is a problem with getComputedStyle in that it is exactly what it says – computed. colours tend to be rgb values etc. i don’t think this is a major problem for dhtml apps – you are never going to get total harmony between the two platforms (there are differences between versions of IE as well).
    it looks like between the of us we could build a pretty decent IE emulator. you seemed to have done more work than me in this area. so let’s stay in touch. i’ll keep an eye on your ie-emu page.
    incidentally i’ve built a couple of behaviors that make IE a bit more W3C compatible, take a look:

    http://dean.edwards.name/my/behaviors/

    my site is a bit flaky at the moment (it’s running off a box in my kitchen) but it’s never down for more than an hour.

    cheers

    dean

  • Markus Hartman

    Dean, Iam working with your code to set up a proof of concept, but there is only one thing i cant get working: the
    for example…
    if i use it on a anchor tag like
    it works fine for IE but on FF i get an error that it cant find the property.

    any ideas?

  • Markus Hartman

    Oops that did’t work :)

    in htc:
    <public:property name=”hilitecolor”/>

    in html
    <a hilitecolor=”blue” class=” ect ect” />

  • Nish

    Dean.. i am using a css entry as

    .abz{
    behavior: url(abz.htc) ;
    }

    and then using this class in the HTML. this obviously is not working for mozilla. how do i include your workaorund here?

  • Jayesh

    I have one querry that is how can i use is in HTC (where GetOwnerWindow is userdefined function) file and i want to use in XML file where i wrote the XBL binding
    thanks in Advance
    Jayesh