CSS Functions

Despite CSS not being a programming language, there are functions which we can use.

Calculations

CSS is now able to basic calculations like adding values from different types and more

Min, max

Those are functions which can dynamically select the smaller/bigger value from multiple arguments

Calc

With calc we can do basic math operations on different types of css units

Example

Div with the length of 50vw minus 100 px

Code

        .calc {
            width: calc(50vw - 100px);
        }

More information

Calc in the Mozilla docs

Min

With min we have a function which always selects the smaller value. This can be useful for images, if the full image can be displayed the width should match with the size of the image, if not we should use a smaller value depending on the users view-width

Example

This div has a width of 500px or 100% of the parent depending on which one is smaller.

Code

        .min {
            width: min(500px, 100%);
        }

More information

Min in the Mozilla docs CSS functions in the Mozilla docs

Tricks