calc
calc
This page has been flagged with the following issues:
High-level issues:
W3C Candidate Recommendation
Summary
The calc() function can be used anywhere in a length is required by a CSS properties. calc() allows mathematical expressions with addition (‘+’), subtraction (‘-’), multiplication (‘*’), and division (‘/’) to be used as component values.
Examples
CSS
.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;
margin-top: 40px;
padding: 10px;
text-align: center;
}
Notes
Division by zero will cause an error in the HTML parser.
Related specifications
| Specification | Status | Related Changes |
|---|---|---|
| W3C CSS Values and Units Module Level 3 | Candidate Reccomendation |
Compatibility
Desktop
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Basic Support | 26 22 -webkit |
16 4 -moz |
9 | Unsupported |
6 -webkit
|
Mobile
| Feature | Android | BlackBerry | Chrome for mobile | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Opera Mini | Safari Mobile |
|---|---|---|---|---|---|---|---|---|
| Basic Support | Unsupported | 10.0 -webkit |
26 25 -webkit |
Supported (when?) Supported (when?) -moz |
? | Unsupported | Unsupported | 6 -webkit
|
This tool helps to make and review comments inline.
How to Use
insert instructions, with images, here