Можно ли делать математику внутри CSS?

У меня есть jquery accorion id #accordion и часть содержимого внутри заголовка класса .simpleColor. Теперь я хочу дать расчетную маржу .simpleColor. В псевдо... это выглядит примерно так:

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

Я открыт для использования любых других технологий, таких как javascript, для достижения этого, если это возможно.

Ответы

Ответ 1

Там есть функция CSS, называемая calc, которая начинает получать довольно хорошую поддержку. Синтаксис работает следующим образом:

width: calc(50% - 100px);

(Обратите внимание, что пробелы вокруг операторов значительны)

Это позволяет использовать истинную динамическую вычислительную поддержку в CSS. С препроцессором вы можете комбинировать только статические длины со статическими длинами и относительные длины с относительными.

Calc поддерживается с Chrome 19, Firefox 4 и IE9. Эта функция недостаточно широко поддерживается, чтобы широко использовать ее, но она будет не слишком далеко в будущем, и это что-то, что нужно запомнить и с нетерпением ждем.

Ответ 2

Невозможно выполнять математические операции внутри CSS изначально. Вы можете использовать JavaScript для изменения свойств CSS при загрузке страницы, но это боль, и нужно делать каждую загрузку страницы, делая вашу страницу медленной.

Вам нужно использовать препроцессор CSS, например LESS, Stylus или SASS.

Бонус к использованию любого из этих языков заключается в том, что вы можете генерировать фактические стили CSS-стилей из них. Вы также получаете преимущества, такие как функции, mixins, переменные и т.д.

Ответ 3

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

Делайте то, что вы хотите. Но вам нужно сделать что-то подобное в javascript, вы не можете сделать это в чистом CSS, если ширина для #accordian и .simpleColor заранее известна (и, следовательно, вычисляется заранее).

Ответ 4

Если вы открыты для использования других технологий, попробуйте использовать меньше: http://lesscss.org/

Ответ 5

Я считаю, что CSS должен быть чистым определением стиля. Мне не нравится смешивать некоторые вычисления с этим. Я бы сделал это в своем 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);

Рабочий образец http://jsfiddle.net/mzTRw/19/