The Future of CSS 253
Adaptation Module (http://www.w3.org/TR/css-device-adapt/) attempts to
address these interoperability problems by translating the viewport meta
tag properties into native CSS, and documenting and standardizing fea-
tures as well as adding new ones.
The Device Adaptation Module reimplements the viewport meta tag
with a new at-rule, @viewport:
@viewport {...}
The @viewport rule accepts numerous property-value pairs or viewport
descriptors, which set the parameters of the viewport. Some of these descrip-
tors are existing CSS properties, whereas others are unique to @viewport.
In many cases, these descriptors are not the same as the arguments used
in the viewport meta tag, but they perform the same role. For example, to
set the width equal to the device width in the meta tag, you write this:
<meta name="viewport" content="width=device-width">
To perform the same operation with the @viewport rule, you use the
width property, with a value of 100vw—the full viewport width (the vw unit
was discussed in Chapter 16):
@viewport {
width: 100vw;
}
The best part of the @viewport rule is you can combine it with media
queries, creating custom viewports for different device configurations. For
example, you can set the width equal to the device width only on small
screens:
@media (max-width: 480px) {
@viewport {
width: 100vw;
}
}
As of this writing, the @viewport rule is implemented in Internet
Explorer 10 and 11 as the @-ms-viewport rule. It’s also implemented in
Chrome, although not currently enabled by default.
Sticky Positioning
A fairly common web design pattern is to make elements sticky so they stick
to the top or bottom of the viewport as the page is scrolled. Stickiness has
usually been accomplished by setting the fixed value on the position prop-
erty using scroll events in JavaScript, but CSS3’s Positioned Layout Module
(http://dev.w3.org/csswg/css-position-3/) introduces a native sticky value for
the position property to do the same thing.
