web-dev-qa-db-fra.com

Est-il possible de faire des mathématiques dans CSS?

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

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

Je suis prêt à utiliser toute autre technologie telle que javascript pour y parvenir si cela est possible.

javascriptjqueryhtmlcsscss3
36
TeaCupApp

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

width: calc(50% - 100px);

(Notez que l'espace autour des opérateurs est important)

Cela permet une véritable prise en charge du calcul dynamique en CSS. Avec un préprocesseur, vous ne pouvez combiner que des longueurs statiques avec des longueurs statiques et des longueurs relatives avec des longueurs relatives.

Calc est pris en charge depuis Chrome 19, Firefox 4 et IE9. La fonctionnalité n'est pas assez largement prise en charge pour l'utiliser largement, mais elle ne sera pas trop loin dans le futur et c'est quelque chose à rappelez-vous et attendons avec impatience.

68
TimE

Il n'est pas possible d'effectuer nativement des opérations mathématiques dans CSS. Vous pouvez utiliser JavaScript pour modifier les propriétés CSS au chargement de la page, mais cela est pénible et doit être effectué à chaque chargement de page, ce qui ralentit votre page.

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

L'avantage d'utiliser l'un de ces langages est que vous pouvez générer de véritables feuilles de style CSS à partir d'eux. Vous bénéficiez également d'avantages tels que les fonctions, les mixins, les variables, etc.

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

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

3
Jared Kipe

Voir cet exemple. Il a utilisé beaucoup de mathématiques en CSS.

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

2
Sanu Uthaiah Bollera

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

1
Michael Silveira

Je crois que le CSS devrait être une pure définition de style. Je n'aime pas mélanger certains calculs avec ça. Je le ferais 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/

1
Shyju