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.
397 lines
14 KiB
397 lines
14 KiB
<?xml version="1.0" encoding="ISO-8859-1"?>
|
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
|
|
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
|
|
|
<html lang="en">
|
|
<head>
|
|
<title>CSS3 module: Presentation Levels</title>
|
|
|
|
<link href="default.css" rel="stylesheet" title="Default" type="text/css" />
|
|
|
|
<link href="http://www.w3.org/StyleSheets/TR/W3C-WD.css" rel="stylesheet"
|
|
title="Default" type="text/css" />
|
|
</head>
|
|
|
|
<body>
|
|
<div class="head">
|
|
<p><a href="http://www.w3.org/"><img alt="W3C" height="48"
|
|
src="http://www.w3.org/Icons/w3c_home" width="72" /></a></p>
|
|
|
|
<h1 id="title">CSS3 module: Presentation Levels</h1>
|
|
|
|
<h2 class="no-num no-toc" id="W3C-doctype">W3C Working Draft 13 August 2003</h2>
|
|
|
|
<dl>
|
|
<dt>This version:</dt>
|
|
|
|
<dd><a
|
|
href="http://www.w3.org/TR/2003/WD-css3-preslev-20030813">http://www.w3.org/TR/2003/WD-css3-preslev-20030813</a></dd>
|
|
|
|
<dt>Latest version:</dt>
|
|
|
|
<dd><a
|
|
href="http://www.w3.org/TR/css3-preslev">http://www.w3.org/TR/css3-preslev</a></dd>
|
|
|
|
<dt>Editors:</dt>
|
|
|
|
<dd><a href="http://ian.hixie.ch/" lang="en">Ian Hickson</a>
|
|
<ian @hixie.ch></dd>
|
|
|
|
<dd><a href="http://people.opera.com/howcome/" lang="no">Håkon Wium Lie</a>
|
|
<howcome @opera.com></dd>
|
|
</dl>
|
|
<!--begin-copyright-->
|
|
<p class="copyright"><a
|
|
href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"> Copyright</a>
|
|
© 2003 <a href="http://www.w3.org/"><abbr title="World Wide Web
|
|
Consortium">W3C</abbr></a><sup>®</sup> (<a
|
|
href="http://www.lcs.mit.edu/"><abbr title="Massachusetts Institute of
|
|
Technology">MIT</abbr></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>,
|
|
<a href="http://www.w3.org/Consortium/Legal/copyright-documents">document
|
|
use</a> and <a
|
|
href="http://www.w3.org/Consortium/Legal/copyright-software">software
|
|
licensing</a> rules apply.</p>
|
|
<!--end-copyright-->
|
|
<hr title="Separator for header" />
|
|
</div>
|
|
|
|
<h2 class="no-num no-toc" id="abstract">Abstract</h2>
|
|
|
|
<p>Presentation levels are integer values attached to elements in a document.
|
|
Elements that are below, at, or above a certain threshold can be styled
|
|
differently. This feature has two compelling use cases. First, slide
|
|
presentations with transition effects can be described. For example, list
|
|
items can be progressively revealed by sliding in from the side. Second,
|
|
outline views of documents, where only the headings to a certain level are
|
|
visible, can be generated.</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>
|
|
|
|
<p>This document is a working draft of the CSS working group, which is part
|
|
of the <a href="/Style/">style activity</a> (see <a
|
|
href="/Style/Activity">summary</a>).</p>
|
|
|
|
<p>The working group believes this draft describes useful functionality for
|
|
presenting web documents. Comments on, and discussions of this draft can be
|
|
sent on the (<a
|
|
href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) public
|
|
mailing list <a href="mailto:www-style@w3.org">www-style@w3.org</a> (see <a
|
|
href="http://www.w3.org/Mail/Request">instructions</a>). W3C Members can also
|
|
send comments directly to the CSS working group.</p>
|
|
|
|
<p>It is inappropriate to use W3C Working Drafts as reference material or to
|
|
cite them as other than "work in progress". Its publication does not imply
|
|
endorsement by the W3C membership or the <a
|
|
href="http://www.w3.org/Style/Group">CSS Working Group</a> (<a
|
|
href="http://cgi.w3.org/MemberAccess/AccessRequest">members only</a>).</p>
|
|
|
|
<p>Patent disclosures relevant to CSS may be found on the Working Group's
|
|
public <a href="http://www.w3.org/Style/CSS/Disclosures">patent disclosure
|
|
page.</a></p>
|
|
|
|
<h2 class="no-num no-toc" id="toc">Table of contents</h2>
|
|
<!--begin-toc-->
|
|
|
|
<ul class="toc">
|
|
<li><a href="#themodel"><span class="secno">1. </span>The model</a></li>
|
|
|
|
<li><a href="#presentation-level-property"><span class="secno">2. </span>The
|
|
'presentation-level' property</a></li>
|
|
|
|
<li><a href="#example1"><span class="secno">3. </span>Example 1:
|
|
progressively revealing list items</a></li>
|
|
|
|
<li><a href="#example2"><span class="secno">4. </span>Example 2: presenting
|
|
outline views of a document</a></li>
|
|
|
|
<li><a href="#dom"><span class="secno">5. </span>Presentation levels and the
|
|
DOM</a></li>
|
|
</ul>
|
|
<!--end-toc-->
|
|
|
|
<h2 id="themodel"><span class="secno">1. </span>The model</h2>
|
|
|
|
<p>Content reuse has been one of the main motivations for the development of
|
|
style sheets. By associating documents with different style sheets, the same
|
|
content can be presented in different ways. The introduction of
|
|
<em>presentation levels</em> in CSS adds functionality which is very useful
|
|
in two particular settings. First, slide presentations with transition
|
|
effects can be described. For example, list items can be progressively
|
|
revealed by sliding in from the side. Second, outline views of documents,
|
|
where only the headings to a certain level are visible, can be generated.</p>
|
|
|
|
<p>The model behind presentation levels is simple. Each element in the
|
|
document is assigned an integer value which is referred to as the "element's
|
|
presentation level" (EPL). The EPL can be set explicitly in a style sheet or
|
|
calculated automatically based on the element's position in the document
|
|
structure: it is specified by the computed value of the <span
|
|
class="property"><a
|
|
href="#presentation-level">'presentation-level'</a></span> property. The User
|
|
Agent maintains another integer value which is called the User Agent
|
|
Presentation Value (UAPL). The UAPL starts at a UA-defined value, typically
|
|
0.</p>
|
|
|
|
<p>All elements are in one of three presentation pseudo-classes: <span
|
|
class="css">'below-level'</span>, <span class="css">'at-level'</span>, and
|
|
<span class="css">'above-level'</span>. These pseudo-classes refer to whether
|
|
the element's EPL was below, at, or above the UAPL the last time the UAPL
|
|
changed. When an element's state is evaluated, the EPL is compared to the
|
|
UAPL and pseudo-classes are assigned as follows: If the EPL is equal to 0,
|
|
the element is always in the below-level state. If the EPL is lower than the
|
|
UAPL value, it is set to the 'below-level' state, if the EPL is exactly that
|
|
value it is set to 'at-level', and if the EPL is greater than that value it
|
|
is set to 'above-level'.</p>
|
|
|
|
<p>Here is an example of a style sheets using the presentation
|
|
pseudo-classes:</p>
|
|
|
|
<pre>
|
|
:below-level { color: black }
|
|
:at-level { color: red }
|
|
:above-level { color: silver }
|
|
</pre>
|
|
|
|
<p>This proposal does not describe the user interface of presentation levels.
|
|
The user agent will need to provide a user interface for setting the UAPL.
|
|
For example, in projection mode, a user agent may increase the UAPL every
|
|
time the user hits the space bar. When the user moves to another page (for
|
|
example by following a hyperlink), the user agent may set the UAPL to be the
|
|
same as presentation level of the first element on the page. In outline mode,
|
|
the user agent may provide a vertical slider on the side to increase/decrease
|
|
the UAPL.</p>
|
|
|
|
<h2 id="presentation-level-property"><span class="secno">2. </span>The
|
|
'presentation-level' property</h2>
|
|
|
|
<table class="propdef" id="name-">
|
|
<tbody>
|
|
<tr>
|
|
<td><em>Name:</em></td>
|
|
|
|
<td><dfn id="presentation-level">presentation-level</dfn></td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td><em>Value:</em></td>
|
|
|
|
<td><integer> | same | increment</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td><em>Initial:</em></td>
|
|
|
|
<td>0</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td><em>Applies to:</em></td>
|
|
|
|
<td>all elements</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td><em>Inherited:</em></td>
|
|
|
|
<td>yes</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td><em>Percentages:</em></td>
|
|
|
|
<td>N/A</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td><em>Media:</em></td>
|
|
|
|
<td>all</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td><em>Computed value:</em></td>
|
|
|
|
<td>integer</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<p>This property sets the element's presentation level (EPL). The values have
|
|
the following meanings:</p>
|
|
|
|
<ul>
|
|
<li>An integer value sets the presentation level explicitly.</li>
|
|
|
|
<li>A value of <span class="css">'increment'</span> computes to a value one
|
|
more than the previous (in document order) element's presentation level.</li>
|
|
|
|
<li>A value of <span class="css">'same'</span> computes to the same value as
|
|
the previous element's (in document order) presentation level. For the root
|
|
element, <span class="css">'same'</span> computes to zero.</li>
|
|
</ul>
|
|
|
|
<h2 id="example1"><span class="secno">3. </span>Example 1: progressively
|
|
revealing list items</h2>
|
|
|
|
<p>Here is an example of how presentation levels can be used to progressively
|
|
reveal list items while high-lighting the current one.</p>
|
|
|
|
<pre>
|
|
EPL value
|
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
|
|
<HTML> 0
|
|
<STYLE> 0
|
|
html { color: black; background: white }
|
|
@media projection {
|
|
h1 { page-break-before: always }
|
|
li { presentation-level: increment }
|
|
:below-level { color: black }
|
|
:at-level { color: red }
|
|
:above-level { color: silver }
|
|
}
|
|
</STYLE>
|
|
<BODY> 0
|
|
<H1>Strategies</H1> 0
|
|
<H2>Our strategy</H2> 0
|
|
<UL> 0
|
|
<LI>divide 1
|
|
<LI>conquer 2
|
|
<P>(in that order) 2
|
|
</UL>
|
|
<H2>Their strategy</H2> 0
|
|
<UL> 0
|
|
<LI>obfuscate 1
|
|
<LI>propagate 2
|
|
</UL>
|
|
</pre>
|
|
|
|
<p>In the example above, the LI elements' EPL value is increased with one
|
|
compared to the previous element. The other elements' EPL value is the same
|
|
as the previous element due to the initial <span class="css">'same'</span>
|
|
value of the <span class="property"><a
|
|
href="#presentation-level">'presentation-level'</a></span> property.</p>
|
|
|
|
<h2 id="example2"><span class="secno">4. </span>Example 2: presenting outline
|
|
views of a document</h2>
|
|
|
|
<p>Here is an example of how presentation levels can be used to present
|
|
outline views of a document:</p>
|
|
|
|
<pre>
|
|
EPL value
|
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
|
|
<HTML> 0
|
|
<STYLE>
|
|
h1 { presentation-level: 0; }
|
|
h2 { presentation-level: 1; }
|
|
h3 { presentation-level: 2; }
|
|
body * { presentation-level: 3; }
|
|
:above-level { display: none; }
|
|
</STYLE>
|
|
<BODY> 0
|
|
<H1>Strategies</H1> 3
|
|
<H2>Our strategy</H2> 2
|
|
<UL> 0
|
|
<LI>divide 0
|
|
<LI>conquer 0
|
|
<P>(in that order) 0
|
|
</UL>
|
|
<H2>Their strategy</H2> 2
|
|
<UL> 0
|
|
<LI>obfuscate 0
|
|
<LI>propagate 0
|
|
</UL>
|
|
</pre>
|
|
|
|
<h2 id="dom"><span class="secno">5. </span>Presentation levels and the DOM</h2>
|
|
|
|
<p>An element's state is first evaluated when it is created. When the UAPL is
|
|
changed, all elements in the document have their state reevaluated. A
|
|
CSSNowBelowLevel event is then sent to all elements that changed to the
|
|
'below-level' state, a CSSNowAtLevel event is then sent to all elements that
|
|
changed to the 'at-level' state, and a CSSNowAboveLevel event is then sent to
|
|
all elements that changed to the 'above-level' state. Changing an element's
|
|
'presentation-level' property, e.g. through the DOM or using a dynamic
|
|
pseudo-class, does not cause the element's state to be immediately
|
|
reevaluated.</p>
|
|
|
|
<p>These events have the following characteristics:</p>
|
|
|
|
<ul>
|
|
<li>Bubbles: Yes</li>
|
|
|
|
<li>Cancelable: No</li>
|
|
|
|
<li>Context Info: detail (the UAPL)</li>
|
|
</ul>
|
|
|
|
<p>SMIL can be used with this event to declaratively key animations from user
|
|
requests, based on the 'presentation-index' property.</p>
|
|
|
|
<p>The events are defined as:</p>
|
|
|
|
<pre>
|
|
interface CSSNowBelowLevel : UIEvent { }
|
|
interface CSSNowAtLevel : UIEvent { }
|
|
interface CSSNowAboveLevel : UIEvent { }
|
|
</pre>
|
|
|
|
<p>These three fragments together will cause a document to have three
|
|
user-triggered list items, which will scroll in one at a time each time the
|
|
user hits the space bar (or whatever mechanism the UA uses), with the current
|
|
item colored white and the past items colored gray.</p>
|
|
|
|
<p>Markup:</p>
|
|
|
|
<pre>
|
|
<ol>
|
|
<li> The Separation of Style and Structure </li>
|
|
<li> Declarative User Interaction </li>
|
|
<li> Potential for Animation </li>
|
|
</ol>
|
|
</pre>
|
|
|
|
<p>Stylesheet:</p>
|
|
|
|
<pre>
|
|
ol { overflow: hidden; }
|
|
li { presentation-level: increment; margin-left: 100%; }
|
|
li:at-level { color: white; }
|
|
li:above-level { color: silver; }
|
|
</pre>
|
|
|
|
<p>Script:</p>
|
|
|
|
<pre>
|
|
// When the element is shown, scroll it in from the right
|
|
// by animating the margin-left property from 100% to 0%
|
|
document.documentElement.addEventListener('CSSNowAtLevel', handler, false);
|
|
|
|
function handler(event) {
|
|
// animateFloat is a (fictional) library routine which takes
|
|
// five arguments:
|
|
// a CSSValue to animate
|
|
// the start value
|
|
// the end value
|
|
// the time over which to animate the property, in milliseconds
|
|
// the units to animate it with
|
|
// it returns straight away and performs the animation in the
|
|
// background.
|
|
animateFloat(document.getOverrideStyle(event.target,
|
|
null).getPropertyCSSValue('margin-left'),
|
|
100, 0, 1000, CSS_PERCENTAGE);
|
|
}
|
|
</pre>
|
|
</body>
|
|
</html>
|