От автора: в предыдущих постах о препроцессорах CSS мы обсуждали, как можно посчитать величину с помощью специальных функций. Честно говоря, то же самое можно сделать в CSS3 с помощью новой функции под названием calc(). В этой статье мы рассмотрим, как применить ее к таблице стилей.
Применение функции Calc()
Как уже упоминалось, можно употреблять calc() для определения таких величин, как width, height, margin, padding, font-size, и т.д. Для измерения можно использовать математические действия: сложение, вычитание, деление и умножение.
Например, предположим, что у нас внутри обертки имеется три <div>, как показано внизу.
|
1 2 3 |
<div class="col one">A</div> <div class="col two">B</div> <div class="col three">C</div> |
При помощи функции calc() можно легко определить эти div в колонки с равной шириной следующим образом.
|
1 2 3 4 |
.wrapper .col { width: calc(100% / 3); padding: 0 10px; } |
Следующая математическая операция calc(100% / 3); делит 100% родительской ширины на три, и вот как все это смотрится в браузерах. У трех div получается одинаковая ширина.
Кроме того, Курт Мейн (Kurt Maine) доказал, насколько на самом деле функция calc() удобна для создания адаптивной разметки.
Обратите внимание на следующее
При употреблении функции calc() стоит обратить внимание на некоторые вещи.
Во-первых, подсчет проводится слева направо.
Деление и умножение, а также математические выражения внутри скобок будут считаться в первую очередь.
В настоящее время calc() не поддерживается в Opera.
Для ранних версий Firefox и Chrome понадобятся префиксы -moz- и-webkit-.
Для операций можно применять различные единицы, например calc(50% – 10px)
Знаки + и – нужно разделять пробелами, например calc(100% -5px) вернет invalid, так как интерпретируется как процент, за которым следует отрицательное значение. Но пробелы не нужны для знаков * и /.
Последнее размышление
Прежде в CSS3 и препроцессоре CSS мы были ограничены фиксированным типом величины. Сегодня с помощью calc() можно более разумно установить величину, а побольше узнать об этой функции можно из нижеприведенных ссылок.
Документация calc() – W3.org
Жемчужины CSS3: функция calc() – Site Point
Совместимость функции calc() с браузерами – caniuse.com
Автор: Thoriq Firdaus
Источник: //www.hongkiat.com/
Редакция: Команда webformyself.
