View Full Version : -moz-binding

07-09-2002, 09:20 AM
Just curious to know...
what does '-moz-binding' do or mean?

07-09-2002, 11:15 AM
Honestly, I have NO clue.

But I found the following link with a quick Google search:


There were many other links, but this looked pretty decent.

07-09-2002, 01:49 PM
It's used for XBL bindings.

07-09-2002, 08:37 PM
And if you're curious what XBL bindings are - you have a resident expert on the forum so don't hesitate to ask. :)

self == ProjectOwner('MozDev Project', 'LayerEmu') :D

07-09-2002, 08:41 PM
haha :)

07-10-2002, 06:07 AM
All I know is that XBL stands for eXtensible Binding Language. If somebody could explain how actually to implement a binding, it would be great!

07-10-2002, 07:25 AM
Are you familiar with IE's ViewLink or Element behaviors?

XBL is basically the same idea, but implemented more intelligently imho.

Basically, a binding is applied through the moz-CSS property, -moz-binding, or through a method of the DocumentXBL interface, addBinding (not sure if that method is currently broken though).

A binding declares several things:

1. Anonymous content
These are nodes generated by the binding, and inserted underneath the bound element. They are invisible to the page's DOM. You can define insertion points via <children/> inside <content>. The concept of anonymous content is like IE's ViewLink content, and can be though of:

some children

When bound, if the <content> looks like <button><children/></button, you effectively have rendered:

<button>some children</button>

But in the page's DOM:
refToDiv.firstChild.nodeValue == 'some children';

The button element doesn't exist. You need to use document.getAnonymousNodes(element)

Which returns a NodeList of the anonymous nodes in element.

Anyway, after <content>, and inside the <implementation> element, you have two related nodes:




(I personally haven't used <destructor>, but am pretty sure it functions).

All the Javascript code inside of <constructor> is executed when the element is bound, i.e. kind of like the onload event, but this is specific to the successful binding. It replaced the event onbindingattached.

<destructor> is the opposite, and replaced onbindingdetached.

Also in the <implementation>, you have 0 or more <property> elements. These define properties the bound element may have. You also have <method> elements, which define the methods the element has.

Finally, a sibling to <implementation>, you have <handlers>, which can have <handler> elements, and applies event handlers to the element.

Read that link to the XULPlanet tutorial for more info, and if you want to see a working binding (the one I am using for the LayerEmu project), take a look at:

Ignore the scary trilicense at the top, and don't be turned off by the monstrous <constructor> - it actually makes a lot of sense once you get used to XBL. :)

07-10-2002, 07:27 AM
Also take a look at


To see how bindings are applied through CSS.




03-14-2008, 05:07 PM
Hi all,

I have been working on a XBL file to implement soft hyphenation (& shy; ) support for Geckos pre firefox 3 using -mos-binding:. Follows a working code for firefox 2:

<?xml version = "1.0"?>
<bindings xmlns = "http://www.mozilla.org/xbl" xmlns:html = "http://www.w3.org/1999/xhtml">
<binding id = "shy" applyauthorstyles = "false">

function fakeHyphen(container){
for(var i=0; i<container.childNodes.length; i++){
var node = container.childNodes[i];
if (node.nodeType == 3){
var list = node.data.split('\xAD');
var newNode = document.createElement('span');
var result;
for (var i = 1; i < list.length; i++) {
var index = list[i].search(/\s/);
var block = [list[i].slice(0,index), list[i].slice(index,list[i].length)];
var parentSpan = document.createElement('span');
parentSpan.appendChild(document.createTextNode('- '));
var childSpan = document.createElement('span');
var textNode = document.createTextNode(block[0]);
if (parentSpan.offsetTop == childSpan.offsetTop) {
newNode.appendChild(document.createTextNode('- '));

var element = this;


Although it was only used standard dom 2 javascript, and -moz-binding: is supported by all Geckos (I think), it do not work in Netscape 7.* nor Netscape 8.

Do someone have an idea why it do not work, or what can be done in order to work?