- From: Ian Hickson <ian@hixie.ch>
- Date: Thu, 11 Jul 2002 01:28:25 +0100
- To: Dave Raggett <dsr@w3.org>
- Cc: www-style@w3.org
Dave Raggett wrote: > > I am currently using Linux and would very much like to be able to > use XHTML and CSS for presentations. The @media projection {...} > feature provides the basic mechanism for dividing an XHTML document > into slides when used with the page-break-before property. What's > missing is a means to hide sections until the presenter hits the > space bar or clicks the mouse etc. This is an interesting idea. Would your 'pause-before' property take an integer as a value, letting all elements with a particular value switch from display:none to their display value (or from visibility:hidden to their display value?) when the space bar (or equivalent mechanism) is hit? Maybe the property could also take a time value, thus allowing content to be rendered at specific times after loading. Unfortunately, a common effect wanted by authors of slides is an animation. A simple property couldn't really provide for the wealth of animation effects used by authors. Might a better name for the property be 't-index' or 'pause-until'? The following is a more comprehensive proposal based on the comments above: 1. The 'wait-until' property Elements can be in two states, 'waiting' and 'waited'. Name: wait-until Value: <integer> | <time> Initial: 0 Applies to: all elements Inherited: no Percentages: N/A Media: all Computed value: specified value, except zero time computes to the integer zero. This property can be used to trigger changes after a specified amount of time or after a number of user requests. If the value is a <time> then the UA will delay that long before switching the element's state from 'waited' to 'waiting'. A value of zero time computes to a zero integer. An <integer> value indicates to the UA that the element should wait for that many user requests before switching the element from 'waited' to 'waiting'. A user request would typically consist of uncaptured mouse clicks or unhandled presses of the space bar, but the exact interface used is user agent defined. A value of zero means that the element starts in the 'waited' state. 2. The ':waiting' and ':waited' pseudo-classes An element that has a zero 'wait-until' value starts in the 'waited' state, all other elements start in the 'waiting' state. When the 'wait-until' time is reached, or after the user has sent the required number of requests to the UA, the element switches to the 'waited' state. The :waited pseudo-class matches elements in the 'waited' state, and the :waiting psueod-class matches elements in the 'waiting' state. 3. The 'CSSWaited' event This event is dispatched to elements after their 'wait-until' time has elapsed, or the user has notified the UA the requisite number of times. The event fires before the element's state changes (and thus before the pseudo-classes have changed). * Bubbles: Yes * Cancelable: No * Context Info: The time elapsed and the index, as appropriate SMIL can be used with this event to declaratively key animations from user requests, based on the 'wait-until' property. 4. Examples These three together will cause a document to have three user-triggered list items, which will fade in one at a time each time the user hits the space bar (or whatever mechansim the UA uses). Stylesheet: li:child(1) { wait-until: 1; } li:child(2) { wait-until: 2; } li:child(3) { wait-until: 3; } li:waiting { display: none; } li:waited { display: list-item; } Markup: <ol> <li> The Separation of Style and Structure </li> <li> Declarative User Interaction </li> <li> Potential for Animation </li> </ol> Script: document.documentElement.addEventListener('CSSWaited', handler, false); function handler(event) { // animateFloat is a (fictional) library routine which takes // four arguments: // a CSSValue to animate // the start value // the end value // the time over which to animate the property, in milliseconds // it returns straight away and performs the animation in the // background. animateFloat(document.getOverrideStyle(event.target, null).getPropertyCSSValue('opacity'), 0, 1, 1000); } -- Ian Hickson )\._.,--....,'``. fL "meow" /, _.. \ _\ ;`._ ,. http://index.hixie.ch/ `._.-(,_..'--(,_..'`-.;.'
Received on Wednesday, 10 July 2002 20:28:28 UTC