July 12, 2015 4:14 pm

Useful HTML5 Features, Part 3

CSS calc() the calc property can be used as a value to other CSS properties such as width, height and top. It allows you to perform calculations with the measure units in CSS – such as pixels, ems and percentages.
Useful HTML5 Features

Browser support

The calc property has decent support with 81.52% of used browsers worldwide supporting it.

  1. IE9 – Partial support
  2. IE10+ – Full support
  3. Firefox 31+
  4. Chrome 31+
  5. Safari 7+
  6. Opera 29+

For more details on the browser support, visit Can I Use.

The calc property can be useful for many sizing purposes so you would not have to calculate top,left,right,bottom offsets or widths and heights manually.

We will show you a simple example to illustrate the property. What we do can easily be achieved without calc but it serves as an illustration.

<div style="clear: both;">
    <div class="box1"></div>
    <div class="box2"></div>
</div>

We add two boxes in terms of markup.

Then, we set their width to be equal to 50%. However, if we directly set the width to 50% for both and add margins and borders to them – there will not be enough space on the row for the second box and it will move to the next line. This is why we add calc and subtract from 50% the margin and the border for that particular box.

For the first element, we have a 1em margin but the margin comes on the left side and on the right side of the element as well so we have to subtract 2em. The same is valid for the border which takes the space of 1 pixel on the left side and one on the right side.

.box1 {
          float: left;
            background-color: crimson;
            border: 1px solid darkred;
            width: calc(50% - 2em - 2px);
            margin: 1em;
            height: 40px;
            padding: 0;

        }

        .box2 {
           float: left;
            background-color: darkred;
            border: 2px solid crimson;
            width: calc(50% - 2em - 4px );
            margin: 1em;
            height: 40px;
            padding: 0;

        }

Now, our elements take all of the space that our margin has made available for them.

boxes

Box-sizing

You can start using the box-sizing property without fallbacks. It has 96.99% global supported (according to Can I Use) so I would not be mentioning the browsers that support it.

The property has two keywords of notice: content-box and border-box.

Content-box is the default set for the width and height properties when you write CSS. This means that when you add a width to an element – this width would be taken only by the content of the element itself. Any padding, margin or border that you add will have separate widths. Thus, if you add two elements with 50% width and add either a padding, margin or a border then they would not be placed on the same horizontal row.

A fix for that is setting the box-sizing to border-box. This would include the padding and border to the width that you set so you would only have to include the margin when making calculations on how to position the elements horizontally.

Below is an example of how we take advantage of box-sizing and calc:

.box3 {
            float: left;
            box-sizing: border-box;
            width: calc(50% - 1em);
            margin: 0.5em;
            padding: 2.5em;
            border: 1px solid springgreen;
            background-color: lime;

        }
        .box4 {
            float: left;

            box-sizing: border-box;
            width: calc(50% - 1em);
            margin: 0.5em;
            padding: 4em;
            border: 2px solid springgreen;
            background-color: lime;

        }

We only subtract the margins from the width and any padding and border we add to the element will be added by subtracting from its content area.
The result is two boxes that take all the space available to them.

boxes2

The box-sizing property is one that you should start using today, if not already. About the calc property – it would be best to rely on CSS preprocessors such as Less and Sass for now as they possess many more benefits than an implementation of calculating measurement units.

Author Ivan Dimov

Ivan is a student of IT, a freelance web designer/developer and a tech writer. He deals with both front-end and back-end stuff. Whenever he is not in front of an Internet-enabled device he is probably reading a book or traveling. You can find more about him at: http://www.dimoff.biz. facebook, twitter


Tutorial Categories:

Leave a Reply

Your email address will not be published. Required fields are marked *