calc

  • Revision slug: CSS/calc
  • Revision title: calc
  • Revision id: 36398
  • Created:
  • Creator: Jürgen Jeka
  • Is current revision? No
  • Comment It's unimplemented in WebKit and if so, they might do it unprefixed (Don't cross your bridges before you come to them); 19 words removed

Revision Content

{{ CSSRef() }}

{{ SeeCompatTable() }}

Summary

The calc() CSS function can be used anywhere a {{ Xref_csslength() }} is required. With calc(), you can perform calculations to determine the size and shape of objects.

Syntax

 <a_css_property>: -vendor-calc(expression)

Values

expression
A mathematical expression, the result of which is used as the {{ Xref_csslength() }}.

Expressions

The expression can be any simple expression combining the following operators:

+
Addition
-
Subtraction
*
Multiplication
/
Division. You can't divide by a length; instead, this is used to, for example, say that you want your resulting length to be a given fraction of an existing length.
mod {{ unimplemented_inline() }}
Modulo; this returns the remainder left over after dividing two values.

The operands in the expression may be any length syntax value. You can use different units for each value in your expression, if you wish. You may also use parentheses to establish computation order when needed.

Note: Division by zero results in an error being generated by the HTML parser.
Note: operators should always be surrounded by whitespaces. The operand of calc(50 -8px) for instance will be parsed as a percentage followed by a negative length, an invalid expression, while the operand of calc(50% - 8px) is a percentage followed by a minus sign and a length.

Examples

Positioning an object on screen with a margin

calc() makes it easy to position an object with a set margin. In this example, the CSS creates a banner that stretches across the window, with a 40-pixel gap between both sides of the banner and the edges of the window:

.banner {
  position:absolute;
  left: 40px;
  width: -moz-calc(100% - 80px);
  width: -webkit-calc(100% - 80px);
  width: calc(100% - 80px);
  border: solid black 1px;
  box-shadow: 1px 2px;
  background-color: yellow;
  padding: 6px;
  text-align: center;
}

{{ CSSLiveSample("-moz-calc1.html") }}

Automatically sizing form fields to fit their container

Another use case for calc() is to help ensure that form fields fit in the available space, without extruding past the edge of their container, while maintaining an appropriate margin.

Let's look at some CSS:

input {
  padding: 2px;
  display: block;
  width: -moz-calc(100% - 1em);
  width: -webkit-calc(100% - 1em);
  width: calc(100% - 1em);
}

#formbox {
  width: -moz-calc(100%/6);
  width: -webkit-calc(100%/6);
  width: calc(100%/6);
  border: 1px solid black;
  padding: 4px;
}

Here, the form itself is established to use 1/6 of the available window width. Then, to ensure that input fields retain an appropriate size, we use calc() again to establish that they should be the width of their container minus 1em. Then, the following HTML makes use of this CSS:

<form>
  <div id="formbox">
  <label>Type something:</label>
  <input type="text">
  </div>
</form>

{{ CSSLiveSample("-moz-calc2.html") }}

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support - (crbug.com/69487) {{ CompatGeckoDesktop("2") }} 9 - - ({{ Webkitbug("16662") }})
Method

-

-moz-calc() {{ property_prefix("-moz") }} calc() -

-

Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support {{ CompatUnknown() }} {{ CompatVersionUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

Specifications

Specification Status Comment
CSS Values and Units Level 3 {{ Spec2('CSS3 Values') }}  

Revision Source

<p>{{ CSSRef() }}</p>
<p>{{ SeeCompatTable() }}</p>
<h3>Summary</h3>
<p>The <code>calc()</code> CSS function can be used anywhere a {{ Xref_csslength() }} is required. With <code>calc()</code>, you can perform calculations to determine the size and shape of objects.</p>
<h3>Syntax</h3>
<pre> &lt;a_css_property&gt;: -<em>vendor</em>-calc(<em>expression</em>)
</pre>
<h3>Values</h3>
<dl> <dt>expression</dt> <dd>A mathematical expression, the result of which is used as the {{ Xref_csslength() }}.</dd>
</dl>
<h3>Expressions</h3>
<p>The expression can be any simple expression combining the following operators:</p>
<dl> <dt>+</dt> <dd>Addition</dd> <dt>-</dt> <dd>Subtraction</dd> <dt>*</dt> <dd>Multiplication</dd> <dt>/</dt> <dd>Division. You can't divide by a length; instead, this is used to, for example, say that you want your resulting length to be a given fraction of an existing length.</dd> <dt>mod {{ unimplemented_inline() }}</dt> <dd>Modulo; this returns the remainder left over after dividing two values.</dd>
</dl>
<p>The operands in the expression may be any length syntax value. You can use different units for each value in your expression, if you wish. You may also use parentheses to establish computation order when needed.</p>
<div class="note"><strong>Note:</strong> Division by zero results in an error being generated by the HTML parser.</div>
<div class="note"><strong>Note:</strong> operators should always be surrounded by whitespaces. The operand of calc(50 -8px) for instance will be parsed as a percentage followed by a negative length, an invalid expression, while the operand of calc(50% - 8px) is a percentage followed by a minus sign and a length.</div>
<dl>
</dl>
<h3>Examples</h3>
<h4>Positioning an object on screen with a margin</h4>
<p><code>calc()</code> makes it easy to position an object with a set margin. In this example, the CSS creates a banner that stretches across the window, with a 40-pixel gap between both sides of the banner and the edges of the window:</p>
<pre class="brush: css">.banner {
  position:absolute;
  left: 40px;
  width: -moz-calc(100% - 80px);
  width: -webkit-calc(100% - 80px);
  width: calc(100% - 80px);
  border: solid black 1px;
  box-shadow: 1px 2px;
  background-color: yellow;
  padding: 6px;
  text-align: center;
}
</pre>
<p>{{ CSSLiveSample("-moz-calc1.html") }}</p>
<h4>Automatically sizing form fields to fit their container</h4>
<p>Another use case for <code>calc()</code> is to help ensure that form fields fit in the available space, without extruding past the edge of their container, while maintaining an appropriate margin.</p>
<p>Let's look at some CSS:</p>
<pre class="brush: css">input {
  padding: 2px;
  display: block;
  width: -moz-calc(100% - 1em);
  width: -webkit-calc(100% - 1em);
  width: calc(100% - 1em);
}

#formbox {
  width: -moz-calc(100%/6);
  width: -webkit-calc(100%/6);
  width: calc(100%/6);
  border: 1px solid black;
  padding: 4px;
}
</pre>
<p>Here, the form itself is established to use 1/6 of the available window width. Then, to ensure that input fields retain an appropriate size, we use <code>calc()</code> again to establish that they should be the width of their container minus 1em. Then, the following HTML makes use of this CSS:</p>
<pre class="brush: html">&lt;form&gt;
  &lt;div id="formbox"&gt;
  &lt;label&gt;Type something:&lt;/label&gt;
  &lt;input type="text"&gt;
  &lt;/div&gt;
&lt;/form&gt;
</pre>
<p>{{ CSSLiveSample("-moz-calc2.html") }}</p>
<h2>Browser compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop"> <table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Chrome</th> <th>Firefox (Gecko)</th> <th>Internet Explorer</th> <th>Opera</th> <th>Safari (WebKit)</th> </tr> <tr> <td>Basic support</td> <td>- (<a class="external" href="http://crbug.com/69487" title="http://crbug.com/69487">crbug.com/69487</a>)</td> <td>{{ CompatGeckoDesktop("2") }}</td> <td>9</td> <td>-</td> <td>- ({{ Webkitbug("16662") }})</td> </tr> <tr> <td>Method</td> <td> <p><code>- </code></p> </td> <td><code>-moz-calc()</code> {{ property_prefix("-moz") }}</td> <td><code>calc()</code></td> <td>-</td> <td> <p><code>- </code></p> </td> </tr> </tbody> </table>
</div>
<div id="compat-mobile"> <table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Android</th> <th>Firefox Mobile (Gecko)</th> <th>IE Phone</th> <th>Opera Mobile</th> <th>Safari Mobile</th> </tr> <tr> <td>Basic support</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatVersionUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> </tr> </tbody> </table>
</div>
<h3 name="Specifications">Specifications</h3>
<table border="1" cellpadding="1" cellspacing="1" style="width: 1053px; border-style: solid; border-width: 1px; height: 75px; border-color: rgb(0,0,0);"> <thead> <tr style="background-color: rgb(255, 204, 255);"> <th scope="col">Specification</th> <th scope="col">Status</th> <th scope="col">Comment</th> </tr> </thead> <tbody> <tr> <td><a class="external" href="http://www.w3.org/TR/css3-values/#calc" title="http://www.w3.org/TR/css3-values/#calc">CSS Values and Units Level 3</a></td> <td>{{ Spec2('CSS3 Values') }}</td> <td> </td> </tr> </tbody>
</table>
Revert to this revision