Tweet

Bramus

Follow @bramus

Sep 26 • 8 tweets • 4 min read

🎉🥳 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…

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.

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.

In order to ship **Interoperable** Viewport Units, we had to do something about this different resize behavior.

That’s why, also shipping in Chrome 108, Chrome on Android will no longer resize the ICB when the Virtual Keyboard gets shown.

I2S: groups.google.com/a/chromium.org…

Thanks to this change, Viewport Units will work the same in Chrome on iOS, Android, CrOS, and Windows.

If your app is relying on the current Android behavior, you can opt-in to this by means of an extension to the viewport meta tag.

Proposal: github.com/w3c/csswg-draf…

🤩 Must say I’m very excited about this change, as I’ve been working on this over the past few months (and some of our engineers even over 5 years!)

Please leave feedback on the linked to issues/posts if you have concerns about this, or simply leave a reply here on Twitter.

If you want to try out this new resize behavior, enable the "OSK resizes Visual Viewport" feature flag.

Also enable "Experimental web platform features" if you want to try the new Viewport Units.

And oh, should you not be familiar with these new units, there’s post on my blog introducing them.

brm.us/viewports

• • •

Missing some Tweet in this thread? You can try to force a refresh

This Thread may be Removed Anytime!

Twitter may remove this content at anytime! Save it as PDF for later use!

More from @bramus

Bramus

@bramus

Oct 4

@CodePen

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

https://twitter.com/bramus/status/1577060635556339714

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.

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;
}
```

Read 8 tweets

Bramus

@bramus

Dec 30, 2021

At the start of 2021, I discovered CSS @scroll-timeline, a way to link CSS Animations to the scroll offset of a scroll container.

Seems fitting to close off the year with a final demo: reverse-scrolling columns.

🔗 codepen.io/bramus/pen/jOG…

🧵

In browsers that support CSS Scroll-Timeline (which is only Chromium with “Experimental Web Platform Features” enabled for now) the effect is achieved using nothing but CSS.

In browsers that don't support CSS Scroll-Timeline a JavaScript polyfill is loaded and used. The animations themselves are regular WAAPI animations, extended with a linked ScrollTimeline instance.

Read 6 tweets

Bramus

@bramus

Dec 27, 2021

🔥 CSS Features to start learning, as I expect them to ship in all browsers in 2022:

1. Container Queries
2. Cascade Layers
3. Color Functions
4. Viewport Units
5. :has()
6. Overscroll Behaviour
7. Subgrid
8. Accent Color
9. Media Query Ranges

1. Container Queries allow authors to style elements according to the size or appearance of a container. For size-based container queries, this is similar to a @media query, except that it will evaluate against the size of a parent container instead of the viewport.

2. With Cascade Layers, you can control cascade ordering for same-origin rules properly. You do this by layering your styles using the @layer at-rule. Layers appear before specificity and order of appearance in the cascade.

Read 12 tweets

Bramus

@bramus

Jun 8, 2021

@ChromiumDev

🔥🔥🔥

`document.documentTransition` is a new experimental API in @ChromiumDev that allows you to create transitions between two different visual frames.

🔗 chromestatus.com/feature/519300…

Let's dig in … 🧵

@ChromiumDev

@ChromiumDev In this example you see the API transition between the frame with the avatar and the frame with the info modal. The transition — including "slide up" animation — is handled by the API/browser.

🔗 codepen.io/bramus/pen/rNj…

This is called a Root Transition.

@ChromiumDev

@ChromiumDev To make it work, you need to perform 3 steps:

1. Capture the begin frame
2. Make UI changes (which are not rendered on screen)
3. Transition to the new (target) frame

Read 11 tweets

Support us! We are indie developers!

This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Don't want to be a Premium member but still want to support us?

Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal

Or Donate anonymously using crypto!

Ethereum

0xfe58350B80634f60Fa6Dc149a72b4DFbc17D341E copy

Bitcoin

3ATGMxNzCUFzxpMCHL5sWSt4DVtS8UqXpi copy

Thank you for your support!

Separate emails with commas Message

Share this page!

Bramus

People who liked this thread also liked...

Try unrolling a thread yourself!

More from @bramus

Bramus

Bramus

Bramus

Bramus

Did Thread Reader help you today?

Don't want to be a Premium member but still want to support us?

Send Email!