1. The
    Least Impressive
    CSS Feature with the
    Most Impressive
    Impact

    Dev & Design Meetup #16
    November 20, 2025

  2. Hello there, I'm Alex  ðŸ‘‹

    Freelancer doing Web-Technology-Stuff.

    • Full-Stack Development
    • Engineering Management
    • Tech Consulting
    • Tech Education
    Available for new projects

  3. Quick show of Hands  ðŸ™‹

  4. Typed Arithmetic

  5. calc(200px / 10px)

  7. calc(200px / 10px)

  12. Divisor with a unit
    is possible now

  13. Thank you!

  14. Typed Arithmetic  ðŸš€

  15. calc(200px / 10px) = 20

  16. The Result is a
    Unitless Number

  17. Numeric Data Types in CSS

    Data Type Example Units Example Declarations
    <length> px, vw, cqi, em, ch width: 200px;
    font-size: 3em;
    <angle> deg, rad, turn color: hsl(150deg 30% 60%);
    transform: rotate(0.75turn);
    <time> ms, s animation-duration: 1s;
    transition-delay: 250ms;
    <number> unitless opacity: 0.5;
    scale: 2;

  18. Division Examples 

                     
/* assumption: viewport width of 500px */
calc(100vw / 2) = 250px

calc(100vw / 2px) = 250

/* assumption: em = 16px (browser default) */
calc(100vw / 1em) = 31.25

calc(100vw / 200ms) /* ?!? */

calc(100 / 2px) /* ?!? */

  19. So what?
    Why is this useful?

  20. Convert Values
    from one Data Type to another

  21. Cool Stuff
    that was not possible before 

  22.                         
div {
    /* measure a <length> value */
    --length: clamp(300px, 100cqw, 700px);

    /* calculate a unitless <number> value
       between 0 and 1 */
    --factor: calc((var(--length) - 300px) / 400px);

    /* calculate an <angle> value */
    --angle: calc(360deg * var(--factor));

    /* use the <angle> value for rotation */
    rotate: var(--angle);
}
                        
                    
  23.                         
div {
    /* measure a <length> value */
    --length: clamp(300px, 100cqw, 700px);

    /* calculate a unitless <number> value
       between 0 and 1 */
    --factor: calc((var(--length) - 300px) / 400px);

    /* calculate an <angle> value used for <hue> */
    --hue: calc(360deg * var(--factor));

    /* compose a <color> value */
    background-color: hsl(var(--hue) 100% 50%);
}
                        
                    
  24.                         
div {
    /* measure a <length> value */
    --length: clamp(300px, 100cqw, 700px);

    /* calculate a unitless <number> value
       between 0 and 1 */
    --factor: calc((var(--length) - 300px) / 400px);

    /* calculate a <time> value */
    --time: calc(500ms + var(--factor) * 2000ms);

    /* use the <time> value for an animation */
    animation-duration: var(--time);
}
                        
                    
  25.                         
div {
    /* measure a <length> value */
    --length: clamp(300px, 100cqw, 700px);

    /* calculate a unitless <number> value
       between 0 and 1 */
    --factor: calc((var(--length) - 300px) / 400px);

    /* use the <number> value for opacity */
    opacity: var(--factor);
}
                        
                    
  26.                         
div {
    /* measure a <length> value */
    --length: clamp(300px, 100cqw, 700px);

    /* calculate a unitless <number> value
       between 0 and 1 */
    --factor: calc((var(--length) - 300px) / 400px);

    /* use the <number> value for scale */
    scale: var(--factor);
}
                        
                    
  27.                         
/* define an <angle> value */
@property --angle {
    syntax: "<angle>";
    initial-value: 360deg;
}

/* change the <angle> value with an animation */
@keyframes rotate {
    0% { --angle: 360deg }
    100% { --angle: 0deg }
}

div {
    /* calculate a unitless <number> value
       between 0 and 1 */
    --factor: calc(1 - (var(--angle) / 360deg));

    /* calculate a <length> value */
    --length: calc(200px + 200px * var(--factor));

    /* use the <length> value for width */
    width: var(--length);
}
                        
                    
  28.                         
/* define an <angle> value */
@property --angle {
    syntax: "<angle>";
    initial-value: 360deg;
}

/* change the <angle> value with an animation */
@keyframes rotate {
    0% { --angle: 360deg }
    100% { --angle: 0deg }
}

div {
    /* calculate a unitless <number> value
       between 0 and 1 */
    --factor: calc(1 - (var(--angle) / 360deg));

    /* calculate another <number> value
       used for "blue" in rgb() */
    --blue: calc(255 * var(--factor));

    /* use the value for rgb() */
    background-color: rgb(0, 0, var(--blue));
}
                        
                    
  29.                         
/* define an <angle> value */
@property --angle {
    syntax: "<angle>";
    initial-value: 360deg;
}

/* change the <angle> value with an animation */
@keyframes rotate {
    0% { --angle: 360deg }
    100% { --angle: 0deg }
}

div {
    /* calculate a unitless <number> value
       between 0 and 1 */
    --factor: calc(1 - (var(--angle) / 360deg));

    /* use the <number> value for opacity */
    opacity: var(--factor);
}
                        
                    
  30.                         
/* define an <angle> value */
@property --angle {
    syntax: "<angle>";
    initial-value: 360deg;
}

/* change the <angle> value with an animation */
@keyframes rotate {
    0% { --angle: 360deg }
    100% { --angle: 0deg }
}

div {
    /* calculate a unitless <number> value
       between 0 and 1 */
    --factor: calc(1 - (var(--angle) / 360deg));

    /* use the <number> value for scale */
    scale: var(--factor);
}

  31. Nice Use Cases

    • Responsive Design
    • Streamlined animations
    • Playful colors
    • Typography

  33. Further Reading

    Sounds by https://quicksounds.com

  34. Thank you

    Web

    https://claes.tech

    Mail

    alex@claes.tech

    LinkedIn

    https://www.linkedin.com/in/alexander-claes/

    https://claes.tech/connect/dev-design