Behavioral Extensions to CSS

W3C Working Draft 2 May 2012

This version:
Latest version:
Previous version:
Ian Hickson, Google, Inc.


Behavioral Extensions provide a way to link to binding technologies, such as XBL, from CSS style sheets. This allows bindings to be selected using the CSS cascade, and thus enables bindings to transparently benefit from the user style sheet mechanism, media selection, and alternate style sheets.

Status of this document

This section describes the status of this document at the time of its publication. Other documents may supersede this document. A list of current W3C publications and the latest revision of this technical report can be found in the W3C technical reports index at http://www.w3.org/TR/.

This is the 2 May 2012 Working Draft of Behavioral Extensions to CSS.

If you wish to make comments regarding this document, please send them to www-style@w3.org (subscribe, archives).

Implementors should be aware that this specification is not stable. Implementors who are not taking part in the discussions are likely to find the specification changing out from under them in incompatible ways. Vendors interested in implementing this specification before it eventually reaches the Candidate Recommendation stage should join the aforementioned mailing list and take part in the discussions.

The editor's copy of this specification is available in W3C CVS. A detailed list of changes is available from the CVS server.

In 1999, the CSS working group worked on a Behavioral Extensions to CSS specification that proposed syntax for actual binding definitions. Since then, separate languages have been developed for this purpose (e.g. XBL), and the CSS-specific way of defining bindings has been dropped.

CSS is still useful for connecting these binding languages to actual elements, however. This specification defines two features of CSS that can be used with any such binding language.

This document is produced by the CSS working group (part of the Style Activity, see summary).

Publication as a Working Draft does not imply endorsement by the W3C Membership. This is a draft document and may be updated, replaced or obsoleted by other documents at any time. It is inappropriate to cite this document as other than work in progress.

Publication as a Working Draft does not imply endorsement by the W3C Membership. This is a draft document and may be updated, replaced or obsoleted by other documents at any time. It is inappropriate to cite this document as other than work in progress.

This document was produced by a group operating under the 5 February 2004 W3C Patent Policy. W3C maintains a public list of any patent disclosures made in connection with the deliverables of the group; that page also includes instructions for disclosing a patent. An individual who has actual knowledge of a patent which the individual believes contains Essential Claim(s) must disclose the information in accordance with section 6 of the W3C Patent Policy.

Table of contents

1. Conformance

A CSS UA is not expected to support this module unless it also supports a binding language such as XBL. A user agent cannot comply to this specification without also supporting one or more binding languages such as XBL. [XBL2]

In this specification, the word "must" is used to indicate conformance, and is to be interpreted as described in [RFC2119].

A conformant user agent is one that implements all the requirements (the "must" statements) listed in this specification, while also being consistent with the requirements of all the binding languages that it supports that use the features of this specification.

2. Terminology

A definition of presentation or behavior that can be attached to an element.
Bound element
An element to which a binding has been attached.

3. Binding attachment with CSS

Bindings can be attached to elements through CSS using the 'binding' property.

In the following example, a binding is referenced that will be attached to all XHTML checkbox elements.

input[type="checkbox"] {
  binding: url("http://example.org/htmlBindings.xml#checkbox");

Bindings attached through CSS must only remain on the bound element as long as the element continues to match the style rule. If at any time a resolution of style on the element determines that a different binding should be attached, the old binding must be detached.

Whenever an element is removed from a document, any bindings attached to that element via CSS must be detached.

3.1. The 'binding' property

A property to attach a binding to a particular element.

Value: none | [ <uri> ]* <uri>
Initial: none
Applies To: all elements (but not pseudo-elements)
Inherited: no
Percentages: n/a
Media: all
Computed Value: specified value, with URIs resolved to absolute URIs
No bindings are to be attached through CSS.
The specified binding is attached. More than one binding can be specified, resulting in the bindings being attached in the specified order. The relevant language specification(s) define how multiple bindings interact. When the bindings interact through linear inheritance, the last binding specified must inherit from the previous one, and so forth, up to the first binding.

When a specified URI cannot be used, e.g. due to network errors or because the specified binding is in an unsupported language, that specified URI must be ignored, without affecting the other URIs specified.

3.2. Processing model

User agents may perform the CSS cascade, inheritance, and computation stages either:

Such processing may occur either before applying bindings, or at the same time as applying bindings. In either case, and for each element, the computed value of 'binding' must be found and then used to apply the bindings to the element. This must occur when the element is first styled, and for each subsequent change of the styles that match the element.

Since each time a binding is applied it can change the computed values of properties of elements that are descendants of the bound element, this may require several passes. This may be avoided by computing the value of the 'binding' property for the element, and then applying any bindings, before any of its descendants.

3.3. Example

The following XBL document defines two bindings for use in SVG. The first renders an isosceles triangle in place of bound elements that use it, the other renders a right-angled triangle in place of bound elements that use it.

<html xmlns="http://www.w3.org/1999/xhtml">
 <binding id="isosceles">
   <polygon attributes="transform" points="0 -1, 1 0, -1 0" xmlns="http://www.w3.org/2000/svg"/>
 <binding id="rightangle">
   <polygon attributes="transform" points="0 0, 1 0, 0 -1" xmlns="http://www.w3.org/2000/svg"/>

Assuming the above file was called triangles.xml, these bindings could be bound to elements using CSS like so:

@namespace tri url(http://ns.example.com/triangles);
tri|isoceles { binding: url(triangles.xml#isoceles); }
tri|rightangle { binding: url(triangles.xml#rightangle); }

If the stylesheet was called triangles.css, an SVG file using these elements might look like:

<?xml-stylesheet href="triangles.css"?>
<svg xmlns="http://www.w3.org/2000/svg"
 <circle cx="10" cy="10" r="5"/>
 <rect x="20" y="20" height="5" width="10"/>
 <t:isoceles transform="translate(10 20) scale(10)"/>
 <t:rightangle transform="translate(20 20) scale(10)"/>

The same example could also be done all in one file like this:

<svg xmlns="http://www.w3.org/2000/svg"
  <binding id="isosceles" xmlns="http://www.w3.org/1999/xhtml">
    <polygon attributes="transform" points="0 -1, 1 0, -1 0" xmlns="http://www.w3.org/2000/svg"/>
  <binding id="rightangle" xmlns="http://www.w3.org/1999/xhtml">
    <polygon attributes="transform" points="0 0, 1 0, 0 -1" xmlns="http://www.w3.org/2000/svg"/>
  <style type="text/css">
   @namespace tri url(http://ns.example.com/triangles);
   tri|isoceles { binding: url(#isoceles); }
   tri|rightangle { binding: url(#rightangle); }
 <circle cx="10" cy="10" r="5"/>
 <rect x="20" y="20" height="5" width="10"/>
 <t:isoceles transform="translate(10 20) scale(10)"/>
 <t:rightangle transform="translate(20 20) scale(10)"/>

4. The :bound-element pseudo-class

The :bound-element pseudo-class, when used from a binding, must match the bound element of that binding. If the selector is used in a context that is not specific to a binding, then it must match any bound element. [SELECTORS]

Although the :bound-element pseudo-class is not directly dependent on the 'binding' property, specifying the 'binding' property on a CSS rule that uses the :bound-element pseudo-class on the last sequence of simple selectors can lead to an infinite loop. Authors should avoid doing this.

4.1. Example

The following example shows an XBL binding that uses this pseudo-class to to draw a border around each of the children of the bound element, but no other elements:

  <style scoped>
   :bound-element > * { border: solid; }
  <content allow-selectors-through="true"></content>


The editor would like to thank Anne van Kesteren, David Håsäther, Lachlan Hunt, Matthew Raymond, and Steve Zilles for their contributions to this specification.

The editor would also like to acknowledge Vidur Apparao, Daniel Glazman, and Chris Wilson, editors of the 1999 Behavioral Extensions to CSS draft, whose work laid the foundation for this draft.


Key words for use in RFCs to Indicate Requirement Levels, S. Bradner. IETF, March 1997. RFC 2119 is available at http://www.ietf.org/rfc/rfc2119.txt
Selectors, D. Glazman, T. Çelik, I. Hickson. W3C.
(Informative) XBL 2.0, I. Hickson. W3C.