Utilisation de la valeur absolue, du signe, de l'arrondi et du modulo dans CSS aujourd'hui

Utilisation intelligente des fonctions mathématiques CSS: Simuler ABS (), Sign (), Round () et Mod ()

La spécification CSS contient de nombreuses fonctions mathématiques pratiques, telles que les fonctions trigonométriques, les fonctions exponentielles, les fonctions de corrélation symbolique (ABS (), Sign ()) et les fonctions de valeur d'échelle (Round (), Mod (), Rem ()). Cependant, ces fonctions ne sont pas prises en charge par tous les navigateurs. Cet article présentera comment utiliser les fonctionnalités CSS existantes pour simuler les fonctions des fonctions ABS (), Sign (), Round () et Mod (), et démontre son pouvoir dans les applications pratiques.

Il convient de noter que les technologies suivantes ne sont pas conçues pour les navigateurs plus âgés. Certaines technologies reposent sur la prise en charge du navigateur pour l'enregistrement des attributs personnalisés (utilisant @Property) et sont actuellement principalement limités au navigateur Chromium.

Équivalents de calcul de simulation

• --abs (ABS)

Il peut être implémenté en utilisant la fonction max() de CSS. Supposons que vous ayez une propriété personnalisée --a , dont la valeur peut être positive ou négative pour obtenir sa valeur absolue, vous pouvez utiliser la méthode suivante:

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

Si --a est positif, alors -1*var(--a) --a négatif, max() max() -1*var(--a) -1*var(--a) var(--a) ;

• --sign (symbole)

En utilisant des valeurs absolues, vous pouvez calculer le symbole d'un nombre:

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

Important: cette méthode ne convient qu'aux valeurs sans unité. Si --a est 0, vous devez utiliser la prise en charge de Houdini pour enregistrer l'attribut --sign et définir la valeur initiale sur 0:

 @property - signer {
  Syntaxe: '<integer> ';;
  valeur initiale: 0;
  hérite: faux;
}</integer>

Pour les entiers, vous pouvez utiliser clamp() pour simplifier:

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

Cette méthode ne convient qu'aux entiers sans valeur unitaire et une valeur absolue d'au moins 1. Pour les décimales, des améliorations sont nécessaires, telles que:

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

• --round , --ceil et --floor (arrondi, arrondi et arrondis)

Cela nécessite d'enregistrer une propriété personnalisée et de forcer son type à un entier:

 @property - rond {
  Syntaxe: '<integer> ';;
  valeur initiale: 0;
  hérite: faux;
}

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

--ceil et --floor peut être implémenté en ajoutant ou en soustrayant 0,5:

 @property - floor {
  Syntaxe: '<integer> ';;
  valeur initiale: 0;
  hérite: faux;
}

@property --ceil {
  Syntaxe: '<integer> ';;
  valeur initiale: 0;
  hérite: faux;
}

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

• --mod (mod)

Basé sur la mise en œuvre --floor :

 @property - floor {
  Syntaxe: '<integer> ';;
  valeur initiale: 0;
  hérite: faux;
}

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

Cas de candidature

• Effets symétriques dans l'animation

Des valeurs absolues peuvent être utilisées pour créer des retards d'animation symétriques:

 --m: calc (.5 * (var (- n) - 1));
--abs: max (var (- m) - var (- i), var (- i) - var (- m));
Animation-retard: calc (var (- abS) / var (- m) * # {$ t}) infini vers l'arrière;

• Ajuster le style en fonction de l'élément sélectionné

Vous pouvez utiliser des fonctions symboliques pour déterminer si un élément est avant ou après la sélection de l'élément, afin que différents styles soient appliqués.

• Formatage temporel

Vous pouvez utiliser des fonctions floor() et mod() pour formater l'heure:

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

Pour plus de cas, veuillez vous référer au texte d'origine.

En bref, en appliquant intelligemment les caractéristiques existantes du CSS, certaines fonctions mathématiques peuvent être simulées et mises en œuvre, réalisant ainsi des effets d'animation et de style plus complexes dans CSS sans compter sur JavaScript. Cela offre un espace plus large pour les applications créatives de CSS.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!