CSSWG Minutes Telecon (2024-08-14) | CSS-Tricks

I just looked at the latest CSSWG minutes (you can subscribe to it at W3C.org) and came across some interesting nuggets that I wanted to write up for another time. The group discussed the CSS Values, CSS Easing and Selectors modules, but what Really I noticed that triggered delays were added to CSS, for example for hovers, long taps, and focus states.

The idea comes from a OpenUI proposalthe same group we are responsible for raising issues such as the Popover API And customizable selection element. The concept, if I understand it correctly, is that every time someone hovers the mouse over a for a certain time we can call something. A tooltip is the perfect example. When you hover over the trigger element, the argument goes, that is an expression of interest and as web authors we can do something with that interest, for example display a tooltip.

Wowright?! There have long been rumors that CSS is encroaching on JavaScript territory (isn’t it ironicdon’t you think?). Firing events in response to interactions is literally the only thing I use JavaScript for. There is no ambiguity in the CSSWG about this, as documented in the protocol:

So. Does this belong in CSS? Or should it be somewhere else? Does this approach make sense? Are there better ideas? I’m most interested in the latter.

[…]

Another question: is this CSS or HTML… maybe this is just a JavaScript function? In JS you can determine the MQ state and change things so it doesn’t necessarily have to be in CSS.

And shortly afterwards:

As you were talking, I kept thinking: should developers adjust the delay at all? The original use case for the delay is that hover shouldn’t be instantaneous. But if we don’t allow adjustment, we can adjust to the platform’s delay lengths.

But there is an excellent point about the way many of us already do this with CSS animations (animation-delay) and transitions (transition-delay). Sometimes these are even globally selected using the Universal Selector or a prefers-* Query.

Things get even more complicated when you consider how the values ​​for this are defined. Are there explicit delays (800ms), generic keywords (none/short/medium/long), a custom property, a pseudo-class … something else?I’m glad there are incredibly smart people working on this stuff.

I think this is where it would be good to use time values. CSS is a good place for that. We have all the ergonomics. The right declarative place for that.

Whatever the final case may be:

I think that sounds reasonable and I would like to explore it. I’m not sure if that’s the exact shape, but this space seems useful to me.