CSS interpolate-size to the rescue

Over on Chrome for Developers, @bramus wrote a great piece on interpolate-size and the new transitions it can enable with keywords like auto.

I see the following pattern used when the designer wants to reduce visual noise during sign in, the password field is hidden until a valid username is provided.

The new interpolate-size feature makes this trivial, especially when combined with :has().

⤷ caniuse

The Setup #

Opt your whole site into transitioning keywords. This is definitely something that will quickly make it into CSS resets.

:root {
  interpolate-size: allow-keywords;
}

Next, enable transitions on the password field:

.password {
  transition: 
    height .3s var(--ease-3),
    opacity .3s var(--ease-3);
}

Last, hide the password field when the username isn't valid:

.username:not(:has(:user-valid)) + .password {
  height: 0;
  opacity: 0;
  overflow: clip;
}

As soon as the username field is valid, height: 0 will stop applying and the password field will transition to its natural height: auto.

The Demo #

Here it is all put together.

See the Pen <a href="https://codepen.io/argyleink/embed/preview/BaXyJRL"> Hot text-emphasis</a> by Adam Argyle (<a href="https://codepen.io/argyleink">@argyleink</a>) on <a href="https://codepen.io">CodePen</a>.

There's tons of demo's this unlocks, what are you building!?

Mentions #

Join the conversation on

98 likes

20 reposts

I'm so torn about it. I love it from a technical standpoint (that it's now easy), but I'd be so annoyed if I actually tried to log in and encountered this.

Ana Tudor

It's everywhere in mobile apps.. When would you want to specify a password before your username tho? Or is it the waiting?

Adam Argyle

@argyleink

On iPad, initial load, typing in the username box does not show the password box until you change focus. But once you’ve done that once, going back to the username box and erasing it requires just one character to make the password field appear as in your demo video.

Also, (minor nit) I had to read this a couple of times alongside the adjacent rule:

/* reveal password when username is valid */

I understand the rule to mean “hide password while username is not valid”.