Compare Revisions

calc

Change Revisions

Revision 36392:

Revision 36392 by teoli on

Revision 36393:

Revision 36393 by Glazou on

Title:
calc
calc
Slug:
CSS/calc
CSS/calc
Tags:
css, "CSS Reference"
css, "CSS Reference"
Content:

Revision 36392
Revision 36393
nn77    <div class="note">
78      <strong>Note:</strong> operators should always be surrounde
 >d by whitespaces. The operand of -moz-calc(50 -8px) for instance 
 >will be parsed as a percentage followed by a negative length, an 
 >invalid expression, while the operand of -moz-calc(50% - 8px) is 
 >a percentage followed by a minus sign and a length.
77    <dl>79    </div>
78      <dd>
79        <h3>80    <h3>
80          Examples81      Examples
81        </h3>82    </h3>
82        <h4>83    <h4>
83          Positioning an object on screen with a margin84      Positioning an object on screen with a margin
84        </h4>85    </h4>
85        <p>86    <p>
86          <code>-moz-calc()</code> makes it easy to position an o87      <code>-moz-calc()</code> makes it easy to position an objec
>bject with a set margin. In this example, the CSS creates a banne>t with a set margin. In this example, the CSS creates a banner th
>r that stretches across the window, with a 40-pixel gap between b>at stretches across the window, with a 40-pixel gap between both 
>oth sides of the banner and the edges of the window:>sides of the banner and the edges of the window:
87        </p>88    </p>
88        <pre class="brush: css">89    <pre class="brush: css">
n100        <p>n101    <p>
101          {{ CSSLiveSample("-moz-calc1.html") }}102      {{ CSSLiveSample("-moz-calc1.html") }}
102        </p>103    </p>
103        <h4>104    <h4>
104          Automatically sizing form fields to fit their container105      Automatically sizing form fields to fit their container
105        </h4>106    </h4>
106        <p>107    <p>
107          Another use case for <code>-moz-calc()</code> is to hel108      Another use case for <code>-moz-calc()</code> is to help en
>p ensure that form fields fit in the available space, without ext>sure that form fields fit in the available space, without extrudi
>ruding past the edge of their container, while maintaining an app>ng past the edge of their container, while maintaining an appropr
>ropriate margin.>iate margin.
108        </p>109    </p>
109        <p>110    <p>
110          Let's look at some CSS:111      Let's look at some CSS:
111        </p>112    </p>
112        <pre class="brush: css">113    <pre class="brush: css">
n125        <p>n126    <p>
126          Here, the form itself is established to use 1/6 of the 127      Here, the form itself is established to use 1/6 of the avai
>available window width. Then, to ensure that input fields retain >lable window width. Then, to ensure that input fields retain an a
>an appropriate size, we use <code>-moz-calc()</code> again to est>ppropriate size, we use <code>-moz-calc()</code> again to establi
>ablish that they should be the width of their container minus 1em>sh that they should be the width of their container minus 1em. Th
>. Then, the following HTML&nbsp;makes use of this CSS:>en, the following HTML&nbsp;makes use of this CSS:
127        </p>128    </p>
128        <pre class="brush: html">129    <pre class="brush: html">
t136        <p>t137    <p>
137          {{ CSSLiveSample("-moz-calc2.html") }}138      {{ CSSLiveSample("-moz-calc2.html") }}
138        </p>139    </p>
139        <h3>140    <h3>
140          Browser compatibility141      Browser compatibility
141        </h3>142    </h3>
142        <table class="standard-table">143    <table class="standard-table">
143          <tbody>144      <tbody>
144            <tr>145        <tr>
145              <th>146          <th>
146                Browser147            Browser
147              </th>148          </th>
148              <th>149          <th>
149                Lowest version150            Lowest version
150              </th>151          </th>
151            </tr>152        </tr>
152            <tr>153        <tr>
153              <td>154          <td>
154                Internet Explorer155            Internet Explorer
155              </td>156          </td>
156              <td>157          <td>
157                9.0158            9.0
158              </td>159          </td>
159            </tr>160        </tr>
160            <tr>161        <tr>
161              <td>162          <td>
162                Firefox (Gecko)163            Firefox (Gecko)
163              </td>164          </td>
164              <td>165          <td>
165                4.0 (2.0)166            4.0 (2.0)
166              </td>167          </td>
167            </tr>168        </tr>
168            <tr>169        <tr>
169              <td>170          <td>
170                Opera171            Opera
171              </td>172          </td>
172              <td>173          <td>
173                -174            -
174              </td>175          </td>
175            </tr>176        </tr>
176            <tr>177        <tr>
177              <td>178          <td>
178                Safari (WebKit)179            Safari (WebKit)
179              </td>
180              <td>
181                -
182              </td>
183            </tr>
184          </tbody>180          </td>
181          <td>
182            -
183          </td>
184        </tr>
185      </tbody>
185        </table>186    </table>
186        <h3 name="Specifications">187    <h3 name="Specifications">
187          Specifications188      Specifications
188        </h3>189    </h3>
189        <table border="1" cellpadding="1" cellspacing="1" style="190    <table border="1" cellpadding="1" cellspacing="1" style="widt
>width: 1053px; border-style: solid; border-width: 1px; height: 75>h: 1053px; border-style: solid; border-width: 1px; height: 75px; 
>px; border-color: rgb(0,0,0);">>border-color: rgb(0,0,0);">
190          <thead>191      <thead>
191            <tr style="background-color: rgb(255, 204, 255);">192        <tr style="background-color: rgb(255, 204, 255);">
192              <th scope="col">193          <th scope="col">
193                Specification194            Specification
194              </th>195          </th>
195              <th scope="col">196          <th scope="col">
196                Status197            Status
197              </th>198          </th>
198              <th scope="col">199          <th scope="col">
199                Comment200            Comment
200              </th>
201            </tr>
202          </thead>201          </th>
202        </tr>
203      </thead>
204      <tbody>
205        <tr>
203          <tbody>206          <td>
204            <tr>
205              <td>
206                <a class="external" href="http://www.w3.org/TR/cs207            <a class="external" href="http://www.w3.org/TR/css3-v
>s3-values/#calc" title="http://www.w3.org/TR/css3-values/#calc">C>alues/#calc" title="http://www.w3.org/TR/css3-values/#calc">CSS V
>SS Values and Units Level 3</a>>alues and Units Level 3</a>
207              </td>208          </td>
208              <td>209          <td>
209                {{ Spec2('CSS3 Values') }}210            {{ Spec2('CSS3 Values') }}
210              </td>
211              <td>
212                &nbsp;
213              </td>
214            </tr>
215          </tbody>211          </td>
212          <td>
213            &nbsp;
214          </td>
215        </tr>
216      </tbody>
216        </table>217    </table>
217      </dd>
218    </dl>

Back to History