5 useful css functions (share)

CSS contains many functions, and it can do many things that earlier required JavaScript. New features are added every year, making our development easier and reducing our dependence on JavaScript. CSS functions are one of the most powerful features it has, and in this article I’ll cover a few that I find useful.

(Learning video sharing: css video tutorial)

attr()

attr function is used to obtain the selected element attribute value. It accepts three parameters, property name, type and default value.

Grammar:

attr( attribute-name <type-or-unit>? [, <fallback> ]? )

Example:

<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
}

Effect:

Source code: https://codepen.io/protic_milos/pen/GRpYJKd

calc()

This function allows us to calculate CSS values ​​instead of specifying exact values . Typically used to calculate the size or position of an element. It supports addition, subtraction, multiplication and division.

An important point to note is that and - operators must be separated by spaces, otherwise they will not work properly. The * and / operators do not have this restriction, but for consistency reasons it is recommended to add spaces.

Also, what’s great is that we can mix CSS units, for example, we can subtract percentages and pixels.

We can build an example with a centered element using calc:

<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)
}

Effect:

Source code: https://codepen.io/protic_milos/pen/GRpYJKd

var()

Through this function, we can use The value of a custom property is used as the value of another CSS property. Simply put, we can define a color, for example, put it in a custom property (CSS variable) and then reuse the property value by calling the var function.

Together with CSS variables, this function improves maintainability and reduces duplication. One use case is creating themes for websites.

This function accepts two parameters, the custom property and a default value that will be used if a problem occurs.

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

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

Effect:

Source code: https://codepen.io/protic_milos/pen/GRpYJKd

counter()

Personally, I've never used this method, but it looks interesting. This function returns the current value of the specified counter and needs to be used in conjunction with counter-reset and counter-increment.

We can use it to calculate other elements, such as ordered lists.

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

Source code: https://codepen.io/protic_milos/pen/GRpYJKd

circle()

This function creates a circular area to mask the element it is applied to. You can specify its radius and position. Often used with images to create rounded shapes. This function is the clip-path property value.

Also, it’s worth mentioning that in addition to circles, you can also create elliptical and polygonal shapes.

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

css

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

Source code: https://codepen.io/protic_milos/pen/GRpYJKd

Summary

As I have mentioned many times before, in many cases developers ignore the possibilities of CSS and therefore lose the simplicity of the web site. Every year we can rely on CSS to give us the design capabilities we need, and that's great, JavaScript should be focusing on other things instead of design.

For more programming-related knowledge, please visit: Introduction to Programming! !

The above is the detailed content of 5 useful css functions (share). For more information, please follow other related articles on the PHP Chinese website!