Just finished prototyping a set of CSS feature proposals that aim to enable authors to create responsive carousel experiences with pure CSS. Try it out at https://flackr.github.io/web-demos/carousel/
flackr
- 116 Followers
- 36 Following
- 55 Posts
Software developer at Google working on chromium and web standards. Opinions are my own.
This is still very much a work in progress, and the features will continue to evolve as we work through the details and consider alternatives. Feedback is welcome!
Scroll snap + scroll driven animation + smooth scroll-behavior = no JS "hamburger" menu with swipe support: https://flackr.github.io/web-demos/css-scroll-snap/menu/#content
Using position: sticky + https://www.w3.org/TR/scroll-animations-1/ to implement pure CSS scroll driven story-telling 📜📖 https://flackr.github.io/web-demos/scroll-animations/story-telling/
BramusIntent to Ship: Scroll-driven animations
https://groups.google.com/a/chromium.org/g/blink-dev/c/RDKAi9JPHwY/m/5MWvzGPjAgAJ
So excited to see this officially announced! The team's been working very hard on this. Target release is Chrome 115.
Unfortunately there's no haptic feedback that you've held long enough to start a drag on iOS Safari (like you get on the homescreen), and I can't roll my own because Safari doesn't support vibrate: https://developer.mozilla.org/en-US/docs/Web/API/Navigator/vibrate
Navigator: vibrate() method - Web APIs | MDN
The vibrate() method of the Navigator interface pulses the vibration hardware on the device, if such hardware exists. If the device doesn't support vibration, this method has no effect. If a vibration pattern is already in progress when this method is called, the previous pattern is halted and the new one begins instead.
Update: After some testing I discovered that because you can still prevent the scroll on the first touchmove it works to use touchmove listeners instead. Since Safari doesn't send a contextmenu event you have to measure the time yourself. Using blocking touch listeners isn't great for scrolling perf though :(.
TLDR; The first box works on iOS and Android, the second on Android only, and the third only works on desktop https://flackr.github.io/web-demos/mobile/scroll-drag/
Is there any way to handle dragging without preventing scrolling on the web? On native a long press usually disambiguates but neither using contextmenu nor dragstart seems to support this on mobile. Demo at https://flackr.github.io/web-demos/mobile/scroll-drag/
It seems like something like this should work, right?
Mia (web luddite)The #CSSWG just resolved to make the `display` property animatable, with non-`none` values given priority during the transition. It's still discrete - there's no intermediate values between `block` & `none` - but this allows toggling it as part of a transition or animation.
For example (from @flackr) this would become `display:none` when the transition completes:
```css
.hide {
transition: opacity 200ms, display 200ms;
display: none;
opacity: 0;
}
```
https://github.com/w3c/csswg-drafts/issues/6429#issuecomment-1318933547
[css-display] Why is display listed as not animatable instead of animation type: discrete? · Issue #6429 · w3c/csswg-drafts
https://www.w3.org/TR/css-display-3/#the-display-properties I thought we were going for discrete for all properties that can't be intelligently interpolated, and that "not animatable" was reserved ...
Alex Russell