Записки HTML-верстальщика: прaктическое применение CSS свойства calc()
Всем добрый день!
Пока Киев заметает снегом, я продолжаю подсказывать начинающим версталам (и не только начинающим) некоторые полезные вещи, которые встречаются в повседневной верстальщицкой деятельности.
Для начала, хотелось бы дать определение этому очень полезному свойству. Что же оно делает?
Так вот, функция calc() позволяет нам задавать размеры чего-либо: текста, отступов, других размеров не какой-либо фиксированной величиной, а при помощи математического простого выражения.
К примеру,
.block {
width: calc(100px + 50px);
}Для чего такие извращения, спросите вы) Фишка в том, что эта функция умеет работать с разными типами размеров. К примеру, очень часто попадается ситуация, когда нам нужно, к примеру, чётко определить ширину какого-нибудь элемента, который занимает ровно на 50 пикселей меньше, чем вся ширина какого-либо блока. Сделать это нам поможет calc():
.block {
width: calc(100% - 50px);
}Это лишь маленький пример того, как мы можем использовать эту функцию. Ниже приведу еще пару примеров, где calc() может пригодиться:
.block {
width: calc(50vmax + 3rem);
padding: calc(1vw + 1em);
transform: rotate( calc(1turn + 28deg) );
background: hsl(100, calc(3 * 20%), 40%);
font-size: calc(50vw / 3);
}На практике очень часто можно увидеть использование этого свойства для адаптации размеров текста под разные устройства:
html {
font-size: calc(100vw / 30);
}Наиболее частое использование свойства calc() можно увидеть при разработке какой-либо сетки. К примеру, вместо
.foo {
width: 16.666666667%;
}можно написать:
.foo {
width: calc(100% / 6);
}что будет считаться хорошим тоном в верстке. Кроме того, для крупной сетки Вам не придется высчитывать в голове размер каждого столбца.
Что касается поддержки браузерами - тут всё чётенько. Идём на caniuse, и видим:
На этом всё :)