Skip to content

Commit

Permalink
[css-values-4] Add lv* units explicitly for large viewport size. #4329
Browse files Browse the repository at this point in the history
  • Loading branch information
fantasai committed Jul 15, 2021
1 parent 3edb9dc commit 8bed684
Showing 1 changed file with 37 additions and 15 deletions.
52 changes: 37 additions & 15 deletions css-values-4/Overview.bs
Original file line number Diff line number Diff line change
Expand Up @@ -1737,11 +1737,6 @@ Font-relative Lengths: the ''em'', ''ex'', ''cap'', ''ch'', ''ic'', ''rem'', ''l
<h4 id="viewport-relative-lengths">
Viewport-percentage Lengths: the ''*vw'', ''*vh'', ''*vi'', ''*vb'', ''*vmin'', ''*vmax'' units</h4>

ISSUE: <img src="../construction.gif" alt="" style="float: right">
This section is <strong>UNDER CONSTRUCTION</strong>.
Please use <a href="https://www.w3.org/TR/css-values-3/">CSS Values and Units Level 3</a>
as an implementation reference for now.

The <dfn export>viewport-percentage lengths</dfn> are relative to the size of the
<a href="https://www.w3.org/TR/CSS21/visudet.html#containing-block-details">initial containing block</a>--
which is itself based on the size of either
Expand All @@ -1753,13 +1748,32 @@ Viewport-percentage Lengths: the ''*vw'', ''*vh'', ''*vi'', ''*vb'', ''*vmin'',
<h5 id="viewport-variants" class="no-toc">
The Large, Small, and Dynamic Viewport Sizes</h5>

There are three variants of the [=viewport-percentage length=] units,
corresponding to three (possibly identical) notions of the viewport size.
There are four variants of the [=viewport-percentage length=] units,
corresponding to four (possibly identical) notions of the viewport size.

<dl export>
<dt>UA-default viewport
<dd>
The <dfn export>UA-default viewport-percentage units</dfn>
(''v*'')
are defined with respect to a UA-defined <dfn export>UA-default viewport size</dfn>,
which for any given document
should be equivalent to the [=large viewport size=],
[=small viewport size=],
or some intermediary size.

ISSUE: Should the [=UA-default viewport size=] be required
to correspond to the size of the [=initial containing block=]?

Note: Implementations that choose a size other than
the [=large viewport size=] or [=small viewport size=]
are encouraged to explain their choice to the CSSWG
for consideration in future specification updates.

<dt>large viewport
<dd>
The <dfn export>large viewport-percentage units</dfn>
(''lv*'')
are defined with respect to the <dfn export>large viewport size</dfn>:
the viewport sized assuming
any UA interfaces that are dynamically expanded and retracted
Expand Down Expand Up @@ -1789,6 +1803,7 @@ The Large, Small, and Dynamic Viewport Sizes</h5>
<dt>small viewport
<dd>
The <dfn export>small viewport-percentage units</dfn>
(''sv*'')
are defined with respect to the <dfn export>small viewport size</dfn>:
the viewport sized assuming
any UA interfaces that are dynamically expanded and retracted
Expand Down Expand Up @@ -1818,6 +1833,7 @@ The Large, Small, and Dynamic Viewport Sizes</h5>
<dt>dynamic viewport
<dd>
The <dfn export>dynamic viewport-percentage units</dfn>
(''dv*'')
are defined with respect to the <dfn export>dynamic viewport size</dfn>:
the viewport sized
with dynamic consideration of any UA interfaces
Expand Down Expand Up @@ -1879,11 +1895,13 @@ The Various Viewport-relative Units</h5>
<dl export dfn-type=value dfn-for="<length>">
<dt><dfn lt="vw">vw unit</dfn>
<dt><dfn lt="svw">svw unit</dfn>
<dt><dfn lt="lvw">lvw unit</dfn>
<dt><dfn lt="dvw">dvw unit</dfn>
<dd>
Equal to 1% of the width of the
[=large viewport size=],
[=UA-default viewport size=],
[=small viewport size=],
[=large viewport size=],
and [=dynamic viewport size=],
respectively.

Expand All @@ -1897,16 +1915,19 @@ The Various Viewport-relative Units</h5>

<dt><dfn lt="vh">vh unit</dfn>
<dt><dfn lt="svh">svh unit</dfn>
<dt><dfn lt="lvh">lvh unit</dfn>
<dt><dfn lt="dvh">dvh unit</dfn>
<dd>
Equal to 1% of the height of the
[=large viewport size=],
[=UA-default viewport size=],
[=small viewport size=],
[=large viewport size=],
and [=dynamic viewport size=],
respectively.

<dt><dfn lt=vi>vi unit</dfn>
<dt><dfn lt=svi>svi unit</dfn>
<dt><dfn lt=lvi>lvi unit</dfn>
<dt><dfn lt=dvi>dvi unit</dfn>
<dd>
Equal to 1% of the size of the
Expand All @@ -1918,23 +1939,27 @@ The Various Viewport-relative Units</h5>

<dt><dfn lt=vb>vb unit</dfn>
<dt><dfn lt=svb>svb unit</dfn>
<dt><dfn lt=lvb>lvb unit</dfn>
<dt><dfn lt=dvb>dvb unit</dfn>
<dd>
Equal to 1% of the size of the initial containing block
[=large viewport size=],
[=UA-default viewport size=],
[=small viewport size=],
[=large viewport size=],
and [=dynamic viewport size=]
(respectively)
in the direction of the root element's block axis.

<dt><dfn lt="vmin">vmin unit</dfn>
<dt><dfn lt="svmin">svmin unit</dfn>
<dt><dfn lt="lvmin">lvmin unit</dfn>
<dt><dfn lt="dvmin">dvmin unit</dfn>
<dd>
Equal to the smaller of ''*vw'' or ''*vh''.

<dt><dfn lt="vmax">vmax unit</dfn>
<dt><dfn lt="svmax">svmax unit</dfn>
<dt><dfn lt="lvmax">lvmax unit</dfn>
<dt><dfn lt="dvmax">dvmax unit</dfn>
<dd>
Equal to the larger of ''*vw'' or ''*vh''.
Expand Down Expand Up @@ -1967,10 +1992,6 @@ The Various Viewport-relative Units</h5>
but can also block critical content (such as toolbars, headers, and footers) in others.
It's therefore not entirely clear whether this is the best mapping.

ISSUE: Should we have dedicated ''lv*'' units for the [=large viewport size=]?
That would give authors an explicit version, and allow the unprefixed units
to maybe do smarter things to avoid obscuring critical content.

In situations where there is no root element
or it hasn't yet been styled
(such as when evaluating <a>media queries</a>),
Expand Down Expand Up @@ -4921,7 +4942,8 @@ Recent Changes</h3>

<ul>
<li>Updated interpolation of colors to reference [[CSS-COLOR-4]] instead of [[CSS-COLOR-3]].
<li>Added the ''svh'', ''svw'', ''svi'', ''svb'', ''svmin'', and ''svmax'' [=small viewport-percentage units=]
<li>Added the ''svh'', ''svw'', ''svi'', ''svb'', ''svmin'', and ''svmax'' [=small viewport-percentage units=];
''lvh'', ''lvw'', ''lvi'', ''lvb'', ''lvmin'', and ''lvmax'' [=large viewport-percentage units=];
and ''dvh'', ''dvw'', ''dvi'', ''dvb'', ''dvmin'', and ''dvmax'' [=dynamic viewport-percentage units=].
(<a href="https://github.com/w3c/csswg-drafts/issues/4329">Issue 4329</a> and
<a href="https://github.com/w3c/csswg-drafts/issues/6113">Issue 6113</a>)
Expand Down

0 comments on commit 8bed684

Please sign in to comment.