Introduction

CSS comes packed with a lot of functions, and it's capable of many things you might think it requires JavaScript. Each year new features are being added thus making our lives easier and less dependant on JavaScript to achieve goals like animations. CSS functions are one of the most powerful features that it has, and in this article, I will cover the ones I find useful. Enjoy!

  • attr()

The attr function is used to get the attribute value of the selected element. It accepts three arguments, attribute name, type, and a fallback value. An example usage would be pure CSS tooltip.

<p data-text="the attr function"
  data-tooltip="Hi from attr!" class="attr">This text is combined with</p>

CSS

p::after {
  content: ' ' attr(data-text);
}

p.attr:hover::after {
  content: ' ' attr(data-tooltip);
  background-color: orange;
  color: white
}

As you might expect, the output would be the combined text: This text is combined with the attr function. If you hover the paragraph, the text will change.

See codepen

  • calc()

This function gives us the ability to calculate CSS values instead of specifying the exact ones. Usually used to calculate the size or position of the element. It supports addition, subtraction, multiplication, and division.

An important thing to mention here is that + and - operators require to be surrounded by space, otherwise, it won't work. This is not a requirement for * and /, but it's recommended to add them due to consistency.

Also, a great thing is that you are able to mix the CSS units, meaning that we can subtract percentages and pixels, for example.

Let's build an example with a centering element.

<p class="calc">Centered with calc</p>

CSS

p.calc {
  padding: 10px;
  background-color: orange;
  color: white;
  width: 200px;
  text-align:center;
  margin-left: calc(50% - 100px)
}

See codepen

var()

With this function, we are able to use the value of a custom property as a value for another CSS property. In more simple words, we can define a color, for example, place it in the custom property (CSS variable) and reuse that property value (our color) by invoking the var function.

Together with CSS variables, this function improves maintainability and reduces duplication. An example use case would be creating a theme for a website. Here are two articles I've written with focusing on this topic:

This function accepts two arguments, the custom property and a fallback value which will be used if something goes wrong.

:root {
  --bg-color: green;
  --color: white
}

p.var {
  background-color: var(--bg-color);
  color: var(--color)
}

See codepen

counter()

Personally, I've never used this one, but it seems interesting enough to be covered in this article. This function returns the current value of the named counter if defined. Together with counter-reset and counter-increment completes the functionality.

We could use it to count other elements like ordered list.

<div class="counter">
  <span>Mars</span>
  <span>Bounty</span>
  <span>Snickers</span>
</div>

CSS

div.counter {
  counter-reset: count;
  list-style: none;
  padding: 0;
  margin: 0
}

div.counter > span {
  counter-increment: count;
}

div.counter > span::before {
  content: counter(count, decimal) '. ';
  color: orange;
}

See codepen

circle()

This function creates a circular region masking the element it was applied to. You can specify its radius and position. Usually used with images to create rounded shapes. The result of this function is the value for the clip-path property.

Also, it would be useful to mention that, besides circle, you can create ellipse and polygon shapes.

<img class="circle" 
  src="https://devinduct.com/Uploads/PostImages/1122dcb9-954a-4641-9ca6-c38e9472698f.png"
/>

CSS

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

Codepen

Conclusion

As I mentioned a couple of times before, in many cases, the CSS possibilities are neglect by the developers, therefore, losing the simplicity of their web site. With each year we can rely on CSS to provide us the needed design capabilities, which is good, JavaScript should keep it's focus on other things, not on the design.

If you like what you see, do share it, and consider buying me a coffee to keep me juiced up for more. Also, feel free to subscribe here, on devinduct, or follow me on twitter to keep up with the updates.

Thank you for reading and see you in the next article.