Здравствуй, хабраюзер!
Сидя недавно и листая developer.mozilla.org наткнулся на описание -moz-calc();
Вкратце, данное свойство используется для расчёта выражений прямо в CSS.
Тут-то и родилась идея сделать калькулятор, который бы считал через это хитроумное свойство.
Что из этого вышло, можно судить по этому скриншоту:
Для начала, надо сразу понять, что без JavaScript тут не обойтись, ибо мы должны как-то присваивать некоему свойству (например, margin) наше математическое выражение, а потом считывать его результат.
Так же это всё сделано Just for Fun и никакого практического смысла не несёт.
Нам доступны операторы +, -, / и *.
Согласно стандарту данное свойство может использоваться везде, где допустимо использование числовых единиц измерения (px, ms, s, %, vh, pt, em, ex, deg, grad, и т.д.)
Эти операторы проверяют, что числа с обоих сторон оператора одинакового типа.
Под типом подразумевается, что cm — единица измерения длины, deg — угла и т.д.
Проценты могут использоваться в том случае, когда они могут быть преобразованы к типу свойства, для которого рассчитывается выражение.
Пример отцентрированного элемента, имеющего отступы в 100px с каждой стороны.
"*" (Умножение):
Оператор проверяет, что хотя бы одно из умножаемых значений является числом.
"/" (Деление):
Проверяет, что делитель всегда число и не равен 0.
Элемент, имеющий ширину 1/6 от ширины страницы.
Присваиваемое значение не везде равно полученному.
Например:
Сие происходит потому, что ширина не может быть отрицательной.
На данный момент CSS3 calc реализован в Firefox 4+ и IE9+.
В Firefox он реализован с префиксом -moz-, в IE без префикса.
В багтрекере Webkit существует баг, повествующий нам о статусе реализации.
Но из-за отсутствия у меня IE9 и возможности проверить, данный калькулятор работает только в Firefox 4+.
В итоге получилось это:
CSS3 Calculator
Принцип работы прост:
1.) Получаем из input выражение.
2.) Присваиваем его свойству margin (Такому, что поддерживает отрицательные числа).
3.) Считываем рассчитанный результат в пикселах.
Баги:
1.) Странно округляющиеся числа (А-ля 22/7)
Сидя недавно и листая 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)
