4 Dynamic CSS with calculations and variables

4.1Performing calculations with calc( )

CSS can perform calculations! By using calc( ) to assign values to attributes such as width, margin or padding, you can calculate the browser’s length specifications dynamically — depending on the window’s width, for instance. This function is already operational since IE 9 (stable from version 10), Edge 12, Firefox 4 (Starting with version 16 without vendor prefix), Chrome 19 (26), Safari 6 (6.1), and Opera 15.

calc( ) supports the four basic arithmetic operations of addition (+), subtraction (–), multiplication (*), and division (/). It always makes sense to use it if you want to offset values with different units of measurement against each other, e.g.

Using a vendor prefix:

There must be spaces before and after the operators!

Here are two examples.

Let us first take a look in the file calc_examples.html at the two blue boxes (labeled “A”):

The HTML code is as follows:

The boxes were placed side by side in CSS using the traditional method of float:left (class .left) or float:right (class .right). There is now the following problem with this. The right box has a fixed width of 300px. The left box should be given a variable width that is scaled proportionally with the browser window. It should also leave a small gap between it and the right box. We cannot proceed any further in this case using simple percentages for the width ; we need to perform a calculation. The width of the left box is determined using the following calculation:

Width of browser window - width of right box - desired gap

This appears as follows in CSS:

We can use a similar method to center the red box labeled “B” vertically (class .center). It has, among others, the following CSS properties:

As a result of this, it is already centered horizontally in the browser window. All that remains is to center it vertically. This is determined using the following calculation:

Half height of the browser window - half height of the red box:

or

or

As usual, multiplication and division calculations are carried out before addition and subtraction calculations. Write the calculation in a way that you will still understand it even in a couple of months’ time. In the last example it is perhaps not immediately obvious what the 10rem relates to.

We are now going to look at a more complex example.

Exercise 9: Heading With Ribbon

Design the heading for the box in the file calc_ribbon.html as a ribbon.

The HTML code is as follows:

<div class="box"> <h1 class="box_heading"> <span>This Is An Important Heading</span> </h1> ... </div>

The ribbon is integrated in the traditional manner as a background image (pixel graphic), but should still adjust to the width of the browser window and to the document’s font size (unit of measurement rem instead of px). The trick with this is that we are dealing with two separate graphics. One of them only contains the ribbon’s right “fringe”. The left graphic contains the rest of the ribbon and is at least as wide as the maximum width you want for the box:

1. Assign the graphic ribbon_right.png to the heading .box_heading and the graphic ribbon_left.png to the span element contained in it as a background image As a result, both graphics will be “telescoped” into each other when increasing and reducing the browser window, with the ribbon being scaled with it. You should also think about the properties background-repeat, background-position and background-size.

2. Adjust the padding of the heading and span element accordingly. The heading’s padding-right must be as wide as the right pixel graphic (22px = 1.375rem). We set the padding-left of the span element to 1.8rem.

   

   
   

   

3. Test the result in the browser by changing the window size. Increase also the font-size in the html selector, e.g. to 200%. The graphic should also adjust to the modified font size.

4. The next step involves the ribbon extending beyond the edges of the box on the left and right. This will be by 1.8rem on the left side and exactly by the width of the right background graphic on the right side.

   

   We can adjust the left side by adding a negative margin to the heading:

   .box_heading { /* other properties */ margin: 0 0 1rem -1.8rem; }

5. The ribbon should now extend beyond the box on the left. We can influence the right side by adjusting the width in the selector for the heading. Which values do you need to add? Insert the relevant calc value.

Done