There are no tracking or monitoring cookies on this site. There are only cookies used for documentation examples related to cookies.
Close

Processing...
This may take a few seconds.

Delaying actions ("after")

Every action command can be delayed by using "after" followed by a CSS friendly time, such as "1s" or "500ms".

See this syntax use:

#MenuItemAbout:click {
    body {
        add-class: .menuOpen after 1s, .menuAbout after 500ms;
    }
}

Note that in the syntax example above that delay times are specific for each action. So multiple actions on the same line may have their own delay time.

"after stack" or "after 0s"

"After stack" means perform the action after the current "call stack" of commands.  A call stack is simply all the commands that are going to be run in the current queue of actions for this declaration and any immediately connected declarations. Delayed events are not part of the current call stack, as these happen later on, in a different batch. The call stack refers to the all the commands that are happening at this time.

Since version 2.3.0 all action commands and target selectors run sequentially in the order that they appear in the config, so most of the time you can just place the command at the bottom of your declaration and that will ensure it happens at the end.

But in the occasional scenario where this is not enough, use "after stack" or "after 0s". This will put a zero second timeout on the action command which has the effect of forcing it to run immediately after the current call stack of commands. The phrase "after 0s" does not fully explain what is happening, hence we have added "after stack". But you can use "after 0s" if you prefer. "After stack" is perhaps a nano-second quicker to run if nano-optimising is your bag.

#myMenuItem:click {
    add-class: .menuSelected after stack;
.menuSelected {
remove-class: .menuSelected; } }

This will add the class menuSelected to the myMenuItem element and remove the class from all other elements. Here it does the same thing as the take-class command.

Now that sequential commands are a "thing" in Active CSS, you could have just moved the add-class command to be underneath the remove-class which would do the same thing and give you a smoother and faster performance than using "after stack" or "after 0s":

#myMenuItem:click {
.menuSelected {
remove-class: .menuSelected;
}
add-class: .menuSelected;
}

But "after stack" or "after 0s" might serve occasionally, so there is no plan to remove this.

For an advanced technical look at the use of this, see here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop#Zero_delays

Using with CSS commands

You can use "after" with regular CSS commands! It shouldn't clash, as the "after" parameter gets stripped out of the command before the browser processes it.

Cancelling delayed actions

You can cancel delayed events before they happen. You can cancel either a general action, or target a specific action by assigning a label to the action itself and then cancelling by label.

Cancelling delayed actions is useful for things like building menus, where you intentionally delay the showing of a menu while the mouse is moving around and you need to cancel previously delayed actions on menus that would be shown next but now don't need to be shown any more because the mouse has moved to a new menu option. That would be tweaking to get a better UX. That may sound confusing, but it will become clear if you ever try to build an interactive menu. Which you should try to do by the way (if you can't do it in CSS alone) - it's a lot less code doing it in Active CSS than doing it as a plugin, and also a lot more tweakable as you yourself would have written it. You can tailor-make a menu for your site, rather than tailor your site to the restrictions of a third-party JavaScript plugin. See the menu example for the basics on that.

To find out how to cancel delayed actions, see the "cancel-timer" action command.