Using Absolute Value, Sign, Rounding and Modulo in CSS Today

Clever use of CSS mathematical functions: simulate abs(), sign(), round() and mod()

The CSS specification contains many practical mathematical functions, such as trigonometric functions, exponential functions, symbolic correlation functions (abs(), sign()) and ladder value functions (round(), mod(), rem()). However, these functions are not supported by all browsers. This article will introduce how to use existing CSS features to simulate the functions of abs(), sign(), round() and mod() functions, and demonstrate its power in practical applications.

It should be noted that the following technologies are not designed for older browsers. Some technologies rely on browser support for custom attribute registration (using @property), and are currently mainly limited to Chromium browser.

Simulation calculation equivalents

• --abs (abs)

It can be implemented using the max() function of CSS. Suppose you have a custom property --a , whose value may be positive or negative. To get its absolute value, you can use the following method:

 --abs: max(var(--a), -1*var(--a));

If --a is positive, then -1*var(--a) is negative, max() returns var(--a) ; if --a is negative, then -1*var(--a) is positive, max() returns -1*var(--a) .

• --sign (symbol)

Using absolute values, you can calculate the symbol of a number:

 --abs: max(var(--a), -1*var(--a));
--sign: calc(var(--a)/var(--abs));

Important: This method is only suitable for unitless values. If --a is 0, you need to use Houdini support to register the --sign attribute and set the initial value to 0:

 @property --sign {
  syntax: '<integer> ';
  initial-value: 0;
  inherits: false;
}</integer>

For integers, you can use clamp() function to simplify:

 --sign: clamp(-1, var(--a), 1);

This method is only suitable for integers with no unit value and an absolute value of at least 1. For decimals, improvements are needed, such as:

 --lim: .000001;
--sign: clamp(-1, var(--a)/var(--lim), 1);

• --round , --ceil and --floor (rounded, rounded up and rounded down)

This requires registering a custom property and forcing its type to an integer:

 @property --round {
  syntax: '<integer> ';
  initial-value: 0;
  inherits: false;
}

.my-elem { --round: var(--a); }</integer>

--ceil and --floor can be implemented by adding or subtracting 0.5:

 @property --floor {
  syntax: '<integer> ';
  initial-value: 0;
  inherits: false;
}

@property --ceil {
  syntax: '<integer> ';
  initial-value: 0;
  inherits: false;
}

.my-elem {
  --floor: calc(var(--a) - .5);
  --ceil: calc(var(--a) .5);
}</integer></integer>

• --mod (mod)

Based on --floor implementation:

 @property --floor {
  syntax: '<integer> ';
  initial-value: 0;
  inherits: false;
}

.my-elem {
  --floor: calc(var(--a)/var(--b) - .5);
  --mod: calc(var(--a) - var(--b)*var(--floor));
}</integer>

Application Cases

• Symmetric effects in animation

Absolute values ​​can be used to create symmetric animation delays:

 --m: calc(.5*(var(--n) - 1));
--abs: max(var(--m) - var(--i), var(--i) - var(--m));
animation-delay: calc(var(--abs)/var(--m)*#{$t}) infinite backwards;

• Adjust style according to the selected item

You can use symbolic functions to determine whether an element is before or after the element is selected, so that different styles are applied.

• Time formatting

You can use floor() and mod() functions to format the time:

 --min: max(0, var(--val)/60 - .5);
--sec: calc(var(--val) - var(--min)*60);

For more cases, please refer to the original text.

In short, by cleverly applying the existing features of CSS, some mathematical functions can be simulated and implemented, thereby achieving more complex animation and style effects in CSS without relying on JavaScript. This provides a broader space for creative applications of CSS.

The above is the detailed content of Using Absolute Value, Sign, Rounding and Modulo in CSS Today. For more information, please follow other related articles on the PHP Chinese website!