Home / Articles / Programming languages / Markup languages / HTML & CSS / Great features for responsive web design using calc in CSS3

Great features for responsive web design using calc in CSS3

Great features for responsive web design using calc in CSS3
 
Great features for responsive web design using calc in CSS3
  • Currently 0 out of 5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Rating: 0/5 (0 votes cast)

Thank you for rating!

You have already rated this page, you can only rate it once!

Your rating has been changed, thanks for rating!

Log in or create a user account to rate this page.


calc is a fairly new but still very rarely used feature in CSS3. It allows you to perform simple arithmetic operations directly in style descriptions using all sorts of units. It is very convenient way to calculate size, position, transformations, and even color elements.

Syntax of CSS calc

property: calc(expression);

An expression is a combination of dimension values and symbols of mathematical operations, see below:

  • + addition (width: calc(15px + 15px););
  • - subtraction (padding: calc(20% - 15px););
  • * multiplication (height: calc(30%*3););
  • / division, but you can't divide by zero (width: calc(100%/5);).

Signs of addition and subtraction must have extra spaces on both sides.

All calculations are carried out in compliance with the standard rules of operator priority order.

To understand the syntax let's consider the following examples:

width: calc(60% / 3); 
width: calc(45% - 3em); 
width: calc(100% / 5 - 2 * 2em - 3 * 5px);
margin: calc(1rem - 3px) calc(1rem - 3px);
background-position: calc(60% + 15px) calc(60% + 15px), 40% 40%;

Browser support and prefixes

calc is currently supported by all desktop browsers, including IE9, but except Opera up to version 15 (so be patient).

  • Firefox up to version 16 supports value -moz-calc.
  • Chrome up to version 26 supports value -webkit-calc.
  • Safari version 6 supports value -webkit-calc.

Example of cross-browser styles using vendor prefixes:

width: -webkit-calc(45% - 120px);
width: -moz-calc(45% - 120px);
width: calc(45% - 120px);

How CSS calc can make life easier when creating layout?

Creating layout for any web applications always starts with setting sizes and positions of all major elements. At the same time, depending on the project objectives and design features various combinations of units can be used (%, px, em, rem). calc allows elegantly to solve the problem of combining fixed and "stretchy" blocks, the mutual arrangement of fixed and/or "stretchy" elements, setting sizes without using long endless fractions (for example 14.857142857%) and much more.

The most typical problem in layout, to date, has the following requirements:

  • part of the elements have to be "stretchy", i.e. they are given in percentage of the width or height (usually the main content);
  • part of the elements have to be set with fixed width (depending on the requirements, these may be ad blocks, menus, banners, sidebars, etc.);
  • the distance between the blocks can be fixed (px, em, rem), or relative (%).

Let's look at an example, here we have a layout of 3 columns, the right and left columns have fixed width of 200 pixels, the central one occupies the remaining space. Between the columns there should be a fixed distance of 15 pixels.

Without calc the example below would require extra nested containers, extra margins, paddings, floats and so on. 

And that's how simple things get when using cacl in CSS.

HTML code:

<div class="left-column">Left column</div>
<div class="center-column">Center column</div>
<div class="right-column">Right column</div>

CSS styles:

.center-column {
  width: -webkit-calc(100% - 200px - 200px - 15px - 15px);
  width: -moz-calc(100% - 200px - 200px - 15px - 15px);
  width: calc(100% - 200px - 200px - 15px - 15px);
}

.left-column {
  width: 200px;
  margin-right: 15px;
}

.right-column {
  width: 200px;
  margin-left: 15px;
}

.center-column,
.left-column,
.right-column {
  float: left;
}

Just try to resize the browser window to see what will happen:

Live demo

Neat entry of ugly infinite fractions using CSS calc

Consider a typical example where CSS has to use the ugly pseudo-infinite fractional numbers.

Suppose we have 7 columns (blocks) that need to be arranged in one raw, in such a way that they eventually occupy the entire provided width.

As you may have guessed, the width of each button is 100% / 7 = 14.2857142857%  then CSS styles will look like this:

.column { 
  width: 14.2857142857%; 
}

Using calc in CSS, the same thing can be written in a very clear and neat way:

.column {
  width: calc(100% / 7); 
}

 

Read also

CSS3: media queries

CSS3: media queries

Post comment

basicuse.net
html5_css
106160485398655174790

Quick navigation

General navigation