“This is the 15th day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021.”

The front end is beautiful. Devinduct

CSS has a series of functions that can do things you think only JS can do, and every year new features are added to make animations that rely less on JS. Functions are one of the CSS features. The following five CSS functions are commonly used.

attr()

The attr function is used to get the attribute value of the selected element. It takes three parameters, the attribute name, type, and default value. An example use is to implement tooltip functionality with pure CSS.

<p data-text="the attr function"
  data-tooltip="Hi from attr!" class="attr">This text is combined with</p>
Copy the code
p::after {
  content: ' ' attr(data-text);
}

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

As you might expect, the output combines the text with the attr function. If you hover over a paragraph, the text changes. View the effect codepen

calc()

This function enables us to calculate CSS values without specifying exact values. Usually used to calculate the size or position of an element. It supports addition, subtraction, multiplication, and division.

One important thing to mention here is that the + and – operators must be followed by a space, otherwise they will not work. * and/are not required, but are recommended for consistency.

Also, a great thing is that we can mix CSS units, which means we can subtract percentages and pixels, for example.

Take a look at an example with a centered element.

<p class="calc">Centered with calc</p>
Copy the code
p.calc {
  padding: 10px;
  background-color: orange;
  color: white;
  width: 200px;
  text-align:center;
  margin-left: calc(50% - 100px)
}
Copy the code

View the effect codepen

var()

With this function, we can use the value of a custom property as the value of another CSS property. More simply, we can define a color, for example, by placing it in a custom property (CSS variable) and using the property value through the var function. Together with CSS variables, this feature improves maintainability and reduces duplication.

This function takes two parameters, a custom attribute and a default value,

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

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

View the effect codepen

counter()

In the past, counters only existed in ul, OL and other elements. To increase the count of other elements, you could only use list-style image or background-image. Now cSS3 has added the counter function, which can count any element. This function works with counter-reset and counter-increment.

<div class="counter">
  <span>Mars</span>
  <span>Bounty</span>
  <span>Snickers</span>
</div>
Copy the code
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;
}
Copy the code

View the effect codepen

circle()

This function uses a known shape to create a circle. You can specify its radius and location. Often used with images to create circles. The result of this function is often used as the value of the clip-path attribute.

<img class="circle" 
  src="https://devinduct.com/Uploads/PostImages/1122dcb9-954a-4641-9ca6-c38e9472698f.png"
/>
Copy the code
img.circle {
  clip-path: circle(30%);
}
Copy the code

View the effect codepen

conclusion

A lot of times, developers ignore the power of CSS, we should use CSS more to solve design problems, JavaScript should focus on other aspects, not design.