Show Buttons
Share On Facebook
Share On Twitter
Share On Google Plus
Share On Linkdin
Share On Reddit
Share On Stumbleupon
Contact us
Hide Buttons

Using css3 calc in an attribute value to compute its value at runtime

css3_calc_example

The CSS calc value in css is rel­a­tively new but pretty powerful.The calc value lets you do two impor­tant things

  • Per­form com­pu­ta­tion across units.
  • Com­pute dimen­tions at runtime.

The calc attribute value can be used any­where a length, frequency, angle, time, number, or integer value is required.

Before you adopt it in your appli­ca­tion, make sure its browser com­pat­i­bil­ity matches your busi­ness requirements.


Basic exam­ple

Con­sider the fol­low­ing snippet

<div class="outer">
  <div class="inner"></div>
</div>

And the fol­low­ing snip­pet of CSS

.outer {
  width: 500px;
  height: 100px;
  background: #dadada;
}

.inner {
  width: calc(100% - 40px);
  height: 50px;
  margin: auto;
  border: 1px solid blue;
}

Instead of spec­i­fy­ing width directly, we can now com­pute the width on the fly depend­ing upon the ren­dered width of the par­ent. Ther­fore in this case, the inner div has a width which is 40px less than width of the outer div. And we were able to neatly cen­ter align it using a mar­gin of auto.

Here’s the Jsfid­dle of the above code.


Cre­at­ing a chrono­log­i­cal timeline

I have always wanted to cre­ate a time­line with con­nec­tors. Until now, this wasnt pos­si­ble with­out doing hacks. But the new calc prop­erty makes is so much simpler.

Con­sider this html structure

<div class="chronology">
    <div class="event">
        <div class="connector"></div>
        <div class="event-details">
            <div class="col-1">
                <div class="baloon">1965</div>
            </div>
            <div class="col-2">
                <div class="headline">Touch screen technology was invented by E.A. Johnson</div>
            </div>
        </div>
    </div>
</div>

Our chronol­ogy con­tainer can con­tain sev­eral chrono­log­i­cal events. Each event has a con­nec­tor, and two columns. The first colum holds the bal­lon with the date of the event and the sec­ond col­umn holds the descrip­tion of the event.

Here’s the css that will make this work

.chronology {
    margin: 20px;
}
.event {
    float: left;
    position: relative;
    padding-bottom: 20px;
}
.baloon {
    border-radius: 50%;
    color: #768696;
    height: 42px;
    width: 42px;
    text-align: center;
    font-size: 15px;
    margin: 0 30px;
    line-height: 2.6em;
    font-weight: bold;
    border: 2px solid #8A97ED;
    box-sizing: border-box;
}
.connector {
    position: absolute;
    left: 51px;
    top: 42px;
    width: 2px;
    height: calc(100% - 42px);
    background-color: #8A97ED;
}
.event-details {
    display: block;
}
[class|="col"] {
    box-sizing: border-box;
    float: left;
    margin-left: 0;
}
.col-2 {
    width: 270px;
    position: relative;
}
.headline {
    width: 250px;
}

The most impor­tant thing in this exam­ple was the con­nec­tor. We needed to sub­tract the height of the baloon from the con­nec­tor and posi­tion it at just below the baloon so that it extends till the end of the par­ent event.

Check out this Jsfid­dle Demo for the above code.

For the curi­ous among you, here’s the full list of the events that I was try­ing to map into this visualization.

Ryan Sukale

Ryan is a UX engineer living in San Francisco, California.