Discover and read the best of Twitter Threads about #HTTP203
Most recents (2)
What if I told you this demo right here is powered by nothing but HTML and CSS?
Yep that’s right, not a single line of JavaScript (*) in sight! 🤩
Demo on @CodePen: codepen.io/bramus/full/GR…
(*) Except for a polyfill that’s being loaded
Yep that’s right, not a single line of JavaScript (*) in sight! 🤩
Demo on @CodePen: codepen.io/bramus/full/GR…
(*) Except for a polyfill that’s being loaded
The demo uses Scroll-Snapping, CSS Reflections (using the proprietary `-webkit-box-reflect`), and Scroll-Linked Animations.
With Scroll-Linked Animations, it’s possible to drive a CSS Animation by scroll: as you scroll, an animation moves forwards/backwards along with it.
With Scroll-Linked Animations, it’s possible to drive a CSS Animation by scroll: as you scroll, an animation moves forwards/backwards along with it.
In this demo, we track each album cover as they enter and exit the scrollport (enter from the left, exit on the right).
To do this we use a `view-timeline` which can be compared to how IntersectionObserver tracks elements.
```css
li {
view-timeline: li-timeline inline;
}
```
To do this we use a `view-timeline` which can be compared to how IntersectionObserver tracks elements.
```css
li {
view-timeline: li-timeline inline;
}
```
🎉🥳 Good news everyone! The Large, Small and Dynamic viewport units (lv*, sv*, dv*) are coming to Chrome 108!
I2S announcement: groups.google.com/a/chromium.org…
I2S announcement: groups.google.com/a/chromium.org…
Now you might be wondering: “What took Chrome so long?!”
Well, if you’ve watched my #HTTP203 episode on Viewports () you know that there currently is a difference between browsers on how they handle the Virtual Keyboard.
Well, if you’ve watched my #HTTP203 episode on Viewports () you know that there currently is a difference between browsers on how they handle the Virtual Keyboard.
Today, some browsers resize the Layout Viewport (and therefore ICB as well), while some don’t.
This difference in ICB resize behavior affects the Viewport Units.
This difference in ICB resize behavior affects the Viewport Units.
