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.

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