Может кто-нибудь помочь объяснить, как на самом деле работает метод css3 calc ()?

Question

http://www.w3.org/TR/css3-values/#calc

Я работал над библиотекой, которая конвертирует некоторые методы css3 в css2.Одна сложная часть - математика. Предложение метода css3 calc () в значительной степени поразило меня.

Я могу добавлять / вычитать / делить / умножать пиксели из EMS или любой другой фиксированной единицы, ноПонятия не имею, как бы вы добавили 10px к 60%.

Допустим, у вас есть переменные setup: $ width1 = 10px;и $ width2 = 50%;

width: <?php echo $width1 + $width2; ?>;

Есть ли способ выполнить этот тип математики, чтобы статические значения ширины могли быть применены к более старым браузерам?Может быть, используя выражения CSS в качестве запасного варианта?

Answer 1

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

$ width1 = 10px $ width2 = 50%

Предполагая (для этого примера) экран 500px, если проценты имеют приоритет, сначала у вас будет блок 250px, к которому вы добавите 10px, что приведет к 260px. Если вы пойдете другим путем, это будет 250px. (Предполагается, что auto имеет приоритет над всеми, поэтому auto + 10px, а затем 50% его родительского контейнера).