Skip to content

Commit 0f78ba4

Browse files
fantasaifantasai
committed
[css-values-4] Define small and dynamic variants of viewport-relative units. #4329 #6113
https://lists.w3.org/Archives/Public/www-style/2020Feb/0007.html https://lists.w3.org/Archives/Public/www-style/2021May/0010.html
1 parent 76c5c7f commit 0f78ba4

File tree

1 file changed

+185
-17
lines changed

1 file changed

+185
-17
lines changed

‎css-values-4/Overview.bs‎

Lines changed: 185 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -544,11 +544,9 @@ CSS-wide keywords: ''initial'', ''inherit'' and ''unset''</h4>
544544
All of these keywords are normatively defined in the Cascade module. [[!CSS3CASCADE]]
545545

546546
<wpt>
547-
css/css-values/initial-background-color.html
548547
css/css-multicol/multicol-inherit-002.xht
549548
css/css-multicol/multicol-rule-color-inherit-001.xht
550549
css/css-multicol/multicol-rule-color-inherit-002.xht
551-
css/css-values/unset-value-storage.html
552550
css/CSS2/values/units-008.xht
553551
</wpt>
554552

@@ -1737,25 +1735,158 @@ Font-relative Lengths: the ''em'', ''ex'', ''cap'', ''ch'', ''ic'', ''rem'', ''l
17371735
-->
17381736

17391737
<h4 id="viewport-relative-lengths">
1740-
Viewport-percentage Lengths: the ''vw'', ''vh'', ''vi'', ''vb'', ''vmin'', ''vmax'' units</h4>
1738+
Viewport-percentage Lengths: the ''*vw'', ''*vh'', ''*vi'', ''*vb'', ''*vmin'', ''*vmax'' units</h4>
1739+
1740+
ISSUE: <img src="../construction.gif" alt="" style="float: right">
1741+
This section is <strong>UNDER CONSTRUCTION</strong>.
1742+
Please use <a href="https://www.w3.org/TR/css-values-3/">CSS Values and Units Level 3</a>
1743+
as an implementation reference for now.
17411744

17421745
The <dfn export>viewport-percentage lengths</dfn> are relative to the size of the
17431746
<a href="https://www.w3.org/TR/CSS21/visudet.html#containing-block-details">initial containing block</a>.
17441747
When the height or width of the initial containing block is changed,
17451748
they are scaled accordingly.
1746-
However, when the value of 'overflow' on the root element is ''overflow/auto'',
1747-
any scroll bars are assumed not to exist.
1748-
<span class='note'>Note that the initial containing block's size is affected by the presence of scrollbars on the viewport.</span>
17491749

1750-
ISSUE(1766): Level 3 assumes scrollbars never exist because it was hard to implement. This is making authors unhappy.
1750+
<h5 id="viewport-variants" class="no-toc">
1751+
The Large, Small, and Dynamic Viewport Sizes</h5>
1752+
1753+
There are three variants of the [=viewport-percentage length=] units,
1754+
corresponding to three (possibly identical) notions of the viewport size.
1755+
1756+
<dl export>
1757+
<dt>large viewport
1758+
<dd>
1759+
The <dfn export>large viewport-percentage units</dfn>
1760+
are defined with respect to the <dfn export>large viewport size</dfn>:
1761+
the viewport sized assuming
1762+
any UA interfaces that are dynamically expanded and retracted
1763+
to be retracted.
1764+
This allows authors to size content
1765+
such that it is guaranteed to fill the viewport,
1766+
noting that such content might be hidden behind such interfaces
1767+
when they are expanded.
1768+
1769+
The sizes of the [=large viewport-percentage units=] are fixed
1770+
(and therefore stable) unless the viewport itself is resized.
1771+
1772+
<div class=example>
1773+
For example, on phones,
1774+
where screen real-estate is at a premium,
1775+
browsers will often hide part or all of the title and address bar
1776+
once the user starts scrolling the page.
1777+
The [=large viewport-percentage units=] are sized relative to
1778+
this larger everything-retracted space,
1779+
so content using these units will fill the entire visible page
1780+
when these UI elements are hidden.
1781+
However, when these retractable elements are shown,
1782+
they can obscure content
1783+
that is sized or positioned using these units.
1784+
</div>
1785+
1786+
<dt>small viewport
1787+
<dd>
1788+
The <dfn export>small viewport-percentage units</dfn>
1789+
are defined with respect to the <dfn export>small viewport size</dfn>:
1790+
the viewport sized assuming
1791+
any UA interfaces that are dynamically expanded and retracted
1792+
to be expanded.
1793+
This allows authors to size content
1794+
such that it can fit within the viewport
1795+
even when such interfaces are present,
1796+
noting that such content might not fill the viewport
1797+
when such interfaces are retracted.
1798+
1799+
The sizes of the [=small viewport-percentage units=] are fixed
1800+
(and therefore stable) unless the viewport itself is resized.
1801+
1802+
<div class=example>
1803+
An element that is sized as ''height: 100svh'', for example,
1804+
will fill the screen perfectly,
1805+
without any of its content being obscured,
1806+
when all the dynamic UI elements of the UA are shown.
1807+
1808+
Once those UI elements start being hidden, however,
1809+
there will be extra space around the element.
1810+
The [=small viewport-percentage units=] units are thus “safer” in general,
1811+
but might not produce the most attractive layout
1812+
once the user starts interacting with the page.
1813+
</div>
1814+
1815+
<dt>dynamic viewport
1816+
<dd>
1817+
The <dfn export>dynamic viewport-percentage units</dfn>
1818+
are defined with respect to the <dfn export>dynamic viewport size</dfn>:
1819+
the viewport sized
1820+
with dynamic consideration of any UA interfaces
1821+
that are dynamically expanded and retracted.
1822+
This allows authors to size content
1823+
such that it can exactly fit within the viewport
1824+
whether or not such interfaces are present.
1825+
1826+
The sizes of the [=dynamic viewport-percentage units=]
1827+
<em>are not stable</em>
1828+
even while the viewport itself is unchanged.
1829+
Using these units can cause content
1830+
to resize e.g. while the user scrolls the page.
1831+
Depending on usage,
1832+
this can be disturbing to the user
1833+
and/or costly in terms of performance.
1834+
1835+
The UA is not required to animate the [=dynamic viewport-percentage units=]
1836+
while expanding and retracting any relevant interfaces,
1837+
and may instead calculate the units
1838+
as if the relevant interface was fully expanded or retracted
1839+
during the UI animation.
1840+
(It is recommended that UAs assume the fully-retracted size
1841+
for this duration.)
1842+
</dl>
1843+
1844+
Whether the expansion/retraction of a particular interface
1845+
changes the sizes of all of the [=viewport-percentage lengths=]
1846+
(and the [=initial containing block=])
1847+
simultaneously
1848+
or contributes to the differences between
1849+
the [=large viewport size=] and [=small viewport size=]
1850+
is largely UA-dependent.
1851+
However,
1852+
UAs <em>must</em> categorize as the latter
1853+
any changes in interface that happen as a result of scrolling
1854+
or other frequent actions that would disturb the user
1855+
if they resulted in substantial layout changes.
1856+
Additionally,
1857+
UAs may have some dynamically-shown interfaces which intentionally overlay content
1858+
and do not cause any shifts in layout;
1859+
typically on-screen keyboards will fit into this category.
17511860

17521861
For [=paged media=], the exact definition of the viewport-percentage lengths
17531862
is deferred to [[!CSS3PAGE]].
1863+
However, in the typical case of all pages being the same size,
1864+
they are sized relative to the [=page area=].
1865+
1866+
In all cases, scrollbars are assumed not to exist.
1867+
<span class='note'>Note however that the [=initial containing block=]'s size
1868+
<em>is</em> affected by the presence of scrollbars on the viewport.</span>
1869+
1870+
ISSUE: <a href="https://www.w3.org/TR/css-values-3/#viewport-relative-lengths">Level 3 assumes scrollbars never exist</a> because it was hard to implement
1871+
and only Firefox bothered to do so.
1872+
This is <a href="https://github.com/w3c/csswg-drafts/issues/1766#issuecomment-460470368">making authors unhappy</a>.
1873+
Can we improve here?
1874+
1875+
<h5 id="viewport-relative-units" class="no-toc">
1876+
The Various Viewport-relative Units</h5>
1877+
1878+
The [=viewport-percentage length=] units are:
17541879

17551880
<dl export dfn-type=value dfn-for="<length>">
1756-
<dt><dfn id="vw" lt="vw">vw unit</dfn>
1881+
<dt><dfn lt="vw">vw unit</dfn>
1882+
<dt><dfn lt="svw">svw unit</dfn>
1883+
<dt><dfn lt="dvw">dvw unit</dfn>
17571884
<dd>
1758-
Equal to 1% of the width of the initial containing block.
1885+
Equal to 1% of the width of the
1886+
[=large viewport size=],
1887+
[=small viewport size=],
1888+
and [=dynamic viewport size=],
1889+
respectively.
17591890

17601891
<div class="example">
17611892
In the example below, if the width of the viewport is 200mm,
@@ -1765,25 +1896,49 @@ Viewport-percentage Lengths: the ''vw'', ''vh'', ''vi'', ''vb'', ''vmin'', ''vma
17651896
<pre>h1 { font-size: 8vw }</pre>
17661897
</div>
17671898

1768-
<dt><dfn id="vh" lt="vh">vh unit</dfn>
1899+
<dt><dfn lt="vh">vh unit</dfn>
1900+
<dt><dfn lt="svh">svh unit</dfn>
1901+
<dt><dfn lt="dvh">dvh unit</dfn>
17691902
<dd>
1770-
Equal to 1% of the height of the initial containing block.
1903+
Equal to 1% of the height of the
1904+
[=large viewport size=],
1905+
[=small viewport size=],
1906+
and [=dynamic viewport size=],
1907+
respectively.
1908+
17711909
<dt><dfn lt=vi>vi unit</dfn>
1910+
<dt><dfn lt=svi>svi unit</dfn>
1911+
<dt><dfn lt=dvi>dvi unit</dfn>
17721912
<dd>
1773-
Equal to 1% of the size of the initial containing block
1913+
Equal to 1% of the size of the
1914+
[=large viewport size=],
1915+
[=small viewport size=],
1916+
and [=dynamic viewport size=]
1917+
(respectively)
17741918
in the direction of the root element's inline axis.
17751919

17761920
<dt><dfn lt=vb>vb unit</dfn>
1921+
<dt><dfn lt=svb>svb unit</dfn>
1922+
<dt><dfn lt=dvb>dvb unit</dfn>
17771923
<dd>
17781924
Equal to 1% of the size of the initial containing block
1925+
[=large viewport size=],
1926+
[=small viewport size=],
1927+
and [=dynamic viewport size=]
1928+
(respectively)
17791929
in the direction of the root element's block axis.
1780-
<dt><dfn id="vmin" lt="vmin">vmin unit</dfn>
1930+
1931+
<dt><dfn lt="vmin">vmin unit</dfn>
1932+
<dt><dfn lt="svmin">svmin unit</dfn>
1933+
<dt><dfn lt="dvmin">dvmin unit</dfn>
17811934
<dd>
1782-
Equal to the smaller of ''vw'' or ''vh''.
1935+
Equal to the smaller of ''*vw'' or ''*vh''.
17831936

1784-
<dt><dfn id="vmax" lt="vmax">vmax unit</dfn>
1937+
<dt><dfn lt="vmax">vmax unit</dfn>
1938+
<dt><dfn lt="svmax">svmax unit</dfn>
1939+
<dt><dfn lt="dvmax">dvmax unit</dfn>
17851940
<dd>
1786-
Equal to the larger of ''vw'' or ''vh''.
1941+
Equal to the larger of ''*vw'' or ''*vh''.
17871942
</dl>
17881943

17891944
<wpt>
@@ -1805,6 +1960,18 @@ Viewport-percentage Lengths: the ''vw'', ''vh'', ''vi'', ''vb'', ''vmin'', ''vma
18051960
css/css-values/viewport-units-css2-001.html
18061961
</wpt>
18071962

1963+
ISSUE: Originally the (unprefixed) viewport units were defined
1964+
relative to the viewport size in general.
1965+
The dynamism of browser chrome shifting in and out during scrolling was invented later,
1966+
and following Safari's lead, most UAs mapped these units to the larger size.
1967+
Defining it this way is prettier in many cases,
1968+
but can also block critical content (such as toolbars, headers, and footers) in others.
1969+
It's therefore not entirely clear whether this is the best mapping.
1970+
1971+
ISSUE: Should we have dedicated ''lv*'' units for the [=large viewport size=]?
1972+
That would give authors an explicit version, and allow the unprefixed units
1973+
to maybe do smarter things to avoid obscuring critical content.
1974+
18081975
In situations where there is no root element
18091976
or it hasn't yet been styled
18101977
(such as when evaluating <a>media queries</a>),
@@ -4737,7 +4904,8 @@ Acknowledgments</h2>
47374904
of this module.
47384905

47394906
Secondly, we would like to acknowledge
4740-
Koji Ishii
4907+
Anthony Frehner,
4908+
Koji Ishii,
47414909
and
47424910
Xidorn Quan
47434911
for their comments and suggestions,

0 commit comments

Comments
 (0)