W3C home > Mailing lists > Public > www-style@w3.org > January 2011

RE: [css3-transitions] display properties missing; delay property unclear

From: Belov, Charles <Charles.Belov@sfmta.com>
Date: Thu, 20 Jan 2011 14:41:16 -0800
Message-ID: <E17F75B6E86AE842A57B4534F82D037660F78C@MTAMAIL.muni.sfgov.org>
To: "Belov, Charles" <Charles.Belov@sfmta.com>, "www-style list" <www-style@w3.org>
I note from http://www.w3.org/TR/css3-transitions/ that visibility can be transitioned (despite only having two states, visible and hidden) but display, which also has only two states, cannot.  This is a potential issue as I am seeing reports that Webkit browsers make hidden links clickable.   Furthermore, I am concerned there may be an issue with a hidden layer blocking activation of a link on a visible but further-back layer.  (Unless, of course, CSS3

The use case I am concerned with is a time-delay cascading menu.  Currently, this can only be accomplished with JavaScript.  I would like to see CSS Transitions support it, but this requires that display be animated.

The idea of a time-delay cascading menu is to 

1. avoid accidental activation, as when one moves ones cursor from above a horizontal cascading menu to below that menu without intent to interact with it.  Under current CSS cascading menus, the menu gets activated against the end-user's intent, sometimes even blocking the screen location where the end-user was intending to go to.  Also,

2. avoid accidental deactivation, as when a person navigating their cursor through the activated menu inadvertently cursors off the menu momentarily.

Using the guidelines provided by Jacob Nielsen under "Speed" on http://www.useit.com/alertbox/mega-dropdown-menus.html, I would expect to be able to code something like:

div#cascadingmenu ul li {
transition-property: display;
transition-duration: 100ms;
transition-delay: 500ms;
display: none;

div#cascadingmenu:hover ul li {
display: block;

(Except that "display" is currently not one of the transitionable properties.)

I'm also concerned with some wording under http://www.w3.org/TR/css3-transitions/#starting:

Once the transition of a property has started, it must continue running based on the original timing function, duration, and delay, even if the ‘transition-timing-function’, ‘transition-duration’, or ‘transition-delay’ property changes before the transition is complete. However, if the ‘transition-property’ property changes such that the transition would not have started, the transition must stop (and the property must immediately change to its final value). 

versus http://www.w3.org/TR/css3-transitions/#the-transition-delay-property-

Otherwise, the value specifies an offset from the moment the property is changed, and the transition will delay execution by that offset.

That is, are "execution" and "running" synonymous?  The question is whether, if the end-user's cursor passes over an element, activating "hover" (setting display to "block") and then exits (because there was not intent to interact) within the 500ms before the transition begins, setting display back to "none", would cause the end value of display to be "none" or "block".

Hope this helps,
Charles Belov
SFMTA Webmaster

Received on Thursday, 20 January 2011 22:43:14 UTC

This archive was generated by hypermail 2.4.0 : Monday, 23 January 2023 02:13:55 UTC