Comment puis-je déboguer efficacement les valeurs CSS `calc()` ?

Débogage des valeurs CSS Calc()

Problème : Le débogage de formules CSS calc() complexes peut être difficile.

Comment valider/mettre en évidence la formule Erreurs :

• Assurez-vous que votre formule respecte les règles suivantes :

  • Aucune addition/soustraction de types différents (par exemple, px et s) .
  • Pour la multiplication, un côté doit être un nombre.
  • Pour la division, le côté droit doit être un nombre. nombre différent de zéro.
  • Un espace blanc est requis des deux côtés des opérateurs et -.

Comment déboguer la valeur calculée :

• Vous ne pouvez pas accéder directement à la valeur calculée "finale" car elle varie en fonction du propriété.
• Utilisez JavaScript pour obtenir la valeur calculée de propriétés spécifiques :

var elem = document.querySelector(".box");
var prop = window.getComputedStyle(elem, null).getPropertyValue("--variable");
var height = window.getComputedStyle(elem, null).getPropertyValue("height");
console.log(prop);
console.log(height);

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!