8000 csswg-drafts/css-device-adapt/Overview.html at ac7acf8f6c2c4b193ac7e1e8734a4f91c115ec4c · w3c/csswg-drafts · GitHub
Skip to content

Overview.html

Latest commit

 

History

History
executable file
·
2344 lines (1786 loc) · 81.5 KB

Overview.html

File metadata and controls

executable file
·
2344 lines (1786 loc) · 81.5 KB
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang=en>
<head profile="http://dublincore.org/documents/2008/08/04/dc-html/ ">
<meta content="text/html;charset=utf-8" http-equiv=Content-Type>
<title>CSS Device Adaptation</title>
<link href="http://purl.org/dc/terms/" rel=schema.dcterms>
<link href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
rel=dcterms.rights>
<meta content="CSS Device Adaptation" name=dcterms.title>
<meta content=text name=dcterms.type>
<meta content=2013-10-11 name=dcterms.date>
<meta content="Rune Lillesveen" name=dcterms.creator>
<meta content="Øyvind Stenhaug" name=dcterms.creator>
<meta content="Florian Rivoal" name=dcterms.creator>
<meta content=W3C name=dcterms.publisher>
<meta content="http://dev.w3.org/csswg/css-device-adapt/"
name=dcterms.identifier>
<link href=default.css rel=stylesheet type="text/css">
<link href="../default.css" rel=stylesheet type="text/css">
<link href="http://www.w3.org/StyleSheets/TR/W3C-ED" rel=stylesheet
type="text/css">
<body class=draft>
<div class=head> <!--begin-logo-->
<p><a href="http://www.w3.org/"><img alt=W3C height=48
src="http://www.w3.org/Icons/w3c_home" width=72></a> <!--end-logo-->
<h1>CSS Device Adaptation</h1>
<h2 class="no-num no-toc">Editor's Draft 11 October 2013</h2>
<dl>
<dt>This version:
<dd>$Date$ (editor's draft)
<!--<dd><a href="http://dev.w3.org/csswg/css-device-adapt/">http://www.w3.org/TR/2013/WD-css-device-adapt-20131011/</a></dd>-->
<dt>Latest version:
<dd><a
href="http://www.w3.org/TR/css-device-adapt/">http://www.w3.org/TR/css-device-adapt/</a>
<dt>Latest editor's draft:
<dd><a
href="http://dev.w3.org/csswg/css3-device-adapt/">http://dev.w3.org/csswg/css-device-adapt/</a>
<dt>Previous version:
<dd><a href="http://www.w3.org/TR/2011/WD-css-device-adapt-20110915/">
http://www.w3.org/TR/2011/WD-css-device-adapt-20110915/</a>
<dt>Issues List:
<dd><a
href="https://www.w3.org/Bugs/Public/buglist.cgi?product=CSS&component=Device%20Adaptation">W3C
Bugzilla</a>
<dt>Feedback:
<dd><a
href="mailto:www-style@w3.org?subject=%5Bcss-device-adapt%5D%20feedback">www-style@w3.org</a>
with subject line “<kbd>[css-device-adapt] <var>… message topic
…</var></kbd>” (<a
href="http://lists.w3.org/Archives/Public/www-style/"
rel=discussion>archives</a>)
<dt>Editors:
<dd><a href="mailto:rune@opera.com">Rune Lillesveen</a> (<a
href="http://www.opera.com/">Opera Software</a>)
<dd><a href="mailto:oyvinds@opera.com">Øyvind Stenhaug</a> (<a
href="http://www.opera.com/">Opera Software</a>)
<dd><a href="mailto:florian@rivoal.net">Florian Rivoal</a> (invited
expert)
<dt>Previous Editors:
<dd><a href="mailto:rbetts@adobe.com">Ryan Betts</a> (<a
href="http://www.adobe.com/">Adobe Systems</a>)
</dl>
<!--begin-copyright-->
<p class=copyright><a
href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
rel=license>Copyright</a> © 2013 <a href="http://www.w3.org/"><abbr
title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a
href="http://www.csail.mit.edu/"><abbr
title="Massachusetts Institute of Technology">MIT</abbr></a>, <a
href="http://www.ercim.eu/"><abbr
title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>,
<a href="http://www.keio.ac.jp/">Keio</a>, <a
href="http://ev.buaa.edu.cn/">Beihang</a>), All Rights Reserved. W3C <a
href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>,
<a
href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>
and <a
href="http://www.w3.org/Consortium/Legal/copyright-documents">document
use</a> rules apply.</p>
<!--end-copyright-->
<hr title="Separator for header">
</div>
<h2 class="no-num no-toc">Abstract</h2>
<p>This specification provides a way for an author to specify, in CSS, the
size, zoom factor, and orientation of the viewport that is used as the
base for the initial containing block.
<h2 class="no-num no-toc">Status of this document</h2>
<!--begin-status-->
<p>This is a public copy of the editors' draft. It is provided for
discussion only and may change at any moment. Its publication here does
not imply endorsement of its contents by W3C. Don't cite this document
other than as work in progress.
<p>The (<a
href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) public
mailing list <a
href="mailto:www-style@w3.org?Subject=%5Bcss-device-adapt%5D%20PUT%20SUBJECT%20HERE">
www-style@w3.org</a> (see <a
href="http://www.w3.org/Mail/Request">instructions</a>) is preferred for
discussion of this specification. When sending e-mail, please put the text
“css-device-adapt” in the subject, preferably like this:
“[<!---->css-device-adapt<!---->] <em>…summary of comment…</em>”
<p>This document was produced by the <a
href="http://www.w3.org/Style/CSS/members">CSS Working Group</a> (part of
the <a href="http://www.w3.org/Style/">Style Activity</a>).
<p>This document was produced by a group operating under the <a
href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 February
2004 W3C Patent Policy</a>. W3C maintains a <a
href="http://www.w3.org/2004/01/pp-impl/32061/status"
rel=disclosure>public list of any patent disclosures</a> made in
connection with the deliverables of the group; that page also includes
instructions for disclosing a patent. An individual who has actual
knowledge of a patent which the individual believes contains <a
href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential
Claim(s)</a> must disclose the information in accordance with <a
href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section
6 of the W3C Patent Policy</a>.</p>
<!--end-status-->
<h2 class="no-num no-toc">Table of Contents</h2>
<!--begin-toc-->
<ul class=toc>
<li><a href="#introduction"><span class=secno>1. </span>Introduction</a>
<li><a href="#values"><span class=secno>2. </span>Values</a>
<li><a href="#the-viewport"><span class=secno>3. </span>The viewport</a>
<li><a href="#the-atviewport-rule"><span class=secno>4. </span>The <code
class=css>@viewport</code> rule</a>
<ul class=toc>
<li><a href="#syntax"><span class=secno>4.1. </span>Syntax</a>
</ul>
<li><a href="#viewport-descriptors"><span class=secno>5. </span>Viewport
descriptors</a>
<ul class=toc>
<li><a href="#the-lsquomin-widthrsquo-and-lsquomax-wid"><span
class=secno>5.1. </span>The ‘<code
class=descriptor>min-width</code>’ and ‘<code
class=descriptor>max-width</code>’ descriptors</a>
<li><a href="#the-lsquowidthrsquo-shorthand-descriptor"><span
class=secno>5.2. </span>The ‘<code class=descriptor>width</code>’
shorthand descriptor</a>
<li><a href="#the-lsquomin-heightrsquo-and-lsquomax-he"><span
class=secno>5.3. </span>The ‘<code
class=descriptor>min-height</code>’ and ‘<code
class=descriptor>max-height</code>’ descriptor</a>
<li><a href="#the-lsquoheightrsquo-shorthand-descripto"><span
class=secno>5.4. </span>The ‘<code class=descriptor>height</code>’
shorthand descriptor</a>
<li><a href="#the-lsquozoomrsquo-descriptor"><span class=secno>5.5.
</span>The ‘<code class=descriptor
title="zoom!!descriptor">zoom</code>’ descriptor</a>
<li><a href="#the-lsquomin-zoomrsquo-descriptor"><span class=secno>5.6.
</span>The ‘<code class=descriptor>min-zoom</code>’ descriptor</a>
<li><a href="#the-lsquomax-zoomrsquo-descriptor"><span class=secno>5.7.
</span>The ‘<code class=descriptor>max-zoom</code>’ descriptor</a>
<li><a href="#the-lsquouser-zoomrsquo-descriptor"><span class=secno>5.8.
</span>The ‘<code class=descriptor>user-zoom</code>’ descriptor</a>
<li><a href="#the-lsquoorientationrsquo-descriptor"><span
class=secno>5.9. </span>The ‘<code
class=descriptor>orientation</code>’ descriptor</a>
</ul>
<li><a href="#constraining-viewport-descriptor-values"><span
class=secno>6. </span>Constraining viewport descriptor values</a>
<ul class=toc>
<li><a href="#definitions"><span class=secno>6.1. </span>Definitions</a>
<li><a href="#constraining-procedure"><span class=secno>6.2. </span>The
procedure</a>
</ul>
<li><a href="#media-queries"><span class=secno>7. </span>Media Queries</a>
<li><a href="#cssom"><span class=secno>8. </span>CSSOM</a>
<li><a href="#conformance"><span class=secno>9. </span>Conformance</a>
<li><a href="#viewport-meta"><span class=secno>10. </span>Viewport <code
class=html>META</code> element</a>
<ul class=toc>
<li><a href="#meta-properties"><span class=secno>10.1.
</span>Properties</a>
<li><a href="#parsing-algorithm"><span class=secno>10.2. </span>Parsing
algorithm</a>
<li><a href="#lsquoextend-to-zoomrsquo"><span class=secno>10.3.
</span>‘<code class=css
title=extend-to-zoom>extend-to-zoom</code>’</a>
<li><a href="#translation-into-atviewport-descriptors"><span
class=secno>10.4. </span>Translation into <code
class=css>@viewport</code> descriptors</a>
</ul>
<li><a href="#handling-auto-zoom"><span class=secno>11. </span>Handling
‘<code class=css title="auto!!zoom">auto</code>’ for ‘<code
class=descriptor title="zoom!!descriptor">zoom</code>’</a>
<li><a href="#ua-stylesheet"><span class=secno>12. </span>UA stylesheets
</a>
<ul class=toc>
<li><a href="#large-screen-ua-styles-"><span class=secno>12.1.
</span>Large screen UA styles </a>
<li><a href="#small-screen-ua-styles"><span class=secno>12.2.
</span>Small screen UA styles</a>
</ul>
<li class=no-num><a href="#acknowledgments">Acknowledgments</a>
<li class=no-num><a href="#references">References</a>
<ul class=toc>
<li class=no-num><a href="#normative-references">Normative
references</a>
<li class=no-num><a href="#other-references">Other references</a>
</ul>
<li class=no-num><a href="#descriptor-index">Descriptor index</a>
<li class=no-num><a href="#index">Index</a>
</ul>
<!--end-toc-->
<h2 id=introduction><span class=secno>1. </span>Introduction</h2>
<p><em>This section is not normative.</em>
<p>CSS 2.1 <a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>
specifies an <a
href="http://www.w3.org/TR/CSS21/visudet.html#containing-block-details">
initial containing block</a> for continuous media that has the dimensions
of the <a href="http://www.w3.org/TR/CSS21/visuren.html#viewport">
viewport</a>. Mobile/handheld device browsers have a viewport that is
generally a lot narrower than a desktop browser window at a zoom level
that gives a CSS pixel size <a
href="http://www.w3.org/TR/CSS21/syndata.html#length-units">recommended
</a> by CSS 2.1.
<p>The narrow viewport is a problem for documents designed to look good in
desktop browsers. The result is that mobile browser vendors use a fixed
initial containing block size that is different from the viewport size,
and close to that of a typical desktop browser window. In addition to
scrolling or panning, zooming is often used to change between an overview
of the document and zoom in on particular areas of the document to read
and interact with.
<p>Certain DOCTYPEs (for instance XHTML Mobile Profile) are used to
recognize mobile documents which are assumed to be designed for handheld
devices, hence using the viewport size as the initial containing block
size.
<p>Additionally, an HTML <code class=html>META</code> tag has been
introduced for allowing an author to specify the size of the initial
containing block, and the initial zoom factor directly. It was first
implemented by Apple for the Safari/iPhone browser, but has since been
implemented for the Opera, Android, and Fennec browsers. These
implementations are not fully interoperable and this specification is an
attempt at standardizing the functionality provided by the viewport <code
class=html>META</code> tag in CSS.
<h2 id=values><span class=secno>2. </span>Values</h2>
<p>This specification follows the <a
href="http://www.w3.org/TR/css3-syntax/#property-defs">CSS property
definition conventions</a> from <a href="#CSS3SYN"
rel=biblioentry>[CSS3SYN]<!--{{!CSS3SYN}}--></a>.
<p>Value types are defined in <a href="#CSS3VAL"
rel=biblioentry>[CSS3VAL]<!--{{!CSS3VAL}}--></a>.
<h2 id=the-viewport><span class=secno>3. </span>The viewport</h2>
<p>In CSS 2.1 a <a
href="http://www.w3.org/TR/CSS21/visuren.html#viewport">viewport</a> is a
feature of a user agent for continuous media and used to establish the
initial containing block for continuous media. For paged media, the
initial containing block is based on the page area. The page area can be
set through @page rules. Hence, <code class=css>@viewport</code> applies
to continuous media, and @page to paged media, and they will not interact
or conflict.
<p>This specification introduces a way of overriding the size of the
viewport provided by the user agent (UA). Because of this, we need to
introduce the difference between the <a href="#initial-viewport">initial
viewport</a> and the <a href="#actual-viewport">actual viewport</a>.
<dl>
<dt><dfn id=initial-viewport>initial viewport</dfn>
<dd>This refers to the viewport before any UA or author styles have
overridden the viewport given by the window or viewing area of the UA.
Note that the initial viewport size will change with the size of the
window or viewing area.
<dt><dfn id=actual-viewport>actual viewport</dfn>
<dd>This is the viewport you get after the cascaded viewport descriptors,
and the following <a href="#constraining-procedure">constraining
procedure</a> have been applied.
</dl>
<p>When the <a href="#actual-viewport">actual viewport</a> cannot fit
inside the window or viewing area, either because the <a
href="#actual-viewport">actual viewport</a> is larger than the <a
href="#initial-viewport">initial viewport</a> or the zoom factor causes
only parts of the <a href="#actual-viewport">actual viewport</a> to be
visible, the UA should offer a scrolling or panning mechanism.
<p>It is recommended that initially the upper-left corners of the <a
href="#actual-viewport"> actual viewport</a> and the window or viewing
area are aligned if the base direction of the document is ltr. Similarly,
that the upper-right corners are aligned when the base direction is rtl.
The base direction for a document is defined as the computed value of the
<code class=property>direction</code> property for the first <code
class=html>BODY</code> element of an HTML or XHTML document. For other
document types, it is the computed <code class=property>direction</code>
for the root element.
<p class=issue>"dbaron: The question is, what does this do on the desktop
browser? (And what's a desktop browser)". Need to say that a "desktop"
browser typically have no UA styles, as opposed to the <a
href="#ua-stylesheet">UA stylesheet</a> outlined for current mobile
behaviour, and that no UA styles for <code class=css>@viewport</code> will
give "desktop" behaviour per default (actual viewport is initial
viewport).
<h2 id=the-atviewport-rule><span class=secno>4. </span>The <code
class=css>@viewport</code> rule</h2>
<p>The <code class=css>@viewport</code> <a
href="http://www.w3.org/TR/CSS21/syndata.html#at-rules">at-rule</a>
consists of the @-keyword followed by a block of descriptors describing
the viewport.
<p>The descriptors inside an <code class=css>@viewport</code> rule are per
document and there is no inheritance involved. Hence declarations using
the ‘<code class=css>inherit</code>’ keyword will be dropped. They
work similarly to <code class=css>@page</code> descriptors and follow the
cascading order of CSS. Hence, descriptors in <code
class=css>@viewport</code> rules will override descriptors from preceding
rules. The declarations allow !important which will affect cascading of
descriptors accordingly.
<p><code class=css>@viewport</code> rules apply to top level documents
only.
<div class=example>
<p>This example sets the viewport to at least 320px, but otherwise match
window width if it is wider than 320px. Note that it is enough to set the
width as the height will be resolved from the width when auto.
<pre><!--
-->@viewport {
<!-- --> width: 320px auto;
<!-- -->}<!--
--></pre>
</div>
<h3 id=syntax><span class=secno>4.1. </span>Syntax</h3>
<p>The syntax for the <code class=css>@viewport</code> rule is as follows
(using the notation from the <a
href="http://www.w3.org/TR/CSS21/grammar.html">Grammar appendix</a> of CSS
2.1 <a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>):
<pre><!--
-->viewport
<!----> : VIEWPORT_SYM S*
<!----> '{' S* declaration? [ ';' S* declaration? ]* '}' S*<!--
-->;</pre>
<p>with the new token:
<pre>@{V}{I}{E}{W}{P}{O}{R}{T} {return VIEWPORT_SYM;}</pre>
<p> where:
<pre>V v|\\0{0,4}(56|76)(\r\n|[ \t\r\n\f])?|\\v
<!-- -->W w|\\0{0,4}(57|77)(\r\n|[ \t\r\n\f])?|\\w</pre>
<p>The <code>viewport</code> non-terminal is added to the
<code>stylesheet</code> production along with the <code>ruleset</code>,
<code>media</code>, and <code>page</code> non-terminals:
<pre><!--
-->stylesheet
<!-- --> : [ CHARSET_SYM STRING ';' ]?
<!-- --> [S|CDO|CDC]* [ import [ CDO S* | CDC S* ]* ]*
<!-- --> [ [ ruleset | media | page | viewport ] [ CDO S* | CDC S* ]* ]*
<!-- --> ;<!--
--></pre>
<p>It is also added to media production to allow <code
class=css>@viewport</code> rules nested inside <code
class=css>@media</code> rules <span class=note>This is extending the CSS
2.1 syntax. A draft of CSS3 Paged Media also allows page inside
@media.</span>:
<pre><!--
-->media
<!-- --> : MEDIA_SYM S* media_list LBRACE S* [ ruleset | viewport ]* '}' S*
<!-- --> ;<!--
--></pre>
<h2 id=viewport-descriptors><span class=secno>5. </span>Viewport
descriptors</h2>
<p>This section presents the descriptors that are allowed inside an <code
class=css>@viewport</code> rule. Other descriptors than those listed here
will be dropped.
<p>Relative length values are resolved against initial values. For instance
‘<code class=property>em</code>’s are resolved against the initial
value of the <code class=property>font-size</code> property. Viewport
lengths (vw, vh, vmin, vmax) are relative to the initial viewport.
<h3 id=the-lsquomin-widthrsquo-and-lsquomax-wid><span class=secno>5.1.
</span>The ‘<a href="#min-width"><code
class=descriptor>min-width</code></a>’ and ‘<a href="#max-width"><code
class=descriptor>max-width</code></a>’ descriptors</h3>
<table class=descdef>
<tbody>
<tr>
<td><em>Name:</em>
<td><dfn id=min-width>min-width</dfn>
<tr>
<td><em>Value:</em>
<td><a href="#ltviewport-lengthgt">&lt;viewport-length&gt;</a>
<tr>
<td><em>Initial:</em>
<td><a href="#auto" title="auto!!length">auto</a>
<tr>
<td><em>Percentages:</em>
<td>Refer to the width of the <a href="#initial-viewport">initial
viewport</a>
<tr>
<td><em>Media:</em>
<td>visual, continuous
<tr>
<td><em>Computed value:</em>
<td>‘<a href="#auto"><code class=css
title="auto!!length">auto</code></a>’, an absolute length, or a
percentage as specified
</table>
<table class=descdef>
<tbody>
<tr>
<td><em>Name:</em>
<td><dfn id=max-width>max-width</dfn>
<tr>
<td><em>Value:</em>
<td><a href="#ltviewport-lengthgt">&lt;viewport-length&gt;</a>
<tr>
<td><em>Initial:</em>
<td><a href="#auto" title="auto!!length">auto</a>
<tr>
<td><em>Percentages:</em>
<td>Refer to the width of the <a href="#initial-viewport">initial
viewport</a>
<tr>
<td><em>Media:</em>
<td>visual, continuous
<tr>
<td><em>Computed value:</em>
<td>‘<a href="#auto"><code class=css
title="auto!!length">auto</code></a>’, an absolute length, or a
percentage as specified
</table>
<p>Specifies the minimum and maximum width of the <a
href="http://www.w3.org/TR/CSS21/visuren.html#viewport">viewport</a> that
is used to set the size of the <a
href="http://www.w3.org/TR/CSS21/visudet.html#containing-block-details">
initial containing block</a> where
<p style="margin: 1em"><var><dfn
id=ltviewport-lengthgt>&lt;viewport-length&gt;</dfn></var> = auto |
<var>&lt;length&gt;</var> | <var>&lt;percentage&gt;</var>
<p>and the values have the following meanings:
<dl>
<dt>‘<code class=css><dfn id=auto
title="auto!!length">auto</dfn></code>’
<dd>The used value is calculated from the other descriptors' values
according to the <a href="#constraining-procedure">constraining
procedure</a>.
<dt><var>&lt;length&gt;</var>
<dd>
<p>A non-negative absolute or relative length.
<dt><var>&lt;percentage&gt;</var>
<dd>
<p>A percentage value relative to the width or height of the <a
href="#initial-viewport">initial viewport</a> at zoom factor 1.0, for
horizontal and vertical lengths respectively. Must be non-negative.
</dl>
<p>The min-width and max-width descriptors are inputs to the <a
href="#constraining-procedure">constraining procedure</a>. The width will
initially be set as close as possible to the <a
href="#initial-viewport">initial viewport</a> width within the min/max
constraints.
<h3 id=the-lsquowidthrsquo-shorthand-descriptor><span class=secno>5.2.
</span>The ‘<a href="#width"><code class=descriptor>width</code></a>’
shorthand descriptor</h3>
<table class=descdef>
<tbody>
<tr>
<td><em>Name:</em>
<td><dfn id=width>width</dfn>
<tr>
<td><em>Value:</em>
<td><a href="#ltviewport-lengthgt">&lt;viewport-length&gt;</a>{1,2}
<tr>
<td><em>Initial:</em>
<td>See individual descriptors
<tr>
<td><em>Percentages:</em>
<td>See individual descriptors
<tr>
<td><em>Media:</em>
<td>visual, continuous
<tr>
<td><em>Computed value:</em>
<td>See individual descriptors
</table>
<p>This is a shorthand descriptor for setting both min-width and max-width.
One <a href="#ltviewport-lengthgt">&lt;viewport-length&gt;</a> value will
set both min-width and max-width to that value. Two <a
href="#ltviewport-lengthgt">&lt;viewport-length&gt;</a> values will set
min-width to the first and max-width to the second.
<h3 id=the-lsquomin-heightrsquo-and-lsquomax-he><span class=secno>5.3.
</span>The ‘<a href="#min-height"><code
class=descriptor>min-height</code></a>’ and ‘<a
href="#max-height"><code class=descriptor>max-height</code></a>’
descriptor</h3>
<table class=descdef>
<tbody>
<tr>
<td><em>Name:</em>
<td><dfn id=min-height>min-height</dfn>
<tr>
<td><em>Value:</em>
<td><a href="#ltviewport-lengthgt">&lt;viewport-length&gt;</a>
<tr>
<td><em>Initial:</em>
<td><a href="#auto" title="auto!!length">auto</a>
<tr>
<td><em>Percentages:</em>
<td>Refer to the height of the <a href="#initial-viewport">initial
viewport</a>
<tr>
<td><em>Media:</em>
<td>visual, continuous
<tr>
<td><em>Computed value:</em>
<td>‘<a href="#auto"><code class=css
title="auto!!length">auto</code></a>’, an absolute length, or a
percentage as specified
</table>
<table class=descdef>
<tbody>
<tr>
<td><em>Name:</em>
<td><dfn id=max-height>max-height</dfn>
<tr>
<td><em>Value:</em>
<td><a href="#ltviewport-lengthgt">&lt;viewport-length&gt;</a>
<tr>
<td><em>Initial:</em>
<td><a href="#auto" title="auto!!length">auto</a>
<tr>
<td><em>Percentages:</em>
<td>Refer to the height of the <a href="#initial-viewport">initial
viewport</a>
<tr>
<td><em>Media:</em>
<td>visual, continuous
<tr>
<td><em>Computed value:</em>
<td>‘<a href="#auto"><code class=css
title="auto!!length">auto</code></a>’, an absolute length, or a
percentage as specified
</table>
<p>Specifies the minimum and maximum height of the <a
href="http://www.w3.org/TR/CSS21/visuren.html#viewport">viewport</a> that
is used to set the size of the <a
href="http://www.w3.org/TR/CSS21/visudet.html#containing-block-details">
initial containing block</a>.
<p>The min-height and max-height descriptors are inputs to the <a
href="#constraining-procedure">constraining procedure</a>. The height will
initially be set as close as possible to the <a
href="#initial-viewport">initial viewport</a> height within the min/max
constraints.
<h3 id=the-lsquoheightrsquo-shorthand-descripto><span class=secno>5.4.
</span>The ‘<a href="#height"><code
class=descriptor>height</code></a>’ shorthand descriptor</h3>
<table class=descdef>
<tbody>
<tr>
<td><em>Name:</em>
<td><dfn id=height>height</dfn>
<tr>
<td><em>Value:</em>
<td><a href="#ltviewport-lengthgt">&lt;viewport-length&gt;</a>{1,2}
<tr>
<td><em>Initial:</em>
<td>See individual descriptors
<tr>
<td><em>Percentages:</em>
<td>See individual descriptors
<tr>
<td><em>Media:</em>
<td>visual, continuous
<tr>
<td><em>Computed value:</em>
<td>See individual descriptors
</table>
<p>This is a shorthand descriptor for setting both min-height and
max-height. One <a href="#ltviewport-lengthgt">&lt;viewport-length&gt;</a>
value will set both min-height and max-height to that value. Two <a
href="#ltviewport-lengthgt">&lt;viewport-length&gt;</a> values will set
min-height to the first and max-height to the second.
<h3 id=the-lsquozoomrsquo-descriptor><span class=secno>5.5. </span>The
‘<code class=descriptor title="zoom!!descriptor">zoom</code>’
descriptor</h3>
<table class=descdef>
<tbody>
<tr>
<td><em>Name:</em>
<td><dfn id=zoom>zoom</dfn>
<tr>
<td><em>Value:</em>
<td>auto | &lt;number&gt; | &lt;percentage&gt;
<tr>
<td><em>Initial:</em>
<td><a href="#auto0" title="auto!!zoom">auto</a>
<tr>
<td><em>Percentages:</em>
<td>The zoom factor itself
<tr>
<td><em>Media:</em>
<td>visual, continuous
<tr>
<td><em>Computed value:</em>
<td>‘<a href="#auto0"><code class=css
title="auto!!zoom">auto</code></a>’, or a non-negative number or
percentage as specified.
</table>
<p>Specifies the initial zoom factor for the window or viewing area. This
is a magnifying glass type of zoom. Interactively changing the zoom factor
from the initial zoom factor does not affect the size of the initial or
the actual viewport.
<p>Values have the following meanings:
<dl>
<dt>‘<code class=css><dfn id=auto0
title="auto!!zoom">auto</dfn></code>’
<dd>The zoom factor is UA-dependent. The UA may use the size of the area
of the canvas on which the document is rendered to find that initial zoom
factor. See <a href="#handling-auto-zoom">this section</a> for a proposed
way of handling ‘<a href="#auto0"><code class=css
title="auto!!zoom">auto</code></a>’ values for ‘<code
class=descriptor title="zoom!!descriptor">zoom</code>’.
<dt><var>&lt;number&gt;</var>
<dd>
<p>A non-negative number used as a zoom factor. A factor of 1.0 means
that no zooming is done. Values larger than 1.0 gives a zoomed-in effect
and values smaller than 1.0 a zoomed-out effect.
<dt><var>&lt;percentage&gt;</var>
<dd>
<p>A non-negative percentage value used as a zoom factor. A factor of
100% means that no zooming is done. Values larger than 100% gives a
zoomed-in effect and values smaller than 100% a zoomed-out effect.
</dl>
<h3 id=the-lsquomin-zoomrsquo-descriptor><span class=secno>5.6. </span>The
‘<a href="#min-zoom"><code class=descriptor>min-zoom</code></a>’
descriptor</h3>
<table class=descdef>
<tbody>
<tr>
<td><em>Name:</em>
<td><dfn id=min-zoom>min-zoom</dfn>
<tr>
<td><em>Value:</em>
<td>auto | &lt;number&gt; | &lt;percentage&gt;
<tr>
<td><em>Initial:</em>
<td><a href="#auto1" title="auto!!min-zoom">auto</a>
<tr>
<td><em>Percentages:</em>
<td>The zoom factor itself
<tr>
<td><em>Media:</em>
<td>visual, continuous
<tr>
<td><em>Computed value:</em>
<td>‘<a href="#auto1"><code class=css
title="auto!!min-zoom">auto</code></a>’, or a non-negative number or
percentage as specified.
</table>
<p>Specifies the smallest allowed zoom factor. It is used as input to the
<a href="#constraining-procedure">constraining procedure</a> to constrain
non-‘<a href="#auto0"><code class=css
title="auto!!zoom">auto</code></a>’ ‘<code class=descriptor
title="zoom!!descriptor">zoom</code>’ values, but also to limit the
allowed zoom factor that can be set through user interaction. The UA
should also use this value as a constraint when choosing an actual zoom
factor when the used value of ‘<code class=descriptor
title="zoom!!descriptor">zoom</code>’ is ‘<a href="#auto0"><code
class=css title="auto!!zoom">auto</code></a>’.
<p>Values have the following meanings:
<dl>
<dt>‘<code class=css><dfn id=auto1
title="auto!!min-zoom">auto</dfn></code>’
<dd>The lower limit on zoom factor is UA dependant. There will be no
minimum value constraint on the ‘<code class=descriptor
title="zoom!!descriptor">zoom</code>’ descriptor used in the <a
href="#constraining-procedure">constraining procedure</a>
<dt><var>&lt;number&gt;</var>
<dd>
<p>A non-negative number limiting the minimum value of the zoom factor.
<dt><var>&lt;percentage&gt;</var>
<dd>
<p>A non-negative percentage limiting the minimum value of the zoom
factor.
</dl>
<h3 id=the-lsquomax-zoomrsquo-descriptor><span class=secno>5.7. </span>The
‘<a href="#max-zoom"><code class=descriptor>max-zoom</code></a>’
descriptor</h3>
<table class=descdef>
<tbody>
<tr>
<td><em>Name:</em>
<td><dfn id=max-zoom>max-zoom</dfn>
<tr>
<td><em>Value:</em>
<td>auto | &lt;number&gt; | &lt;percentage&gt;
<tr>
<td><em>Initial:</em>
<td><a href="#auto2" title="auto!!max-zoom">auto</a>
<tr>
<td><em>Percentages:</em>
<td>The zoom factor itself
<tr>
<td><em>Media:</em>
<td>visual, continuous
<tr>
<td><em>Computed value:</em>
<td>‘<a href="#auto2"><code class=css
title="auto!!max-zoom">auto</code></a>’, or a non-negative number or
percentage as specified.
</table>
<p>Specifies the largest allowed zoom factor. It is used as input to the <a
href="#constraining-procedure">constraining procedure</a> to constrain
non-‘<a href="#auto0"><code class=css
title="auto!!zoom">auto</code></a>’ ‘<code class=descriptor
title="zoom!!descriptor">zoom</code>’ values, but also to limit the
allowed zoom factor that can be set through user interaction. The UA
should also use this value as a constraint when choosing an actual zoom
factor when the used value of ‘<code class=descriptor
title="zoom!!descriptor">zoom</code>’ is ‘<a href="#auto0"><code
class=css title="auto!!zoom">auto</code></a>’.
<p>Values have the following meanings:
<dl>
<dt>‘<code class=css><dfn id=auto2
title="auto!!max-zoom">auto</dfn></code>’
<dd>The upper limit on zoom factor is UA dependant. There will be no
maximum value constraint on the ‘<a href="#zoom"><code
class=descriptor>zoom</code></a>’ descriptor used in the <a
href="#constraining-procedure">constraining procedure</a>
<dt><var>&lt;number&gt;</var>
<dd>
<p>A non-negative number limiting the maximum value of the zoom factor.
<dt><var>&lt;percentage&gt;</var>
<dd>
<p>A non-negative percentage limiting the maximum value of the zoom
factor.
</dl>
<h3 id=the-lsquouser-zoomrsquo-descriptor><span class=secno>5.8. </span>The
‘<a href="#user-zoom"><code class=descriptor>user-zoom</code></a>’
descriptor</h3>
<table class=descdef>
<tbody>
<tr>
<td><em>Name:</em>
<td><dfn id=user-zoom>user-zoom</dfn>
<tr>
<td><em>Value:</em>
<td>zoom | fixed
<tr>
<td><em>Initial:</em>
<td><a href="#zoom0" title="zoom!!value">zoom</a>
<tr>
<td><em>Percentages:</em>
<td>N/A
<tr>
<td><em>Media:</em>
<td>visual, continuous
View remainder of file in raw view