calc

< css‎ | functions
Jump to: navigation, search

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

View live example

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