Functions

The CSS Podcast - 020: Functions

So far in this course, you've been exposed to several CSS functions. In the grid module, you were introduced to minmax() and fit-content(), which help you size elements. In the color module, you were introduced to rgb(), and hsl(), which help you define colors.

Like many other programming languages, CSS has a lot of built-in functions that you can access whenever you need them.

Every CSS function has a specific purpose, in this lesson, you'll get a high-level overview, giving you a much better understanding of where and how to use them.

What is a function?

A function is a named, self-contained piece of code that completes a specific task. A function is named so you can call it within your code and you can pass data into the function. This is known as passing arguments.

A lot CSS functions are pure functions, which means that if you pass the same arguments into them, they will always give you the same result back, regardless of what is happening in the rest of your code. These functions will often re-compute as values change in your CSS, similar to other elements in the language, such as computed cascaded values like currentColor.

In CSS, you can only use the provided functions, rather than write your own, but functions can be nested within each other in some contexts, giving them more flexibility. We'll cover that in more detail, later in this module.

Functional selectors

.post :is(h1, h2, h3) {
    line-height: 1.2;
}

You learned about functional selectors in the pseudo-classes module which detailed functions like :is() and :not(). The arguments passed into these functions are CSS selectors, which are then evaluated. If there is a match with elements, the rest of the CSS rule will be applied to them.

Custom properties and var()

:root {
    --base-color: #ff00ff;
}

.my-element {
    background: var(--base-color);
}

A custom property is a variable which allows you to tokenize values in your CSS code. Custom properties are also affected by the cascade which means they can be contextually manipulated or redefined. A custom property must be prefixed with two dashes (--) and are case sensitive.

The var() function takes one required argument: the custom property that you are trying to return as a value. In the above snippet, the var() function has --base-color passed as an argument. If --base-color is defined, then var() will return the value.

.my-element {
    background: var(--base-color, hotpink);
}

You can also pass a fallback declaration value into the var() function. This means that if --base-color can't be found, the passed declaration will be used instead, which in this sample's case is the hotpink color.

Functions that return a value

The var() function is just one of the CSS functions that return a value. Functions like attr() and url() follow a similar structure to var()— you pass one or more arguments and use them on the right side of your CSS declaration.

a::after {
  content: attr(href);
}

The attr() function here is taking the content of the <a> element's href attribute and setting it as the content of the ::after pseudo-element. If the value of the <a> element's href attribute was to change, this would automatically be reflected in this content attribute.

.my-element {
    background-image: url('/path/to/image.jpg');
}

The url() function takes a string URL and is used to load images, fonts and content. If a valid URL isn't passed in or the resource that the URL points to can't be found, nothing will be returned by the url() function.

Color functions

You learned all about color functions in the color module. If you haven't read that one yet, it is strongly recommended that you do.

Some available color functions in CSS are rgb(), rgba(), hsl(), hsla(), hwb(), lab() and lch(). All of these have a similar form where configuration arguments are passed in and a color is returned back.

Mathematical expressions

Like many other programming languages, CSS provides useful mathematical functions to assist with various types of calculation.

calc()

The calc() function takes a single mathematical expression as its parameter. This mathematical expression can be a mix of types, such as length, number, angle and frequency. Units can be mixed too.

.my-element {
    width: calc(100% - 2rem);
}

In this example, the calc() function is being used to size an element's width as 100% of its containing parent element, then removing 2rem off that computed value.

:root {
  --root-height: 5rem;
}

.my-element {
  width: calc(calc(10% + 2rem) * 2);
  height: calc(var(--root-height) * 3);
}

The calc() function can be nested inside another calc() function. You can also pass custom properties in a var() function as part of an expression.

min() and max()

The min() function returns the smallest computed value of the one or more passed arguments. The max() function does the opposite: get the largest value of the one or more passed arguments.

.my-element {
  width: min(20vw, 30rem);
  height: max(20vh, 20rem);
}

In this example, the width should be the smallest value between 20vw —which is 20% of the viewport width—and 30rem. The height should be the largest value between 20vh —which is 20% of the viewport height—and 20rem.

clamp()

The clamp() function takes three arguments: the minimum size, the ideal size and the maximum.

h1 {
  font-size: clamp(2rem, 1rem + 3vw, 3rem);
}

In this example, the font-size will be fluid based on the width of the viewport. The vw unit is added to a rem unit to assist with screen zooming, because regardless of zoom level a vw unit will be the same size. Multiplying by a rem unit—based on the root font size— provides the clamp() function with a relative calculation point.

You can learn more about the min(), max(), and clamp() functions in this article.

Shapes

The clip-path, offset-path and shape-outside CSS properties use shapes to visually clip your box or provide a shape for content to flow around.

There are shape functions that can be used with both of these properties. Simple shapes such as circle(), ellipse() and inset() take configuration arguments to size them. More complex shapes, such as polygon() take comma separated pairs of X and Y axis values to create custom shapes.

.circle {
  clip-path: circle(50%);
}

.polygon {
  clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
}

Like polygon(), there is also a path() function which takes an SVG fill rule as an argument. This allows for highly complex shapes that can be drawn in a graphics tool such as Illustrator or Inkscape and then copied into your CSS.

Transforms

Lastly in this overview of CSS functions are the transform functions, which skew, resize and even change the depth of an element. All of the following functions are used with the transform property.

Rotation

You can rotate an element using the rotate() function, which will rotate an element on its center axis. You can also use the rotateX(), rotateY() and rotateZ() functions to rotate an element on a specific axis instead. You can pass degree, turn and radian units to determine the level of rotation.

.my-element {
  transform: rotateX(10deg) rotateY(10deg) rotateZ(10deg);
}

The rotate3d() function takes four arguments.

The first 3 arguments are numbers, which define the X, Y and Z coordinates. The fourth argument is the rotation which, like the other rotation functions, accepts degrees, angle and turns.

.my-element {
  transform: rotate3d(1, 1, 1, 10deg);
}

Scale

You can change the scaling of an element with transform and the scale() function. The function accepts one or two numbers as a value which determine a positive or negative scaling. If you only define one number argument, both the X and Y axis will be scaled the same and defining both is a shorthand for X and Y. Just like rotate(), there are scaleX(), scaleY() and scaleZ() functions to scale an element on a specific axis instead.

.my-element {
  transform: scaleX(1.2) scaleY(1.2);
}

Also like the rotate function, there is a scale3d() function. This is similar to scale(), but it takes three arguments: the X, Y and Z scale factor.

Translate

The translate() functions move an element while it maintains its position in the document flow. They accept length and percentage values as arguments. The translate() function translates an element along the X axis if one argument is defined, and translates an element along the X and Y axis if both arguments are defined.

.my-element {
  transform: translatex(40px) translatey(25px);
}

You can—just like with other transform functions—use specific functions for a specific axis, using translateX, translateY and translateZ. You can also use translate3d which allows you to define the X, Y and Z translation in one function.

Skewing

You can skew an element, using the skew() functions which accept angles as arguments. The skew() function works in a very similar way to translate(). If you only define one argument, it will only affect the X axis and if you define both, it will affect the X and Y axis. You can also use skewX and skewY to affect each axis independently.

.my-element {
  transform: skew(10deg);
}

Perspective

Lastly, you can use the perspective property —which is part of the transform family of properties—to alter the distance between the user and the Z plane. This gives the feeling of distance and can be used to create a depth of field in your designs.

This example by David Desandro, from their very useful article, shows how it can be used, along with perspective-origin-x and perspective-origin-y properties to create truly 3D experiences.

Animation functions, gradients and filters

CSS also provides functions that help you animate elements, apply gradients to them and use graphical filters to manipulate how they look. To keep this module as concise as possible, they are covered in the linked modules. They all follow a similar structure to the functions demonstrated in this module.

Check your understanding

Test your knowledge of functions