Функция calc — потрясающие возможности для адаптивного веб-дизайна

Функция calc - потрясающие возможности для адаптивного веб-дизайна

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

Синтаксис CSS-функции calc

Выражение – это комбинации размерных величин и математических операций, например:

+ сложение (width: calc(15px + 15px););

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

- вычитание (padding: calc(20% — 15px););

* умножение (height: calc(30%*3););

/ деление, но нельзя делить на ноль (width: calc(100%/5);).

Знаки сложения и вычитания должны быть выделены пробелами с обеих сторон. Все вычисления производятся в соответствии со стандартными правилами порядка первоочередности операторов. Чтобы понять синтаксис, давайте рассмотрим следующие примеры:

Браузерная поддержка и префиксы

Функция calc поддерживается в настоящее время всеми современными десктопными версиями браузеров, включая IE9, за исключением Opera до 15 версии (поэтому наберитесь терпения).

Firefox до версии 16 поддерживает значение -moz-calc.

Chrome до версии 26 поддерживает значение -webkit-calc.

Safari до версии 6 поддерживает значение -webkit-calc.

Пример кросс-браузерной записи с помощью вендорных префиксов:

Как CSS-функция calc может облегчить жизнь при создании разметки?

Создание разметки для любых веб-приложений всегда начинается с задания размеров и позиций для всех основных элементов. В это же время, в зависимости от целей проекта и особенностей дизайна, могут использоваться различные комбинации единиц измерения (%, px, em, rem). Функция calc позволяет элегантно решить проблему совмещения фиксированных и «резиновых» блоков, взаимного расположения фиксированных и/или «резиновых» элементов, задания размеров без использования длинных бесконечных дробей (например, 14.857142857%) и многое другое.

На сегодняшний день, наиболее типичная проблема в разметке имеет следующие условия:

часть элементов должна быть «резиновой», т.е. ширина или высота таких элементов будет задана в процентах (обычно это главный контент);

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

часть элементов должна быть с фиксированной шириной (в зависимости от требований, это могут быть рекламные блоки, меню, баннеры, сайдбары и т.д.);

расстояние между блоками может быть фиксированным (px, em, rem) или относительным (%).

Давайте взглянем на пример. Здесь у нас имеется разметка, состоящая из трех колонок, правая и левая колонки фиксированной ширины по 200 пикселей, центральная колонка занимает все доступное оставшееся пространство. Между колонками должно быть задано фиксированное расстояние в 15 пикселей.

Без функции calc для реализации нижеприведенного примера потребовалось бы добавление дополнительных вложенных контейнеров, отступов (margins), полей (paddings), свойства float и т.д.

HTML:

CSS

Просто попробуйте изменять размер окна браузера, чтобы увидеть, что будет происходить:

Демо-пример

Аккуратный ввод некрасивых бесконечных дробей благодаря CSS-функции calc

Рассмотрим типичный пример, где в CSS необходимо использовать некрасивые псевдо-бесконечные дробные числа. Предположим, что у нас есть 7 колонок (блоков), которые нужно расположить в один ряд таким образом, чтобы они в итоге занимали все доступное пространство.

Как вы уже могли догадаться, ширина каждой из колонок будет равняться 100% / 7 = 14.2857142857%, и CSS стили выглядели бы так:

Используя CSS-функцию calc это же самое можно записать очень просто и аккуратно:

Автор: basicuse.net

Источник: http://basicuse.net/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки: ,

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (1)

  1. Таштанбубу

    Хотелось бы более детальное описание создание сайта для чайников. Заранее благодарна

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree