mozilla

Revision 36386 of calc

  • Revision slug: CSS/calc
  • Revision title: calc
  • Revision id: 36386
  • Created:
  • Creator: Sheppy
  • Is current revision? No
  • Comment add first example; 121 words added, 1 words removed

Revision Content

{{ CSSMozExtensionRef() }}

Summary

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

Syntax

 <a_css_property>: -moz-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
mod {{ unsupported_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.

Examples

Positioning an object on screen with a margin

-moz-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);
  border: solid black 1px;
  box-shadow: 1px 2px;
  background-color: yellow;
  padding: 6px;
  text-align:center;
}

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

Browser compatibility

Browser Lowest version
Internet Explorer -
Firefox (Gecko) 4.0 (2.0)
Opera -
Safari (WebKit) -

Specifications

Revision Source

<p>{{ CSSMozExtensionRef() }}</p>
<h3>Summary</h3>
<p>The <code>-moz-calc()</code> CSS function can be used anywhere a {{ Xref_csslength() }} is required. With <code>-moz-calc()</code>, you can perform calculations to determine the size and shape of objects.</p>
<h3>Syntax</h3>
<pre> &lt;a_css_property&gt;: -moz-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</dd> <dt>mod {{ unsupported_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.</p>
<dl> <h3>Examples</h3> <h4>Positioning an object on screen with a margin</h4> <p>-moz-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:</p> <pre class="brush: css">.banner {
  position:absolute;
  left: 40px;
  width: -moz-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> <h3>Browser compatibility</h3> <table class="standard-table"> <tbody> <tr> <th>Browser</th> <th>Lowest version</th> </tr> <tr> <td>Internet Explorer</td> <td>-</td> </tr> <tr> <td>Firefox (Gecko)</td> <td>4.0 (2.0)</td> </tr> <tr> <td>Opera</td> <td>-</td> </tr> <tr> <td>Safari (WebKit)</td> <td>-</td> </tr> </tbody> </table> <h3>Specifications</h3> <ul> <li><a class="external" href="http://www.w3.org/TR/css3-values/#calc" title="http://www.w3.org/TR/css3-values/#calc">CSS 3 Values and units</a></li> </ul> </dl>
Revert to this revision