After last year’s first-ever WeAreWebClerks Community Conference , @WeAreWebClerks teamed up with @CssVienna and delivered the #ViennaCalling meetup straight to our homes via Twitch. I’ve been truly impressed. I would not have had the time to attend the meetup on location, but thanks to the current virtual-only-ness the world is going through, I’ve been able to join the live stream. Similarly, the line-up would have been different too, because these great speakers might not have able to visit Vienna “just” for a meetup.
But let’s face it, with such amazing talks it felt like an actual conference. Or, as Max Böck put it, This is not your grandma’s meetup.
Talks & Speakers
Listening to @cassiecodes at #ViennaCalling … takeaways so far: 1. Yay Progressive Enhancement! 2. Yay Accessibility! #a11y 3. makefrontendshitagain.party is a thing.@WeAreWebClerks @CssVienna
What’s the point of setting transition-duration to a very small time value with @media (prefers-reduced-motion: reduce)
instead of removing the transition altogether?@cassiecodes #ViennaCalling
In reply to: @g16n , @cassiecodes .
You’ll end up at the desired end state of the transition, so your page will look like the animations ran (because they did), i.e. no difference to running the transition at “regular” speed.
In reply to: @CSSence , @cassiecodes .
Hm, with or without transitions, don’t you end up in the end state anyway? (I’m not talking about animations here.)
Continued from previous comment.
I see the difference in transition* events which won’t fire with transitions switched off, but apart from that?
In reply to: @g16n , @CSSence .
Keeping the transition duration makes sure that any functionality tied to a transition e.g. a menu sliding in will still work.
In reply to: @cassiecodes , @g16n .
Thanks, I’ve been struggling to come up with a meaningful example. Menus are a great one, them sliding in might affect a huge part of the viewport, so that kind of transition might be a trigger.
In reply to: @CSSence , @cassiecodes .
My menu solution works without tiny transition duration (but uses a class set on transitionrun and removed on transitionend).codepen.io/gunnarbittersmann/pen/abdMLKJ I add the transition with MQ rather than taking it away. (Better no transition than a transition for all users in older browsers.)
Continued from previous comment.
This is still work in progress. To do: focus management, focus trap. Comments welcome.
In reply to: @g16n , @CSSence .
Sure… Seems like more effort to do the same thing, but to each their own.
In reply to: @g16n , @cassiecodes .
👍 Doing it this way around is closer to progressive enhancement. But on animation-heavy sites you might still be better off using the star selector and set all durations to a tiny value at once, as shown here: css-tricks.com/revisiting-prefers-reduced-motion-the-reduced-motion-media-query/
Don’t we all love how versatile CSS is? 🙂
First @cassiecodes , now a lightning talk by @MicheBarks at #ViennaCalling - how is it possible that this amount of great content is free of charge?
#CSS should be about “providing guides and rules for layout, instead of micromanaging the browser.” @hankchizljaw at the #ViennaCalling @WeAreWebClerks meetup
👏 Thanks to all the speakers and the organizers, @WeAreWebClerks and @CssVienna pulled off a truly wonderful #ViennaCalling meetup last night.
Get involved
Feel free to share this article. But keep in mind, it was published more than four years ago, so comments are closed.