You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
494 lines
20 KiB
494 lines
20 KiB
<!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> © 2007 <a
|
|
href="http://www.w3.org/"><acronym title="World Wide Web
|
|
Consortium">W3C</acronym></a><sup>®</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 | [ <uri> ]* <uri>
|
|
|
|
<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><uri>
|
|
|
|
<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><xbl xmlns="http://www.w3.org/ns/xbl"
|
|
xmlns:xbl="http://www.w3.org/ns/xbl">
|
|
<binding id="isosceles">
|
|
<template>
|
|
<polygon xbl:inherits="transform" points="0 -1, 1 0, -1 0" xmlns="http://www.w3.org/2000/svg"/>
|
|
</template>
|
|
</binding>
|
|
<binding id="rightangle">
|
|
<template>
|
|
<polygon xbl:inherits="transform" points="0 0, 1 0, 0 -1" xmlns="http://www.w3.org/2000/svg"/>
|
|
</template>
|
|
</binding>
|
|
</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><?xml-stylesheet href="triangles.css"?>
|
|
<svg xmlns="http://www.w3.org/2000/svg"
|
|
xmlns:t="http://ns.example.com/triangles">
|
|
<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)"/>
|
|
</svg></pre>
|
|
|
|
<p>The same example could also be done all in one file like this:</p>
|
|
|
|
<pre><svg xmlns="http://www.w3.org/2000/svg"
|
|
xmlns:t="http://ns.example.com/triangles">
|
|
<defs>
|
|
<xbl xmlns="http://www.w3.org/ns/xbl"
|
|
xmlns:xbl="http://www.w3.org/ns/xbl">
|
|
<binding id="isosceles">
|
|
<template>
|
|
<polygon xbl:inherits="transform" points="0 -1, 1 0, -1 0" xmlns="http://www.w3.org/2000/svg"/>
|
|
</template>
|
|
</binding>
|
|
<binding id="rightangle">
|
|
<template>
|
|
<polygon xbl:inherits="transform" points="0 0, 1 0, 0 -1" xmlns="http://www.w3.org/2000/svg"/>
|
|
</template>
|
|
</binding>
|
|
</xbl>
|
|
<style type="text/css">
|
|
@namespace tri url(http://ns.example.com/triangles);
|
|
tri|isoceles { binding: url(#isoceles); }
|
|
tri|rightangle { binding: url(#rightangle); }
|
|
</style>
|
|
</defs>
|
|
<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)"/>
|
|
</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><xbl xmlns="http://www.w3.org/ns/xbl">
|
|
<binding>
|
|
<template><content allow-selectors-through="true"/></template>
|
|
<style>
|
|
:bound-element > * { border: solid; }
|
|
</style>
|
|
</binding>
|
|
</xbl></pre>
|
|
</div>
|
|
|
|
<h2 class=no-num id=acknowledgments>Acknowledgments</h2>
|
|
|
|
<p>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.</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. Ç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>
|