I used to be simply going over the most recent CSSWG minutes (you’ll be able to subscribe to them at W3C.org) and got here throughout a couple of fascinating nuggets I wished to jot down for an additional time. The group mentioned the CSS Values, CSS Easing, and Selectors modules, however what actually caught my eye was including triggered delays to CSS for issues like hover, lengthy faucets, and focus states.
The thought stems from an OpenUI proposal, the identical group we will thank for elevating issues just like the Popover API and customizable choose ingredient. The idea, if I perceive it proper, is that anytime somebody hovers, faucets, or focuses on, say, a <button> for a sure period of time, we will invoke some type of factor. A tooltip is the proper illustration. Hovering over the set off ingredient, the reasoning goes, is an expression of curiosity and as net authors, we will do one thing with that curiosity, like displaying a tooltip.
Whoa, proper?! There’s lengthy been chatter about CSS encroaching on JavaScript territory (isn’t it ironic, don’t you suppose?). Firing occasions in response to interplay is sort of actually the one factor I exploit JavaScript for. There’s no mistake about that within the CSSWG, as documented within the minutes:
So. Does this belong in CSS? Or ought to or not it’s elsewhere? Does the strategy make sense? Are there higher concepts? Most within the final.
[…]
Different query; does this belong in CSS or HTML… possibly that is only a javascript function? In JS you’ll be able to decide MQ state and alter issues so it wouldn’t essentially be in CSS.
And shortly later:
As you have been speaking; one factor that I stored pondering of; ought to builders be customizing the delay in any respect? Unique use case for delay is that hover shouldn’t be immediate. But when we don’t enable for customizing we will align to platform delay lengths.
However there’s a superb level to be made about the way in which many people are already doing this with CSS animations (animation-delay) and transitions (transition-delay). Generally even making use of these globally with the Common Selector or a prefers-* question.
Issues get even hairier when contemplating how values are outlined for this. Are they specific delays (800ms), generic key phrases (none/quick/medium/lengthy), a customized property, a pseudo-class… one thing else? I’m glad there’re extremely sensible of us noodling on these things.
I believe right here it could be good to go together with time values. CSS is an efficient place to place it. We’ve all of the ergonomics. The appropriate declarative place to place it.
Regardless of the eventual case could also be:
I believe this sounds cheap and I’d wish to discover it. Uncertain if that is the precise form, however this area appears helpful to me.
