Javascript Girl
  1. Javascript Girl
  3. Est-il possible de faire des mathématiques à l'intérieur de CSS?
Intereting Posts
Quelle est la différence entre cette déclaration de prototype? Bonne pratique lors de la manipulation des contrôles HTML via Javascript # Ember-power-select: changer la valeur dans une boîte de sélection d'alimentation, elle change alternativement la même valeur pour une autre boîte de sélection d'alimentation Comment trier et créer plusieurs champs de texte avec jQuery UI's droppable? Est-ce un transformateur monad en Javascript valide? Modification du titre par défaut de confirmation () en JavaScript? ReadFile in Base64 Nodejs RegEx – Validation du temps ((h) h: mm) Passez la souris sur l'image pour afficher les boutons et ne déclenchez pas lors du survol des boutons réels Pourquoi le courrier ne comprendra-t-il pas de paramètres de lien? Test javascript pour l'existence de la clé d'objet imbriquée Injecter CSS pour l'extension chrome Ext Js Combo Filtrer par éléments distincts Quel est le pré-enregistrement pour récupérer ces valeurs à l'aide de javascript Javascript variable qui contient </ script>

Est-il possible de faire des mathématiques à l'intérieur de CSS?

J'ai un jquery accorion id #accordion et une partie du contenu dans le nom de classe d'en-tête .simpleColor . Maintenant, je veux donner une marge calculée à .simpleColor. En pseudo … ça ressemble à quelque chose comme ça, 

 .simpleClass { margin-left: ((#accordion.width/2) - (.simpleColor.width/2)); }

Je suis ouvert à utiliser toute autre technologie comme javascript pour y parvenir si cela est possible.

Il existe une fonction CSS appelée calc qui commence à obtenir un support assez bon. La syntaxe fonctionne comme suit: 

 width: calc(50% - 100px);

(Notez que les espaces autour des opérateurs sont importants)

Cela permet un véritable support informatique dynamique dans CSS. Avec un préprocesseur, vous ne pouvez combiner que des longueurs statiques avec des longueurs statiques et des longueurs relatives avec celles relatives.

Calc est pris en charge depuis Chrome 19, Firefox 4 et IE9. La fonctionnalité n'est pas assez largement supportée pour l'utiliser largement, mais ce ne sera pas trop loin dans le futur et c'est quelque chose à retenir et impatient.

Il n'est pas possible de faire des opérations mathématiques à l'intérieur de CSS en mode natif. Vous pouvez utiliser JavaScript pour modifier les propriétés de CSS sur le chargement de la page, mais ceci est une douleur et doit être fait chaque chargement de page, rendant votre page plus lente.

Vous devrez utiliser un préprocesseur CSS comme LESS , Stylus ou SASS .

Le bonus à l'utilisation de l'une ou l'autre de ces langues est que vous pouvez générer des feuilles de style CSS réelles à partir d'elles. Vous obtenez également des avantages tels que fonctions, mixins, variables et plus encore. 

 jQuery('.simpleClass').css('margin-left', (jQuery('#accordian').width() / 2) - (jQuery('.simpleColor').width() / 2) + 'px');

Doit faire ce que vous voulez. Mais vous devez faire quelque chose comme cela en javascript, vous ne pouvez pas le faire en CSS pur, à moins que les largeurs de #accordian et .simpleColor soient connues à l'avance (et donc calculées à l'avance).

Si vous êtes ouvert à l'utilisation d'une autre technologie, essayez d'utiliser moins: http://lesscss.org/

Je crois que le CSS devrait être une définition pure du style. Je n'aime pas mélanger des calculs avec ça. Je ferais cela dans mon javascript 

 var accWidth=parseInt($("#accordion").css("width").replace("px","")); var simpWidth=parseInt($(".simpleColor").css("width").replace("px","")); var marginLeft=((accWidth/2)-(simpWidth/2)); $(".simpleClass").css("margin-left",marginLeft);

Exemple de travail http://jsfiddle.net/mzTRw/19/

Voir cet exemple. Il a utilisé beaucoup de maths dans css.

http://codepen.io/schoenwaldnils/pen/DLiyr