WD-becss-20071019 19.8 KB

Raw Blame History Permalink

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">

<html lang=en-US>
 <head>
  <title>Behavioral Extensions to CSS</title>

  <style type="text/css">
   dt, dfn { font-weight: bold; font-style: normal; }
   .main h4 { margin: 1.5em 0 0.75em 0; }
   .main p { margin: 1em 0; }
   .main dl, .main dd { margin-top: 0; margin-bottom: 0; }
   .main dt { margin-top: 0.75em; margin-bottom: 0.25em; clear: left; }
   .main dd dt { margin-top: 0.25em; margin-bottom: 0; }
   .main dd p { margin-top: 0; }
   .main p + * > li, .main dd li { margin: 1em 0; }
   img.extra { float: right; }
   body ins, body del { display: block; }
   body * ins, body * del { display: inline; }
   pre, code { color: black; background: transparent; font-size: inherit; font-family: monospace; }
   pre strong { color: fuchsia; background: transparent; font: inherit; font-weight: bold; }
   pre em { color: teal; background: transparent; font-weight: bolder; font-style: normal; }
   pre.idl :link, pre.idl :visited { color: inherit; background: transparent; }
   pre.idl { border: solid thin; background: #EEEEEE; color: black; padding: 0.5em; }
   table { border-collapse: collapse; border-style: hidden hidden none hidden; }
   table thead { border-bottom: solid; }
   table tbody th:first-child { border-left: solid; }
   table td, table th { border-left: solid; border-right: solid; border-bottom: solid thin; vertical-align: top; padding: 0.2em; }
   ul.toc dfn, h1 dfn, h2 dfn, h3 dfn, h4 dfn, h5 dfn, h6 dfn { font: inherit; }
   .main > ul.toc > li { margin-bottom: 0.5em; }
   var sub { vertical-align: bottom; font-size: smaller; position: relative; top: 0.1em; }
   @media screen { code { color: rgb(255, 69, 0); background: transparent; } }
   code :link, code :visited { color: inherit; background: transparent; }
   .example { display: block; color: #222222; background: #FCFCFC; border-left: double; margin: 1em 0 1em 1em; padding-left: 1em; }
   .issue, .big-issue { color: #E50000; background: white; border: solid red; padding: 0.5em; margin: 1em 0; }
   .issue > :first-child, .big-issue > :first-child { margin-top: 0; }
   p .big-issue { line-height: 3em; }
   .note { color: green; background: transparent; }
   .note { font-family: sans-serif; }
   p.note:before { content: 'Note: '; }
   .warning { color: red; background: transparent; }
   .warning:before { font-style: normal; }
   p.warning:before { content: '\26A0 Warning! '; }
   .note, .warning { font-weight: bolder; font-style: italic; padding: 0.5em 2em; }
   .copyright { margin: 0.25em 0; }
  </style>
  <link href="http://www.w3.org/StyleSheets/TR/W3C-WD" rel=stylesheet
  type="text/css">

 <body>
  <div class=main>
   <div class=head> <!--begin-logo-->
    <p><a href="http://www.w3.org/"><img alt=W3C height=48
     src="http://www.w3.org/Icons/w3c_home" width=72></a> <!--end-logo-->

    <h1 id=behavioral>Behavioral Extensions to CSS</h1>

    <h2 class="no-num no-toc" id=longstatus>W3C Working Draft 19 October 2007</h2>

    <dl>
     <dt>This version:

     <dd><a
      href="http://www.w3.org/TR/2007/WD-becss-20071019">http://www.w3.org/TR/2007/WD-becss-20071019</a>

     <dt>Latest version:

     <dd><a href="http://www.w3.org/TR/becss">http://www.w3.org/TR/becss</a>

     <dt>Previous version:

     <dd><a
      href="http://www.w3.org/TR/1999/WD-becss-19990804">http://www.w3.org/TR/1999/WD-becss-19990804</a>

     <dt>Editors:

     <dd><a href="mailto:ian@hixie.ch">Ian Hickson</a>, Google, Inc.
    </dl>
    <!--begin-copyright-->
    <p class=copyright><a
     href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
     rel=license>Copyright</a> &copy; 2007 <a
     href="http://www.w3.org/"><acronym title="World Wide Web
     Consortium">W3C</acronym></a><sup>&reg;</sup> (<a
     href="http://www.csail.mit.edu/"><acronym title="Massachusetts Institute
     of Technology">MIT</acronym></a>, <a
     href="http://www.ercim.org/"><acronym title="European Research
     Consortium for Informatics and Mathematics">ERCIM</acronym></a>, <a
     href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved. W3C <a
     href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>,
     <a
     href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>
     and <a
     href="http://www.w3.org/Consortium/Legal/copyright-documents">document
     use</a> rules apply.</p>
    <!--end-copyright-->
    <hr title="Separator for header">
   </div>

   <h2 class="no-num no-toc" id=abstract>Abstract</h2>

   <p>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.</p>

   <h2 class="no-num no-toc" id=status>Status of this document</h2>

   <p><em>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 <a href="http://www.w3.org/TR/">W3C technical reports
    index</a> at http://www.w3.org/TR/.</em></p>
   <!-- required boilerplate -->
   <!-- next four paragraphs give three required items: what this spec
  is, where to send comments, the fact that the spec is unstable, and
  the list of changes; wording is flexible -->

   <p>This is the 19 October 2007 Working Draft of Behavioral Extensions to
    CSS.</p>

   <p>If you wish to make comments regarding this document, please send them
    to <a href="mailto:www-style@w3.org">www-style@w3.org</a> (<a
    href="mailto:www-style-request@w3.org?subject=subscribe">subscribe</a>,
    <a href="http://lists.w3.org/Archives/Public/www-style/">archives</a>).</p>

   <p>Implementors should be aware that this specification is not stable.
    <strong>Implementors who are not taking part in the discussions are
    likely to find the specification changing out from under them in
    incompatible ways.</strong> 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.</p>

   <p>The editor's copy of this specification is <a
    href="http://dev.w3.org/2006/xbl2/css-module.html">available in W3C
    CVS</a>. A <a href="http://dev.w3.org/cvsweb/2006/xbl2/">detailed list of
    changes</a> is available from the CVS server.</p>
   <!-- history (optional) -->
   <p>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.</p>

   <p>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.</p>
   <!-- next three paragraphs are legal things and w3c process -->
   <p>This document is produced by the <a href="/Style/CSS/members">CSS
    working group</a> (part of the <a href="/Style/">Style Activity</a>, see
    <a href="/Style/Activity">summary</a>). <!-- this statement is
  required but the wording doesn't matter -->


   <p>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.</p>
   <!-- required boilerplate -->
   <p>This document was produced by a group operating under the <a
    href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 February
    2004 W3C Patent Policy</a>. W3C maintains a <a
    href="http://www.w3.org/2004/01/pp-impl/32061/status"
    rel=disclosure>public list of any patent disclosures</a> 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 <a
    href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential
    Claim(s)</a> must disclose the information in accordance with <a
    href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section
    6 of the W3C Patent Policy</a>.</p>
   <!-- required boilerplate -->
   <h2 class="no-num no-toc" id=contents>Table of contents</h2>
   <!--begin-toc-->
   <ul class=toc>
    <li><a href="#conformance"><span class=secno>1. </span>Conformance</a>

    <li><a href="#terminology"><span class=secno>2. </span>Terminology</a>

    <li><a href="#binding"><span class=secno>3. </span>Binding attachment
     with CSS</a>
     <ul class=toc>
      <li><a href="#the-binding"><span class=secno>3.1. </span>The
       '<code>binding</code>' property</a>

      <li><a href="#processing"><span class=secno>3.2. </span>Processing
       model</a>

      <li><a href="#example"><span class=secno>3.3. </span>Example</a>
     </ul>

    <li><a href="#the-bound-element"><span class=secno>4. </span>The
     <code>:bound-element</code> pseudo-class</a>
     <ul class=toc>
      <li><a href="#example0"><span class=secno>4.1. </span>Example</a>
     </ul>

    <li class=no-num><a href="#acknowledgments">Acknowledgments</a>

    <li class=no-num><a href="#references">References</a>
   </ul>
   <!--end-toc-->
   <h2 id=conformance><span class=secno>1. </span>Conformance</h2>

   <p>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. <a href="#refsXBL2">[XBL2]</a></p>

   <p>In this specification, the word "must" is used to indicate conformance,
    and is to be interpreted as described in <a
    href="#refsRFC2119">[RFC2119]</a>.</p>

   <p>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.</p>

   <h2 id=terminology><span class=secno>2. </span>Terminology</h2>

   <dl>
    <dt><dfn id=binding1>Binding</dfn>

    <dd>A definition of presentation or behavior that can be attached to an
     element.

    <dt><dfn id=bound>Bound element</dfn>

    <dd>An element to which a binding has been attached.
   </dl>

   <h2 id=binding><span class=secno>3. </span>Binding attachment with CSS</h2>

   <p>Bindings can be attached to elements through CSS using the <a
    href="#binding1">'binding'</a> property.</p>

   <div class=example>
    <p>In the following example, a binding is referenced that will be
     attached to all XHTML checkbox elements.</p>

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

   <p>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.</p>

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

   <h3 id=the-binding><span class=secno>3.1. </span>The '<code><a
    href="#binding1">binding</a></code>' property</h3>

   <p>A property to attach a binding to a particular element.</p>

   <table class=propdef id=binding0>
    <caption> <dfn id=binding2 title="binding property">'binding'</dfn></caption>

    <tbody>
     <tr>
      <td><em>Value:</em>

      <td>none | [ &lt;uri&gt; ]* &lt;uri&gt;

     <tr>
      <td><em>Initial:</em>

      <td>none

     <tr>
      <td><em>Applies To:</em>

      <td>all elements (but not pseudo-elements)

     <tr>
      <td><em title="">Inherited:</em>

      <td>no

     <tr>
      <td><em>Percentages:</em>

      <td>n/a

     <tr>
      <td><em>Media:</em>

      <td>all

     <tr>
      <td><em>Computed Value:</em>

      <td>specified value, with URIs resolved to absolute URIs
   </table>

   <dl>
    <dt>none

    <dd>No bindings are to be attached through CSS.

    <dt>&lt;uri&gt;

    <dd>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.
   </dl>

   <p>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.</p>

   <h3 id=processing><span class=secno>3.2. </span>Processing model</h3>

   <p>User agents may perform the CSS cascade, inheritance, and computation
    stages either:</p>

   <ul>
    <li>across the entire tree, doing all elements and all properties
     simultaneously,

    <li>on a per-element basis, doing all the properties for each element in
     turn,

    <li>on a per-property basis, doing all the elements for each property in
     turn, or

    <li>on a per-element, per-property basis, doing the properties for
     individual elements as needed.
   </ul>

   <p>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.</p>

   <p>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.</p>

   <h3 id=example><span class=secno>3.3. </span>Example</h3>

   <div class=example id=triangles-example>
    <p>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.</p>

    <pre>&lt;xbl xmlns="http://www.w3.org/ns/xbl"
     xmlns:xbl="http://www.w3.org/ns/xbl">
 &lt;binding id="isosceles">
  &lt;template>
   &lt;polygon xbl:inherits="transform" points="0 -1, 1 0, -1 0" xmlns="http://www.w3.org/2000/svg"/>
  &lt;/template>
 &lt;/binding>
 &lt;binding id="rightangle">
  &lt;template>
   &lt;polygon xbl:inherits="transform" points="0 0, 1 0, 0 -1" xmlns="http://www.w3.org/2000/svg"/>
  &lt;/template>
 &lt;/binding>
&lt;/xbl></pre>

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

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

    <p>If the stylesheet was called <code>triangles.css</code>, an SVG file
     using these elements might look like:</p>

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

    <p>The same example could also be done all in one file like this:</p>

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

   <h2 id=the-bound-element><span class=secno>4. </span>The <code><a
    href="#bound-element">:bound-element</a></code> pseudo-class</h2>

   <p>The <dfn id=bound-element><code>:bound-element</code></dfn>
    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. <a
    href="#refsSELECTORS">[SELECTORS]</a></p>

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

   <h3 id=example0><span class=secno>4.1. </span>Example</h3>

   <div class=example id=bound-element-example>
    <p>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:</p>

    <pre>&lt;xbl xmlns="http://www.w3.org/ns/xbl">
 &lt;binding>
  &lt;template>&lt;content allow-selectors-through="true"/>&lt;/template>
  &lt;style>
   :bound-element > * { border: solid; }
  &lt;/style>
 &lt;/binding>
&lt;/xbl></pre>
   </div>

   <h2 class=no-num id=acknowledgments>Acknowledgments</h2>

   <p>The editor would like to thank Anne van Kesteren, David
    H&aring;s&auml;ther, Lachlan Hunt, Matthew Raymond, and Steve Zilles for
    their contributions to this specification.</p>

   <p>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.</p>

   <h2 class=no-num id=references>References</h2>

   <dl>
    <dt id=refsRFC2119>[RFC2119]

    <dd><cite><a href="http://www.ietf.org/rfc/rfc2119.txt">Key words for use
     in RFCs to Indicate Requirement Levels</a></cite>, S. Bradner. IETF,
     March 1997. RFC 2119 is available at http://www.ietf.org/rfc/rfc2119.txt

    <dt id=refsSELECTORS>[SELECTORS]

    <dd><cite><a
     href="http://www.w3.org/TR/2005/WD-css3-selectors-20051215/">Selectors</a></cite>,
     D. Glazman, T. &Ccedil;elik, I. Hickson. W3C, December 2005. The latest
     version of the Selectors specification is available at <a
     href="http://www.w3.org/TR/css3-selectors/">http://www.w3.org/TR/css3-selectors/</a>

    <dt id=refsXBL2>[XBL2]

    <dd>(Informative) <cite><a
     href="http://www.w3.org/TR/2007/CR-xbl-20070316/">XML Binding Language
     (XBL) 2.0</a></cite>, I. Hickson. W3C, March 2007. The latest version of
     the XBL specification is available at <a
     href="http://www.w3.org/TR/xbl/">http://www.w3.org/TR/xbl/</a>
   </dl>
  </div>