CSS Functions

CSS Functions are components of CSS property values that accept arguments and return a value. These functions greatly extend the capabilities of CSS, allowing for dynamic calculations, accessing property values, manipulating colors, and more.

calc()

The calc() function is probably the most commonly used and powerful CSS function. It allows you to perform mathematical calculations within CSS property values. You can use different units on either side of the +, -, *, / operators.

Note: The + and - operators must be surrounded by whitespace, while * and / do not have this requirement (but it is recommended to add spaces for readability).

:root {
  --header-height: 60px;
}

.content {
  /* Calculate viewport height minus header height */
  height: calc(100vh - var(--header-height));
}

.element {
  /* Mix different units */
  width: calc(100% - 2rem);
}

var()

The var() function is used to insert the value of a CSS custom property (variable). It accepts two arguments: the name of the custom property to insert, and an optional fallback value.

:root {
  --primary-color: #007bff;
}

.button {
  background-color: var(--primary-color);
  /* If --button-padding is undefined, use 10px 20px */
  padding: var(--button-padding, 10px 20px);
}

attr()

The attr() function is used to retrieve the value of an attribute on the selected element and use it in the style. Currently, it is mainly used with the content property, but future CSS specifications may extend its usage.

<a href="..." data-tooltip="This is a link">Link</a>

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

[data-tooltip]::before {
  content: attr(data-tooltip);
  /* ...other styles to create the tooltip... */
}

Color Functions

CSS provides various functions to define and manipulate colors.

• rgb(r, g, b): Defines a color using the Red, Green, and Blue channels (0-255).
• rgba(r, g, b, a): Same as rgb(), but adds an alpha transparency channel (0 to 1).
• hsl(h, s, l): Defines a color using Hue (0-360), Saturation (%), and Lightness (%). This way is more intuitive.
• hsla(h, s, l, a): hsl() with an alpha transparency channel.

.element {
  color: rgb(255, 0, 0); /* Red */
  background-color: rgba(0, 0, 255, 0.5); /* Semi-transparent blue */
  border-color: hsl(120, 100%, 50%); /* Pure green */
}

Gradient Functions

These functions are used to create the <gradient> data type, typically used in the background-image property.

• linear-gradient(): Creates a linear gradient.
• radial-gradient(): Creates a radial gradient.
• repeating-linear-gradient(): Creates a repeating linear gradient.
• repeating-radial-gradient(): Creates a repeating radial gradient.

.linear {
  background-image: linear-gradient(to right, red, blue);
}

.radial {
  background-image: radial-gradient(circle, white, green);
}

url()

The url() function is used to include an external file, most commonly used in background-image or @font-face.

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

@font-face {
  font-family: 'MyFont';
  src: url('path/to/font.woff2') format('woff2');
}

Mastering these CSS functions allows you to write more flexible, dynamic, and maintainable style code.