Owner

BHANWAR YADAV MALIKPURA

Wednesday, August 31, 2022

 


  

Interpolating Numeric CSS Variables

Avatar of Geoff Graham
Geoff Graham on (Updated on )

DigitalOcean joining forces with CSS-Tricks! Special welcome offer: get $100 of free credit.

We can make variables in CSS pretty easily:

:root {
  --scale: 1;
}

And we can declare them on any element:

.thing {
  transform: scale(var(--scale));
}

Even better for an example like this is applying the variable on a user interaction, say :hover:

:root {
  --scale: 1;
}

.thing {
  height: 100px;
  transform: scale(var(--scale));
  width: 100px;
}

.thing:hover {
  --scale: 3;
}

But if we wanted to use that variable in an animation… nada.

:root {
  --scale: 1;
}

@keyframes scale {
  from { --scale: 0; }
  to { --scale: 3; }
}

/* Nope! */
.thing {
  animation: scale .25s ease-in;
  height: 100px;
  width: 100px;
}

That’s because the variable is recognized as a string and what we need is a number that can be interpolated between two numeric values. That’s where we can call on @property to not only register the variable as a custom property, but define its syntax as a number:

@property --scale {
  syntax: "<number>";
  initial-value: 1;
  inherits: true;
}

Now we get the animation!

You’re going to want to check browser support since @property has only landed in Chrome (starting in version 85) as of this writing. And if you’re hoping to sniff it out with @supports, we’re currently out of luck because it doesn’t accept at-rules as values… yet. That will change once at-rule()becomes a real thing.

DigitalOcean joining forces with CSS-Tricks! Special welcome offer: get $100 of free credit.

Comments

  1. Temani Afif
    Permalink to comment# 

    Using @supports not (inherits: true) will do nothing because inherits is not a valid CSS property in any browsers so the notice will show even if the browser support @property

    inherits is a descriptor that is only valid inside the @property.

    To test the support we need to use at-rule() but its a new feature not yet implemented (https://www.bram.us/2022/01/20/detect-at-rule-support-with-the-at-rule-function/)

    Reply
    • Geoff Graham
      Permalink to comment# 

      Huh! I thought I had tested that but clearly I was wrong!

  2. Thomas Rettig
    Permalink to comment# 

    Fascinating!

    Reply
  3. cfriedrich1csstricks
    Permalink to comment# 

    What’s the benefit of using this instead of just using numbers? If someone could explain I’d really appreciate it!

    Reply
    • Geoff Graham
      Permalink to comment# 

      I think that’s the point: custom properties can be updated and interpolated, but we have to first define them as a number; otherwise they’re strings instead of being treated as integers.

Leave a Reply

By at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)