CSS Zoom Module Level 1

1. Introduction

This section is not normative.

This specification defines features that allows zooming of elements and their content. Through zoom authors can magnify or reduce the size of rendered elements. Unlike the transform property, zoom does have an effect over the layout inside and around the element’s box.

2. Controling Zoom

An element becomes zoomed when the zoom property has a positive computed value different than 1. Zoom affects computed property values. The computed value of zoom is applied as a scalar to all <length> property values resulting in a magnification or minificaiton effect. Unlike transform scaling the zoom property affects layout.

Nested values of zoom accumulate resulting in additinal scaling of <length> values.

The zoom property has no effect to <length> property values with computed value is auto or <percent>.

The computed value of font-size is never <percent> thus zoom always applies.

zoom does not affect or prevent transform scaling.

There is no real reason why <percent> values shouldn’t be affected by zoom, however this is dictated by current interop behavior. To achieve this the zoom should <percent> values should be scaled only by the zoom value specified on the the element itself and not the accumulated value.

2.1. The zoom property

The values of this property have the following meanings:

number

Positive floating point number indicating a zoom factor. Numbers smaller than 1.0 indicate a "zoom out" or minification effect, while numbers greater than 1.0 indicate a "zoom in" or magnification effect.

percent

Positive floating point number, followed by a percentage character ("%") which indicates a zoom factor. Percent values smaller than 100% indicate a "zoom out" or minification effect, while numbers greater than 100% indicate a "zoom in" or magnification effect.

Negative values for zoom are illegal.

<div class="messageBox">
    <div class="label">Text of the label</div>
</div>

<style type="text/css">
.messageBox {
    width: 10em;
    padding: 2em;
    border: medium solid lightblue;
}

.messageBox:hover {
    zoom: 150%;
}

.label {
    background: lightgrey;
    padding: 1em;
    text-align: center;
}
</style>