В спецификации CSS3 зарыто множество сокровищ, которые так и норовят остаться незамеченными, скрываясь за статусом черновика и условной невалидностью кода. Однако мы продолжаем прилагать усилия по откапыванию подобных «плюшек», и сегодня это будет свойство calc(). Мне непременно хочется о нем упомянуть, так как оно может сильно повлиять на ваш подход к верстке. 

Изначально calc() предназначался для расчета длины, количества, угла, повторов переходов и анимаций или последовательностей звуков. Однако, кроме этого, он дает вам возможность смешивать типы измерений.

Допустим, у вас на странице есть два элемента со свойством float. И вам захотелось, чтобы оба эти элемента были одинаковой ширины, разделенные отступом margin в 60 пикселей. Звучит легко, да? Если страница у нас будет 960px, то оба элемента будут аккурат по 450px. Никаких проблем: если речь идет о дизайне с фиксированной шириной.

Но как насчет плавающих или изменяющихся макетов? Тут ширину страницы не задашь, и большинство дизайнеров установят каждому элементу ширину, скажем, в 45%. И что у нас выходит? Что наш промежуток будет равняться 60px только тогда, когда страница будет 600px шириной. Как увеличение, так и уменьшение размера окна браузера изменит его ширину: либо промежуток станет больше, либо, соответственно, меньше.

На наше счастье calc() умеет высчитывать ширину. В нашем конкретном примере нам нужно, чтобы оба элемента имели ширину 50% минус 30px:

#element1, #element2 { float: left; width: calc(50% - 30px); } #element2 { margin-left: 60px; }

Или, скажем, вы хотите задать отступ, зависящий от размера шрифта, к примеру, 4em. Опять же, без проблем:

#element1, #element2 { width: calc(50% - 2em); }

А потом вам приспичило добавить границу в 2 пикселя шириной для каждого из наших элементов:

#element1, #element2 { width: calc(50% - 2em - 4px); border: 2px solid #000; }

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

#element1, #element2 { width: calc((50% + 2em)/2 + 14px); }

Поддержка calc() браузерами

Угадайте, кто поддерживает эту рекомендацию W3C в чистом виде?

А вот и неправильно. На момент написания статьи — только Internet Explorer 9. Еще Firefox, но с префиксом: -moz-calc(). А вот Chrome, Safari и Opera пока еще подкачали. Надеюсь, этот чертовски нужный каждому веб-мастеру инструмент будет включен в их поддержку в самые кратчайшие сроки, и нам не придется долго ждать.

Но, в любом случае, пока что мы можем указывать:

#element1, #element2 { width: 45%; /* all browsers */ width: -moz-calc(50% - 30px); /* Firefox 4+ */ width: calc(50% - 30px); /* IE9+ and future browsers */ }

Что уже лучше, чем ничего, верно?

Напомню, что то же самое касается и отступов:

#element2 { margin-left: 10%; /* all browsers */ margin-left: -moz-calc(60px); /* Firefox 4+ */ margin-left: calc(60px); /* IE9+ and future browsers */

И — в качестве задела на будущее...

CSS3 min() и max()

Если вам понравилась идея calc(), вы непременно оцените свойства min() и max(). В них можно указывать два или более значений, разделенных запятыми, к примеру:

#myelement { width: max(300px, 30%, 30em); font-size: min(10px, 0.6em); }

Эти свойства будут наиболее полезны при использовании зависимого размера шрифта, чтобы выть уверенным, что текст не станет слишком крупным или мелким.

Однако, повторюсь — это только в ближайшем будущим, так как min() и max() не поддерживаются сейчас ни одним из современных браузеров. Будем надеяться, это ненадолго.

По материалам статьи, перевод — Дежурка.



Комментарии