This is a revisited attempt at my first post on this subject.
The objective is to test how XBL can be locally attached to HTML elements of an arbitrary web page. By locally attached I mean that the binding is local, not the XBL itself. In other words, that the CSS directive
-moz-binding: url(<URL to some XBL file>)
takes place either directly in userContent.css or equivalently via the Stylish extension.
To this end I created three input boxes to which I will bind an XBL file through a CSS directive. In each case, the XBL is served with a different content-type. The desired effect is that the input box gets replaced with a multi-line text area.
These are the CSS directives. I used class names 'a', 'b' and 'c' to target each style to each input box individually.
Content type: text/xml
input.a{
display: none !important;
-moz-binding: url(http://content-type.appjet.net/cgi?ct=text/xml&url=http://esquifit.googlepages.com/input.xml#filter) !important;}
Content type: application/xml
input.b{
display: none !important;
-moz-binding: url(http://content-type.appjet.net/cgi?ct=application/xml&url=http://esquifit.googlepages.com/input.xml#filter) !important;}
Content type: text/xml-xbl
input.c{
display: none !important;
-moz-binding: url(http://content-type.appjet.net/cgi?ct=text/xml-xbl&url=http://esquifit.googlepages.com/input.xml#filter) !important;}
Theses are the input boxes:
