Css3 calc (), css3calc

Css3 calc (), css3calc
Overview

CSS Functionscalc()Can be used in any need<length>.calc()You can determine the size and shape of an object through calculation.

You can alsoCalc () nested inside anothercalc().

How to read the CSS syntax.

calc(expression)

Value

Expression

A mathematical expression. The result of this expression is used as the final <length>.

Expression

In this expression, you can use the following operators to connect to any simple expression:

+

Addition

-

Subtraction

*

Multiplication

/

Division.

The operands in the expression can use any length syntax. if you want to, you can mix multiple different length units in an expression. you can use parentheses to adjust the computing sequence as needed.

This example uses the specified margin to locate an object.

With calc (), you can easily set an equal margin between the left and right sides for an object.In this example, a banner that spans the entire window is created using CSS. The left and right sides of the banner have a 40-pixel distance from the edge of the window:

.banner {   position:absolute;   left: 40px;   width: 90%;                       /* fallback for browsers without support for calc() */   width: -webkit-calc(100% - 80px);  /* WebKit 536.3 (Chrome 19) and above, experimental */   width:         calc(100% - 80px);  /* final CSS3 compliant implementation; Firefox 16 and IE 9, and above */   border: solid black 1px;   box-shadow: 1px 2px;   background-color: yellow;   padding: 6px;   text-align: center; }

<div class="banner">This is a banner!</div>

 

 

Automatically adjust the size of the form field to adapt to the container size

Another use case of calc () is used to ensure that the size of a form field is suitable for the current available space.Instead of retaining the appropriate margin, because the squeeze exceeds the edge of the container.

 

Look at the CSS below the example:

input {   padding: 2px;   display: block;   width:  98%;                      /* fallback for browsers without support for calc() */   width: -webkit-calc(100% - 1em);  /* WebKit 536.3 (Chrome 19) and above, experimental */   width:         calc(100% - 1em);  /* final CSS3 compliant implementation; IE 9 and above */ }  #formbox {   width:  130px;                 /* fallback for browsers without support for calc() */   width:    -moz-calc(100% / 6);   /* Gecko 2.0 (Firefox 4) and above, experimental, will be dropped */   width: -webkit-calc(100% / 6);   /* WebKit 536.3 (Chrome 19) and above, experimental */   width:         calc(100% / 6);   /* final CSS3 compliant implementation; Firefox 16 and IE 9, and above */   border: 1px solid black;   padding: 4px; }

In this example, the form Element uses 1/6 of the available window width. Then, we useCalc (), so that its width is reduced by 1em for its container width. The following HTML uses the above CSS:

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

Browser compatibility

• Desktop
 
• Mobile

Feature	Android	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic support	?	4.0 (2)-moz 16.0 (16)	?	?	?
On gradients 'color stops	?	19.0 (19)	?	?	?

 

• Desktop
 
• Mobile

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Basic support	19 (WebKit 536.3)-webkit	4.0 (2)-moz 16 (16)	9	-	6-webkit (buggy)
On gradients 'color stops	19 (WebKit 536.3)-webkit	19 (19)	9	-	6-webkit (buggy)

Related Links

• Firefox 4: CSS3 calc () using Mozilla Hacks-the Web developer blog