30 October 2011

Калькулятор на CSS3

CSS
Здравствуй, хабраюзер!

Сидя недавно и листая developer.mozilla.org наткнулся на описание -moz-calc();
Вкратце, данное свойство используется для расчёта выражений прямо в CSS.
Тут-то и родилась идея сделать калькулятор, который бы считал через это хитроумное свойство.
Что из этого вышло, можно судить по этому скриншоту:



Дисклеймер


Для начала, надо сразу понять, что без JavaScript тут не обойтись, ибо мы должны как-то присваивать некоему свойству (например, margin) наше математическое выражение, а потом считывать его результат.
Так же это всё сделано Just for Fun и никакого практического смысла не несёт.

Нам доступны операторы +, -, / и *.
Согласно стандарту данное свойство может использоваться везде, где допустимо использование числовых единиц измерения (px, ms, s, %, vh, pt, em, ex, deg, grad, и т.д.)

"+" и "-"

Эти операторы проверяют, что числа с обоих сторон оператора одинакового типа.
Под типом подразумевается, что cm — единица измерения длины, deg — угла и т.д.
Проценты могут использоваться в том случае, когда они могут быть преобразованы к типу свойства, для которого рассчитывается выражение.

Пример отцентрированного элемента, имеющего отступы в 100px с каждой стороны.
#elem {
height: 100px;
margin: 0 auto;
width: -moz-calc(100% - 200px);
border: 1px solid black;
}


* и /

"*" (Умножение):
Оператор проверяет, что хотя бы одно из умножаемых значений является числом.
"/" (Деление):
Проверяет, что делитель всегда число и не равен 0.

Элемент, имеющий ширину 1/6 от ширины страницы.

#elem2 {
	width: -moz-calc(100% / 6);
}


Присваиваемое значение не везде равно полученному.
Например:

width: -moz-calc(1px - 10px); /* Width = 0 */

Сие происходит потому, что ширина не может быть отрицательной.

На данный момент CSS3 calc реализован в Firefox 4+ и IE9+.
В Firefox он реализован с префиксом -moz-, в IE без префикса.
В багтрекере Webkit существует баг, повествующий нам о статусе реализации.
Но из-за отсутствия у меня IE9 и возможности проверить, данный калькулятор работает только в Firefox 4+.

В итоге получилось это:
CSS3 Calculator

Принцип работы прост:
1.) Получаем из input выражение.
2.) Присваиваем его свойству margin (Такому, что поддерживает отрицательные числа).
3.) Считываем рассчитанный результат в пикселах.

Баги:
1.) Странно округляющиеся числа (А-ля 22/7)
Tags:css3-moz-calccalcо_ОJ4F
Hubs: CSS
+71
8.3k 96
Comments 41