CSS Functions Guide

CSS Function Guide: Powerful Tools to Control Styles

Like other programming languages, CSS also has functions. These functions can be inserted into the position of a value, or in some cases used with another value declaration. Some CSS functions even allow you to nest other functions!

More

In programming, a function is a piece of named code that performs a specific task. For example, a function in JavaScript called sayWoof() :

 function saysWoof() {
 console.log("Woof!");
}

We can use this function after defining the desired behavior. In this example, any time you type sayWoof() in your website or web application's JavaScript, it will print "Woof!" to the browser's console.

Functions can also use parameters, which are slots for numeric or text fragments, which you can input into the logic of the function to modify them. In JavaScript, it works like this:

 function countDogs(amount) {
 console.log("There are " amount " dogs!");
}

Here, we have a function called countDogs() which has a parameter called amount . When a number is provided for amount , it takes that number and adds it to the pre-specified sentence. This allows us to create sentences that tell us how many dogs we counted.

 countDogs(3); // There are 3 dogs!
countDogs(276); // There are 276 dogs!
countDogs("many"); // There are many dogs!

Some programming languages ​​come with built-in functions to help you avoid reinventing the wheel for every new project. In general, these functions are designed to help make it easier to use the language's main advantages and features.

For example, library. A library is a collection of code composed of carefully selected collections of functions designed to help speed up and simplify development—such as FitVids.js, for creating flexible video elements.

### Basics of CSS Functions

Unlike other programming languages, we cannot create our own functions in CSS. This logic is reserved for the CSS selector, which allows you to create powerful conditional style rules.

Unlike other programming languages—the output of functions in other programming languages ​​usually implicitly affects subsequent logic—the output of CSS functions is visual in nature. This output is used to control the layout and presentation of the content. For example:

 .has-orange-glow {
  filter: drop-shadow(0.25rem 0 0.75rem #ef9035);
}

The CSS filter function drop-shadow() uses the parameters we provide to create an orange outer glow effect on whatever it applies.

In the following demonstration, I have a JavaScript function called toggleOrangeGlow which toggles the application of the .has-orange-glow class on the CSS-Tricks logo. Using this with the CSS transition, we can create a cool glow effect:

You may be familiar with some CSS functions, but the language has an amazingly extensive list!

As with any other technology on the web, different CSS functions have different levels of browser support. Make sure you do research and test to make sure your experience works for everyone and use something like @supports to provide a high-quality alternative experience.

Commonly used CSS functions

url()

 .el {
  background: url(/images/image.jpg);
}

Use url()

url() allows you to link to other resources to load them. This can include images, fonts, and even other style sheets. For performance reasons, it is best to limit what you load via url() , as each declaration is an additional HTTP request.

#### attr()

 /*<div data-example="foo"> */
div {
  content: attr(data-example);
}<p><details><summary> Use <code>attr()</code></summary><p> This function allows us to enter HTML, get the content of the property, and provide it to the CSS <code>content</code> property. You will usually see <code>attr()</code> used in a style sheet, which is used to display the link's URL after the link text. Another good application of this function is to use it to display an alternative description of the image if it fails to load.</p></details></p>
<p> #### <code>calc()</code></p>
<pre class="brush:php;toolbar:false"> .el {
  width: calc(100vw - 80px);
}

Use calc()

If you have a function that should take some time to experiment, that is calc() . We have a complete guide on calc() .

This function takes two parameters and calculates the result based on the operators you provide ( , -, *, /), provided that these parameters are numbers with or without accompanying units.

Unlike CSS preprocessors like Sass, calc() can mix units, which means you can do things like subtracting 6rem from 100%. calc() is also dynamically updated, so if 100% represents width, it will still work if that width changes. calc() can also accept CSS custom properties as parameters, which gives you incredible flexibility.

#### lang()

 p:lang(en) {
  quotes: "\201C" "\201D" "\2018" "\2019" "\201C" "\201D" "\2018" "\2019";
}

Use lang()

Including lang attributes in your HTML is a very important thing. When it appears in your HTML, you can use the lang() function to locate the appearance of the property value and apply the style conditionally according to it.

A common use of this selector is to set language-specific quotes, which is very useful for internationalization, etc.

Smart designers and developers may also use it as a hook for a website with style-translated versions, where cultural and/or linguistic considerations mean different perceptions of things like negative space.

#### :not()

 h3:not(:first-child) {
  margin-top: 0;
}

Use not()

This pseudo-class selector will select anything that is not specified by you. For example, you can use body:not(img) to locate anything that is not an image. While this example is very powerful, scoped :not() to a more centralized selector (such as BEM's block class) can give you a lot of versatility.

Currently, :not() only supports one selector as its parameter, but support for multiple comma-separated parameters is being developed (e.g. div:not(.this, .that) )!

For more information about functions, please refer to the original text. Due to space limitations, the remaining large number of CSS functions in the original text are omitted here. Please refer to the original text for complete information.