The term attr is the abbreviation of the word attribute. This CSS function targets an HTML attribute and uses its value to accomplish different things via CSS.

In CSS, the attr() function is most commonly used with the content property together with the :after CSS pseudo-element to inject content into the document, but in reality the attr() function can be used with any other CSS property.

In HTML, it's very common to use the attr() CSS function to target the HTML5 data- or the href attributes. The attr() function can be used to target any HTML attribute.

In CSS3 the syntax of the attr() CSS function is a bit different. It accepts not only an attribute value but it also accepts two more arguments, a type-or-unit argument and an attribute fallback argument. The type-or-unit argument is optional. It tells the browser which type of attribute is in order to interpret its value. The attribute fallback argument defines a fallback value in case something goes wrong during the parsing of the main attribute of the element.

A good practice for printing web documents is to print the URL next to the linked element. Another common practice is to use a combination of the attr() CSS function with the content property and the HTML5 data- attribute in responsive tables to inject the content of a cell (usually a heading) next to their corresponding value via CSS, thus saving space.

CSS:

/*Print the links from the content*/
@media print {
   main a[href]:after {
     content: attr(href);
  }
}

We can perform those calculations with addition (+), subtraction (-), division (/), and multiplication (*). It's commonly used to calculate relative values for width and height, but as you saw, we can use this function with any CSS property.

A few things to consider are that a space is required before and after the addition (+) and subtraction (-) operators, otherwise a subtraction, for example, can be considered to have a negative value, for example, calc(2.5em -5px). This calc() function is invalid since the second value is considered a negative value. Space is required after the subtraction (-) operator. However, the division (/) and multiplication (*) operators don't require the spaces.

Now, when doing a division (/), the value on the right must be a number value. For a multiplication (*) operation, at least one of the values must be number value as well.

CSS:

/* The element's width is half its intrinsic width plus 25px*/
.element { width: calc(100% / 2 + 25px); }
/*The element's padding is 10px minus .25em of the result*/
.element { padding: calc(5 * 2px - .25em); }

The url() function uses the URL value to point or link to a resource. URL stands for Uniform Resource Locator.

This function is commonly used with the background or background-image properties, but it can be used with any of the properties that take a URL as a value, like @font-face, list-style, cursor, and so on.

The URL can be quoted using single (' ') or double quotes (" "), or not quoted at all. However, there can't be any combinations of quote styles such as starting with a single quote and ending with a double quote.

Also, double quotes inside a URL that uses single quotes and single quotes inside a URL that uses double quotes must be escaped with a backslash (). Otherwise, it will break the URL.

The URL pointing to the resource can be either absolute or relative. If it's relative, it's relative to the location of the style sheet in the folder structure, not the webpage itself.

The url() CSS function also supports Data URI's, which is basically the code of an image. So instead of pointing the selector to download an image in the /images folder, we can embed the actual image in the CSS.

Be careful with this because although we are reducing an HTTP request (and that's a huge win), we might be making the CSS file larger and a bit harder to maintain if the image changes. There can also be potential performance and render-blocking issues.

For more information about Data URIs, you can read this great article by Nicholas Zakas: Data URIs Explained (https://www.nczonline.net/blog/2009/10/27/data-uris-explained/).

CSS:

/*Colombian flag icon as Data URI. No quotes in URL*/
.element { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAALCAYAAAB24g05AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAAAkSURBVCiRY3y7leE/AwWAiRLNw8QARgbO40M8EBnvMgz1dAAAkeoGYBluZXgAAAAASUVORK5CYII=) #ccc no-repeat center; }

/*Custom cursor. Single quotes in URL*/
.element { cursor: url('../images/cursor.cur') 10 10, default; }

/*Web font. Double quotes in URL*/
@font-face {
  font-family: Franchise; 
  src: url("../fonts/franchise.woff") format("woff");
}

The cubic-bezier() function is used with the animation-timing-function and the transition-timing-function CSS properties. Most use cases can benefit from the already defined easing functions we mentioned in Chapter 4, CSS Properties – Part 1, (ease, ease-in, ease-out, ease-in-out, and linear); if you're feeling adventurous, cubic-bezier() is your best bet.

Refer to the animation-timing-function CSS property in Chapter 4, CSS Properties – Part 1, to see what a Bézier curve looks like. The cubic-bezier() function takes four parameters in the form of:

animation-timing-function: cubic-bezier(a, b, a, b);

Let's represent all five predefined easing functions with the cubic-bezier() function:

I'm not sure about you, but I prefer to use the predefined values.

Now, we can start tweaking and testing each value to the decimal, save, and wait for the live refresh to do its thing. But that's too much wasted time testing if you ask me.

The amazing Lea Verou created the best web app to work with Bézier curves: www.cubic-bezier.com. This is by far the easiest way to work with Bézier curves. I highly recommend this tool.

The Bézier curve image showed previously was taken from the www.cubic-bezier.com website.

CSS:

.element {
  width: 300px;
  height: 300px;
  animation: fadingColors 2s infinite alternate 3s none running cubic-bezier(.42, 0, 1, 1);
}