202 Chapter 16
Internet Explorer 9 implemented vmin as the vm unit, but neither it nor
IE10 supports vmax (support was added in IE11). Many older smartphone
browsers don’t support these properties, although newer versions (such as
iOS 6.0 and Android 4.4 and above) do (though often without support for
vmax, most notably in iOS as of this writing).Calculated Values
One of the biggest changes in CSS3 lies in the way that lengths can be
declared. In CSS2.1, lengths are always a single value plus a unit, and if cal-
culations are required (say, subtracting the width of a border from a total
width), the developer has to do the calculation. But in CSS3, the browser
performs the calculations.
CSS calculations are performed with the calc() function. You can use
this function anywhere you use the common value units—length, angle,
number, and so on. It takes as an argument any mathematical expression
using those common value units and four basic operands: + (addition),- (subtraction), * (multiplication), and / (division).
The calc() function is especially useful when mixing units. For example,
you could create an expression to calculate the width of an element (as a
percentage) minus its border (as an em) like this:
E {
border: 10px;
width: calc(75% - 2em);
}Addition and subtraction can be performed with any units, but when
using multiplication, at least one argument on either side of the operand
must be a unitless number. In the case of division, the argument after the
operand must be a unitless number. Here are examples of how to perform
both multiplication and division:E {
left: calc(5 * 10em);
width: (80% / 4);
}You can use parentheses in expressions to show computational order.
For example, the following code shows an expression that performs three
calculations:E { height: calc(10% * 5 + 15% * 2); }