CSSWG Minutes Telecon (2024-08-14)

I used to be simply going over the most recent CSSWG minutes (you possibly can subscribe to them at W3C.org) and got here throughout a number of fascinating nuggets I needed 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 kind of factor. A tooltip is the right illustration. Hovering over the set off ingredient, the reasoning goes, is an expression of curiosity and as internet 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 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 possibly can 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 considering of; ought to builders be customizing the delay in any respect? Authentic use case for delay is that hover shouldn’t be on the spot. But when we don’t enable for customizing we will align to platform delay lengths.

However there’s a wonderful 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 express delays (800ms), generic key phrases (none/quick/medium/lengthy), a customized property, a pseudo-class… one thing else? I’m glad there’re extremely good of us noodling on these items.

I feel right here it might be good to go together with time values. CSS is an efficient place to place it. We have now all of the ergonomics. The suitable declarative place to place it.

Regardless of the eventual case could also be:

I feel this sounds affordable and I’d prefer to discover it. Uncertain if that is the precise form, however this area appears helpful to me.

CSSWG Minutes Telecon (2024-08-14) initially printed on CSS-Tips, which is a part of the DigitalOcean household. It’s best to get the e-newsletter.