CINXE.COM
drafts: css-env-1/Overview.bs@929747cc36de (annotated)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <link rel="icon" href="/drafts/static/hgicon.png" type="image/png" /> <meta name="robots" content="index, nofollow"/> <link rel="stylesheet" href="/drafts/static/style-monoblue.css" type="text/css" /> <script type="text/javascript" src="/drafts/static/mercurial.js"></script> <title>drafts: css-env-1/Overview.bs@929747cc36de (annotated)</title> <link rel="alternate" type="application/atom+xml" href="/drafts/atom-log" title="Atom feed for drafts"/> <link rel="alternate" type="application/rss+xml" href="/drafts/rss-log" title="RSS feed for drafts"/> </head> <body> <div id="container"> <div class="page-header"> <h1 class="breadcrumb"><a href="/">Mercurial</a> > <a href="/drafts">drafts</a> / annotate</h1> <form action="/drafts/log"> <dl class="search"> <dt><label>Search: </label></dt> <dd><input type="text" name="rev" /></dd> </dl> </form> <ul class="page-nav"> <li><a href="/drafts/summary">summary</a></li> <li><a href="/drafts/shortlog">shortlog</a></li> <li><a href="/drafts/log">changelog</a></li> <li><a href="/drafts/graph/929747cc36de">graph</a></li> <li><a href="/drafts/tags">tags</a></li> <li><a href="/drafts/bookmarks">bookmarks</a></li> <li><a href="/drafts/branches">branches</a></li> <li><a href="/drafts/file/929747cc36de/css-env-1/">files</a></li> <li><a href="/drafts/help">help</a></li> </ul> </div> <ul class="submenu"> <li><a href="/drafts/file/929747cc36de/css-env-1/Overview.bs">file</a></li> <li><a href="/drafts/log/929747cc36de/css-env-1/Overview.bs">revisions</a></li> <li class="current">annotate</li> <li><a href="/drafts/diff/929747cc36de/css-env-1/Overview.bs">diff</a></li> <li><a href="/drafts/comparison/929747cc36de/css-env-1/Overview.bs">comparison</a></li> <li><a href="/drafts/raw-annotate/929747cc36de/css-env-1/Overview.bs">raw</a></li> </ul> <h2 class="no-link no-border">css-env-1/Overview.bs@929747cc36de (annotated)</h2> <h3 class="changeset">css-env-1/Overview.bs</h3> <p class="changeset-age age">Fri, 22 Nov 2024 00:21:48 +0100</p> <dl class="overview"> <dt>author</dt> <dd>andruud <andruud@gmail.com></dd> <dt>date</dt> <dd>Fri, 22 Nov 2024 00:21:48 +0100</dd> <dt>changeset 31828</dt> <dd><a href="/drafts/rev/929747cc36de">929747cc36de</a></dd> <dt>parent 31517</dt> <dd> <a href="/drafts/annotate/dd8c357f21ed/css-env-1/Overview.bs"> dd8c357f21ed </a> </dd> <dt>permissions</dt> <dd>-rw-r--r--</dd> </dl> <p class="description">[css-values] Total attr()-tainting for substitution values (#11218)<br/> <br/> This may have been the intended meaning of the spec text already,<br/> but I think we should clearly state the outcome of #5092:<br/> partial tainting of custom properties was proposed in that issue,<br/> discussed, objected to, and therefore *not* accepted.<br/> <br/> This PR hopefully makes it clear that attr()-tainting applies<br/> to whole substitution values, for now.</p> <table class="annotated"> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l1" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l1" id="l1"> 1</a> </td> <td class="source"><pre class='metadata'> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l2" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l2" id="l2"> 2</a> </td> <td class="source">Title: CSS Environment Variables Module Level 1 </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l3" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l3" id="l3"> 3</a> </td> <td class="source">Shortname: css-env </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l4" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l4" id="l4"> 4</a> </td> <td class="source">Level: 1 </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/bbadf672d1b5/css-env-1/Overview.bs#l5" title="bbadf672d1b5: [css-env-1] UD => ED">jackalmage@21497</a> </td> <td class="lineno"> <a href="#l5" id="l5"> 5</a> </td> <td class="source">Status: ED </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/2b4943736d68/css-env-1/Overview.bs#l6" title="2b4943736d68: [css-env-1] fix bikeshed errors">jackalmage@21013</a> </td> <td class="lineno"> <a href="#l6" id="l6"> 6</a> </td> <td class="source">Work Status: exploring </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l6" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l7" id="l7"> 7</a> </td> <td class="source">Group: CSSWG </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l7" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l8" id="l8"> 8</a> </td> <td class="source">URL: https://drafts.csswg.org/css-env-1/ </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/40ea893aec10/css-env-1/Overview.bs#l9" title="40ea893aec10: Add missing w3cids for editors.">dbaron@21362</a> </td> <td class="lineno"> <a href="#l9" id="l9"> 9</a> </td> <td class="source">Editor: Tab Atkins-Bittner, Google, w3cid 42199 </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/40ea893aec10/css-env-1/Overview.bs#l10" title="40ea893aec10: Add missing w3cids for editors.">dbaron@21362</a> </td> <td class="lineno"> <a href="#l10" id="l10"> 10</a> </td> <td class="source">Editor: Dean Jackson, Apple, w3cid 42080 </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/dfe5f345ac42/css-env-1/Overview.bs#l11" title="dfe5f345ac42: Revert "Revert "Merge branch 'main' of https://github.com/w3c/csswg-drafts into main""">dbaron@27061</a> </td> <td class="lineno"> <a href="#l11" id="l11"> 11</a> </td> <td class="source">Abstract: This specification defines the concept of [=environment variables=] and the ''env()'' function, which work similarly to custom properties and the ''var()'' function, but are defined globally for a document. These can be defined either by the user agent, providing values that can be used on the page based on information the UA has special access to, or provided by the author for "global" variables that are guaranteed to be the same no matter where in the document they're used. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l11" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l12" id="l12"> 12</a> </td> <td class="source"></pre> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l12" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l13" id="l13"> 13</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/2b4943736d68/css-env-1/Overview.bs#l14" title="2b4943736d68: [css-env-1] fix bikeshed errors">jackalmage@21013</a> </td> <td class="lineno"> <a href="#l14" id="l14"> 14</a> </td> <td class="source"><pre class=link-defaults> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/2b4943736d68/css-env-1/Overview.bs#l15" title="2b4943736d68: [css-env-1] fix bikeshed errors">jackalmage@21013</a> </td> <td class="lineno"> <a href="#l15" id="l15"> 15</a> </td> <td class="source">spec:dom; type:interface; text:Document </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/2b4943736d68/css-env-1/Overview.bs#l16" title="2b4943736d68: [css-env-1] fix bikeshed errors">jackalmage@21013</a> </td> <td class="lineno"> <a href="#l16" id="l16"> 16</a> </td> <td class="source">spec:css-variables-1; type:dfn; text:invalid at computed-value time </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/2b4943736d68/css-env-1/Overview.bs#l17" title="2b4943736d68: [css-env-1] fix bikeshed errors">jackalmage@21013</a> </td> <td class="lineno"> <a href="#l17" id="l17"> 17</a> </td> <td class="source"></pre> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/2b4943736d68/css-env-1/Overview.bs#l18" title="2b4943736d68: [css-env-1] fix bikeshed errors">jackalmage@21013</a> </td> <td class="lineno"> <a href="#l18" id="l18"> 18</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l13" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l19" id="l19"> 19</a> </td> <td class="source">Introduction {#intro} </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l14" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l20" id="l20"> 20</a> </td> <td class="source">===================== </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l15" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l21" id="l21"> 21</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l16" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l22" id="l22"> 22</a> </td> <td class="source">The [[css-variables-1]] specification defined the concept of "cascading variables", </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l17" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l23" id="l23"> 23</a> </td> <td class="source">author-defined variables created from the value of [=custom properties=], </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l18" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l24" id="l24"> 24</a> </td> <td class="source">capable of being substituted into arbitrary other properties via the ''var()'' function. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l19" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l25" id="l25"> 25</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l20" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l26" id="l26"> 26</a> </td> <td class="source">This specification defines a related, but simpler, concept of [=environment variables=]. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l21" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l27" id="l27"> 27</a> </td> <td class="source">Unlike "cascading variables", </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/d311b4c7e390/css-env-1/Overview.bs#l28" title="d311b4c7e390: fix: typos across specs (#5992)">nschonni@26746</a> </td> <td class="lineno"> <a href="#l28" id="l28"> 28</a> </td> <td class="source">which can change throughout the page as their corresponding [=custom property=] takes on different values, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l23" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l29" id="l29"> 29</a> </td> <td class="source">an [=environment variable=] is "global" to a particular document-- </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l24" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l30" id="l30"> 30</a> </td> <td class="source">its value is the same everywhere. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l25" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l31" id="l31"> 31</a> </td> <td class="source">The ''env()'' function can then be used to substitute the value into arbitrary locations, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l26" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l32" id="l32"> 32</a> </td> <td class="source">similar to the ''var()'' function. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l27" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l33" id="l33"> 33</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l28" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l34" id="l34"> 34</a> </td> <td class="source">These "global" variables have both benefits and downsides versus cascading variables: </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l29" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l35" id="l35"> 35</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l30" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l36" id="l36"> 36</a> </td> <td class="source">* Many variables aren't meant to change over the course of a page; </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l31" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l37" id="l37"> 37</a> </td> <td class="source"> they set up themes, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l32" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l38" id="l38"> 38</a> </td> <td class="source"> or are helpers for particular numerical values. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l33" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l39" id="l39"> 39</a> </td> <td class="source"> Using [=environment variables=] instead of [=custom properties=] to define these </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l34" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l40" id="l40"> 40</a> </td> <td class="source"> communicates the proper intent, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l35" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l41" id="l41"> 41</a> </td> <td class="source"> which is good both for the author of the document </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l36" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l42" id="l42"> 42</a> </td> <td class="source"> (particularly when multiple people are collaborating on a single document), </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l37" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l43" id="l43"> 43</a> </td> <td class="source"> and for the user agent, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l38" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l44" id="l44"> 44</a> </td> <td class="source"> as it can store these variables in a more optimal way. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l39" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l45" id="l45"> 45</a> </td> <td class="source">* Because [=environment variables=] don't depend on the value of anything drawn from a particular element, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l40" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l46" id="l46"> 46</a> </td> <td class="source"> they can be used in places where there is no obvious element to draw from, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l41" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l47" id="l47"> 47</a> </td> <td class="source"> such as in ''@media'' rules, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l42" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l48" id="l48"> 48</a> </td> <td class="source"> where the ''var()'' function would not be valid. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/dfe5f345ac42/css-env-1/Overview.bs#l49" title="dfe5f345ac42: Revert "Revert "Merge branch 'main' of https://github.com/w3c/csswg-drafts into main""">dbaron@27061</a> </td> <td class="lineno"> <a href="#l49" id="l49"> 49</a> </td> <td class="source">* Information from the user agent itself, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l44" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l50" id="l50"> 50</a> </td> <td class="source"> such as the margin of the viewport to avoid laying out in by default </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l45" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l51" id="l51"> 51</a> </td> <td class="source"> (for example, to avoid overlapping a "notch" in the screen), </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l46" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l52" id="l52"> 52</a> </td> <td class="source"> can be retrieved via ''env()'', </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l47" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l53" id="l53"> 53</a> </td> <td class="source"> whereas the element-specific nature of ''var()'' was not an appropriate place to pipe that information in. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l48" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l54" id="l54"> 54</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/7f1a882f5ee6/css-env-1/Overview.bs#l55" title="7f1a882f5ee6: [css-env-1] Introduce environment variable indexing and viewport segment environment variables #5622 (#6474)">dlibby@27486</a> </td> <td class="lineno"> <a href="#l55" id="l55"> 55</a> </td> <td class="source">Most [=environment variables=] will have a single value at a time. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/7f1a882f5ee6/css-env-1/Overview.bs#l56" title="7f1a882f5ee6: [css-env-1] Introduce environment variable indexing and viewport segment environment variables #5622 (#6474)">dlibby@27486</a> </td> <td class="lineno"> <a href="#l56" id="l56"> 56</a> </td> <td class="source">Some, however, are "indexed", representing multiple values at once, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/7f1a882f5ee6/css-env-1/Overview.bs#l57" title="7f1a882f5ee6: [css-env-1] Introduce environment variable indexing and viewport segment environment variables #5622 (#6474)">dlibby@27486</a> </td> <td class="lineno"> <a href="#l57" id="l57"> 57</a> </td> <td class="source">such as the sizes and positions of several distinct panes of content </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/7f1a882f5ee6/css-env-1/Overview.bs#l58" title="7f1a882f5ee6: [css-env-1] Introduce environment variable indexing and viewport segment environment variables #5622 (#6474)">dlibby@27486</a> </td> <td class="lineno"> <a href="#l58" id="l58"> 58</a> </td> <td class="source">in the ''viewport-segment-*'' variables. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/7f1a882f5ee6/css-env-1/Overview.bs#l59" title="7f1a882f5ee6: [css-env-1] Introduce environment variable indexing and viewport segment environment variables #5622 (#6474)">dlibby@27486</a> </td> <td class="lineno"> <a href="#l59" id="l59"> 59</a> </td> <td class="source">To refer to these indexed variables, one or more integers must be provided </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/7f1a882f5ee6/css-env-1/Overview.bs#l60" title="7f1a882f5ee6: [css-env-1] Introduce environment variable indexing and viewport segment environment variables #5622 (#6474)">dlibby@27486</a> </td> <td class="lineno"> <a href="#l60" id="l60"> 60</a> </td> <td class="source">alongside the variable name, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/7f1a882f5ee6/css-env-1/Overview.bs#l61" title="7f1a882f5ee6: [css-env-1] Introduce environment variable indexing and viewport segment environment variables #5622 (#6474)">dlibby@27486</a> </td> <td class="lineno"> <a href="#l61" id="l61"> 61</a> </td> <td class="source">like ''viewport-segment-width 1 0'', </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/7f1a882f5ee6/css-env-1/Overview.bs#l62" title="7f1a882f5ee6: [css-env-1] Introduce environment variable indexing and viewport segment environment variables #5622 (#6474)">dlibby@27486</a> </td> <td class="lineno"> <a href="#l62" id="l62"> 62</a> </td> <td class="source">to select a single value from the list or grid of possibilities, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/7f1a882f5ee6/css-env-1/Overview.bs#l63" title="7f1a882f5ee6: [css-env-1] Introduce environment variable indexing and viewport segment environment variables #5622 (#6474)">dlibby@27486</a> </td> <td class="lineno"> <a href="#l63" id="l63"> 63</a> </td> <td class="source">similar to selecting one element from a list in a traditional programming language </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/7f1a882f5ee6/css-env-1/Overview.bs#l64" title="7f1a882f5ee6: [css-env-1] Introduce environment variable indexing and viewport segment environment variables #5622 (#6474)">dlibby@27486</a> </td> <td class="lineno"> <a href="#l64" id="l64"> 64</a> </td> <td class="source">with a syntax like <code>values[0]</code>. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/7f1a882f5ee6/css-env-1/Overview.bs#l65" title="7f1a882f5ee6: [css-env-1] Introduce environment variable indexing and viewport segment environment variables #5622 (#6474)">dlibby@27486</a> </td> <td class="lineno"> <a href="#l65" id="l65"> 65</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l49" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l66" id="l66"> 66</a> </td> <td class="source">Environment Variables {#environment} </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l50" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l67" id="l67"> 67</a> </td> <td class="source">==================================== </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l51" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l68" id="l68"> 68</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/dd8c357f21ed/css-env-1/Overview.bs#l69" title="dd8c357f21ed: [css-anchor-position] Define that env() flips its variable according to the try tactic. #10422">jackalmage@31517</a> </td> <td class="lineno"> <a href="#l69" id="l69"> 69</a> </td> <td class="source">A CSS <dfn export for=CSS>environment variable</dfn> is a name associated with a <<declaration-value>> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l53" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l70" id="l70"> 70</a> </td> <td class="source">(a sequence of zero more CSS tokens, with almost no restrictions on what tokens can exist), </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l54" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l71" id="l71"> 71</a> </td> <td class="source">similar to a [=custom property=]. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/dfe5f345ac42/css-env-1/Overview.bs#l61" title="dfe5f345ac42: Revert "Revert "Merge branch 'main' of https://github.com/w3c/csswg-drafts into main""">dbaron@27061</a> </td> <td class="lineno"> <a href="#l72" id="l72"> 72</a> </td> <td class="source">[=Environment variables=] can be defined by the user agent, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l56" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l73" id="l73"> 73</a> </td> <td class="source">or by the user. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l57" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l74" id="l74"> 74</a> </td> <td class="source">(In the latter case, the names are <<custom-property-name>>s, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l58" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l75" id="l75"> 75</a> </td> <td class="source">and start with `--` per standard for custom identifiers.) </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l59" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l76" id="l76"> 76</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l60" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l77" id="l77"> 77</a> </td> <td class="source">Issue: Is the set of UA-defined [=environment variables=] visible to script? </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l61" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l78" id="l78"> 78</a> </td> <td class="source">If so, define an API on {{Document}} to expose them. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l62" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l79" id="l79"> 79</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l63" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l80" id="l80"> 80</a> </td> <td class="source">Issue: Define how authors can add [=environment variables=], </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l64" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l81" id="l81"> 81</a> </td> <td class="source">preferably both via JS </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l65" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l82" id="l82"> 82</a> </td> <td class="source">and via CSS. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l66" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l83" id="l83"> 83</a> </td> <td class="source">Note that mixing CSS rules and JS-defined stuff can easily get messy, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l67" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l84" id="l84"> 84</a> </td> <td class="source">as demonstrated by CSSFontFaceRule vs FontFace... </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l68" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l85" id="l85"> 85</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/6cd6dd54649d/css-env-1/Overview.bs#l75" title="6cd6dd54649d: [css-env-1] Per WG resolution, the set of supported UA-defined variables is *not* open-ended, and they should all be listed in the spec.">jackalmage@21496</a> </td> <td class="lineno"> <a href="#l86" id="l86"> 86</a> </td> <td class="source">The following UA-defined [=environment variables=] are officially defined and must be supported. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/6cd6dd54649d/css-env-1/Overview.bs#l76" title="6cd6dd54649d: [css-env-1] Per WG resolution, the set of supported UA-defined variables is *not* open-ended, and they should all be listed in the spec.">jackalmage@21496</a> </td> <td class="lineno"> <a href="#l87" id="l87"> 87</a> </td> <td class="source">Additional UA-defined [=environment variables=] *must not* be supported </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/6cd6dd54649d/css-env-1/Overview.bs#l77" title="6cd6dd54649d: [css-env-1] Per WG resolution, the set of supported UA-defined variables is *not* open-ended, and they should all be listed in the spec.">jackalmage@21496</a> </td> <td class="lineno"> <a href="#l88" id="l88"> 88</a> </td> <td class="source">unless/until they are added to this list. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l71" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l89" id="l89"> 89</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/6cd6dd54649d/css-env-1/Overview.bs#l79" title="6cd6dd54649d: [css-env-1] Per WG resolution, the set of supported UA-defined variables is *not* open-ended, and they should all be listed in the spec.">jackalmage@21496</a> </td> <td class="lineno"> <a href="#l90" id="l90"> 90</a> </td> <td class="source"><index type=value for=env()></index> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l73" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l91" id="l91"> 91</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/1e02d243e46e/css-env-1/Overview.bs#l80" title="1e02d243e46e: [css-env-1] Define safe area inset variables #2629">beccahughes@21309</a> </td> <td class="lineno"> <a href="#l92" id="l92"> 92</a> </td> <td class="source">Safe area inset variables {#safe-area-insets} </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/1e02d243e46e/css-env-1/Overview.bs#l81" title="1e02d243e46e: [css-env-1] Define safe area inset variables #2629">beccahughes@21309</a> </td> <td class="lineno"> <a href="#l93" id="l93"> 93</a> </td> <td class="source">------------------------------------------------------------------ </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/1e02d243e46e/css-env-1/Overview.bs#l82" title="1e02d243e46e: [css-env-1] Define safe area inset variables #2629">beccahughes@21309</a> </td> <td class="lineno"> <a href="#l94" id="l94"> 94</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/6cd6dd54649d/css-env-1/Overview.bs#l84" title="6cd6dd54649d: [css-env-1] Per WG resolution, the set of supported UA-defined variables is *not* open-ended, and they should all be listed in the spec.">jackalmage@21496</a> </td> <td class="lineno"> <a href="#l95" id="l95"> 95</a> </td> <td class="source"><table dfn-type=value dfn-for="env()"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/1e02d243e46e/css-env-1/Overview.bs#l84" title="1e02d243e46e: [css-env-1] Define safe area inset variables #2629">beccahughes@21309</a> </td> <td class="lineno"> <a href="#l96" id="l96"> 96</a> </td> <td class="source"> <tr> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/6cd6dd54649d/css-env-1/Overview.bs#l86" title="6cd6dd54649d: [css-env-1] Per WG resolution, the set of supported UA-defined variables is *not* open-ended, and they should all be listed in the spec.">jackalmage@21496</a> </td> <td class="lineno"> <a href="#l97" id="l97"> 97</a> </td> <td class="source"> <th>Name </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/6cd6dd54649d/css-env-1/Overview.bs#l87" title="6cd6dd54649d: [css-env-1] Per WG resolution, the set of supported UA-defined variables is *not* open-ended, and they should all be listed in the spec.">jackalmage@21496</a> </td> <td class="lineno"> <a href="#l98" id="l98"> 98</a> </td> <td class="source"> <th>Value </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/7f1a882f5ee6/css-env-1/Overview.bs#l99" title="7f1a882f5ee6: [css-env-1] Introduce environment variable indexing and viewport segment environment variables #5622 (#6474)">dlibby@27486</a> </td> <td class="lineno"> <a href="#l99" id="l99"> 99</a> </td> <td class="source"> <th>Number of dimensions </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/1e02d243e46e/css-env-1/Overview.bs#l89" title="1e02d243e46e: [css-env-1] Define safe area inset variables #2629">beccahughes@21309</a> </td> <td class="lineno"> <a href="#l100" id="l100"> 100</a> </td> <td class="source"> <tr> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/6cd6dd54649d/css-env-1/Overview.bs#l89" title="6cd6dd54649d: [css-env-1] Per WG resolution, the set of supported UA-defined variables is *not* open-ended, and they should all be listed in the spec.">jackalmage@21496</a> </td> <td class="lineno"> <a href="#l101" id="l101"> 101</a> </td> <td class="source"> <td><dfn>safe-area-inset-top</dfn> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/6cd6dd54649d/css-env-1/Overview.bs#l90" title="6cd6dd54649d: [css-env-1] Per WG resolution, the set of supported UA-defined variables is *not* open-ended, and they should all be listed in the spec.">jackalmage@21496</a> </td> <td class="lineno"> <a href="#l102" id="l102"> 102</a> </td> <td class="source"> <td><<length>> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/7f1a882f5ee6/css-env-1/Overview.bs#l103" title="7f1a882f5ee6: [css-env-1] Introduce environment variable indexing and viewport segment environment variables #5622 (#6474)">dlibby@27486</a> </td> <td class="lineno"> <a href="#l103" id="l103"> 103</a> </td> <td class="source"> <td>0 (scalar) </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/1e02d243e46e/css-env-1/Overview.bs#l94" title="1e02d243e46e: [css-env-1] Define safe area inset variables #2629">beccahughes@21309</a> </td> <td class="lineno"> <a href="#l104" id="l104"> 104</a> </td> <td class="source"> <tr> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/6cd6dd54649d/css-env-1/Overview.bs#l92" title="6cd6dd54649d: [css-env-1] Per WG resolution, the set of supported UA-defined variables is *not* open-ended, and they should all be listed in the spec.">jackalmage@21496</a> </td> <td class="lineno"> <a href="#l105" id="l105"> 105</a> </td> <td class="source"> <td><dfn>safe-area-inset-right</dfn> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/6cd6dd54649d/css-env-1/Overview.bs#l93" title="6cd6dd54649d: [css-env-1] Per WG resolution, the set of supported UA-defined variables is *not* open-ended, and they should all be listed in the spec.">jackalmage@21496</a> </td> <td class="lineno"> <a href="#l106" id="l106"> 106</a> </td> <td class="source"> <td><<length>> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/7f1a882f5ee6/css-env-1/Overview.bs#l107" title="7f1a882f5ee6: [css-env-1] Introduce environment variable indexing and viewport segment environment variables #5622 (#6474)">dlibby@27486</a> </td> <td class="lineno"> <a href="#l107" id="l107"> 107</a> </td> <td class="source"> <td>0 (scalar) </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/1e02d243e46e/css-env-1/Overview.bs#l99" title="1e02d243e46e: [css-env-1] Define safe area inset variables #2629">beccahughes@21309</a> </td> <td class="lineno"> <a href="#l108" id="l108"> 108</a> </td> <td class="source"> <tr> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/6cd6dd54649d/css-env-1/Overview.bs#l95" title="6cd6dd54649d: [css-env-1] Per WG resolution, the set of supported UA-defined variables is *not* open-ended, and they should all be listed in the spec.">jackalmage@21496</a> </td> <td class="lineno"> <a href="#l109" id="l109"> 109</a> </td> <td class="source"> <td><dfn>safe-area-inset-bottom</dfn> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/6cd6dd54649d/css-env-1/Overview.bs#l96" title="6cd6dd54649d: [css-env-1] Per WG resolution, the set of supported UA-defined variables is *not* open-ended, and they should all be listed in the spec.">jackalmage@21496</a> </td> <td class="lineno"> <a href="#l110" id="l110"> 110</a> </td> <td class="source"> <td><<length>> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/7f1a882f5ee6/css-env-1/Overview.bs#l111" title="7f1a882f5ee6: [css-env-1] Introduce environment variable indexing and viewport segment environment variables #5622 (#6474)">dlibby@27486</a> </td> <td class="lineno"> <a href="#l111" id="l111"> 111</a> </td> <td class="source"> <td>0 (scalar) </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/1e02d243e46e/css-env-1/Overview.bs#l104" title="1e02d243e46e: [css-env-1] Define safe area inset variables #2629">beccahughes@21309</a> </td> <td class="lineno"> <a href="#l112" id="l112"> 112</a> </td> <td class="source"> <tr> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/6cd6dd54649d/css-env-1/Overview.bs#l98" title="6cd6dd54649d: [css-env-1] Per WG resolution, the set of supported UA-defined variables is *not* open-ended, and they should all be listed in the spec.">jackalmage@21496</a> </td> <td class="lineno"> <a href="#l113" id="l113"> 113</a> </td> <td class="source"> <td><dfn>safe-area-inset-left</dfn> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/6cd6dd54649d/css-env-1/Overview.bs#l99" title="6cd6dd54649d: [css-env-1] Per WG resolution, the set of supported UA-defined variables is *not* open-ended, and they should all be listed in the spec.">jackalmage@21496</a> </td> <td class="lineno"> <a href="#l114" id="l114"> 114</a> </td> <td class="source"> <td><<length>> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/7f1a882f5ee6/css-env-1/Overview.bs#l115" title="7f1a882f5ee6: [css-env-1] Introduce environment variable indexing and viewport segment environment variables #5622 (#6474)">dlibby@27486</a> </td> <td class="lineno"> <a href="#l115" id="l115"> 115</a> </td> <td class="source"> <td>0 (scalar) </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/1e02d243e46e/css-env-1/Overview.bs#l109" title="1e02d243e46e: [css-env-1] Define safe area inset variables #2629">beccahughes@21309</a> </td> <td class="lineno"> <a href="#l116" id="l116"> 116</a> </td> <td class="source"></table> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/1e02d243e46e/css-env-1/Overview.bs#l110" title="1e02d243e46e: [css-env-1] Define safe area inset variables #2629">beccahughes@21309</a> </td> <td class="lineno"> <a href="#l117" id="l117"> 117</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/1e02d243e46e/css-env-1/Overview.bs#l111" title="1e02d243e46e: [css-env-1] Define safe area inset variables #2629">beccahughes@21309</a> </td> <td class="lineno"> <a href="#l118" id="l118"> 118</a> </td> <td class="source">The safe area insets are four [=environment variables=] that define a rectangle by </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/1e02d243e46e/css-env-1/Overview.bs#l112" title="1e02d243e46e: [css-env-1] Define safe area inset variables #2629">beccahughes@21309</a> </td> <td class="lineno"> <a href="#l119" id="l119"> 119</a> </td> <td class="source">its top, right, bottom, and left insets from the edge of the viewport. For rectangular </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/1e02d243e46e/css-env-1/Overview.bs#l113" title="1e02d243e46e: [css-env-1] Define safe area inset variables #2629">beccahughes@21309</a> </td> <td class="lineno"> <a href="#l120" id="l120"> 120</a> </td> <td class="source">displays, these must all be zero, but for nonrectangular displays they must form a </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/1e02d243e46e/css-env-1/Overview.bs#l114" title="1e02d243e46e: [css-env-1] Define safe area inset variables #2629">beccahughes@21309</a> </td> <td class="lineno"> <a href="#l121" id="l121"> 121</a> </td> <td class="source">rectangle, chosen by the user agent, such that all content inside the rectangle is </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/1e02d243e46e/css-env-1/Overview.bs#l115" title="1e02d243e46e: [css-env-1] Define safe area inset variables #2629">beccahughes@21309</a> </td> <td class="lineno"> <a href="#l122" id="l122"> 122</a> </td> <td class="source">visible, and such that reducing any of the insets would cause some content inside of </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/1e02d243e46e/css-env-1/Overview.bs#l116" title="1e02d243e46e: [css-env-1] Define safe area inset variables #2629">beccahughes@21309</a> </td> <td class="lineno"> <a href="#l123" id="l123"> 123</a> </td> <td class="source">the rectangle to be invisible due to the nonrectangular nature of the display. This </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/1e02d243e46e/css-env-1/Overview.bs#l117" title="1e02d243e46e: [css-env-1] Define safe area inset variables #2629">beccahughes@21309</a> </td> <td class="lineno"> <a href="#l124" id="l124"> 124</a> </td> <td class="source">allows authors to limit the layout of essential content to the space inside of the </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/1e02d243e46e/css-env-1/Overview.bs#l118" title="1e02d243e46e: [css-env-1] Define safe area inset variables #2629">beccahughes@21309</a> </td> <td class="lineno"> <a href="#l125" id="l125"> 125</a> </td> <td class="source">safe area rectangle. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/1e02d243e46e/css-env-1/Overview.bs#l119" title="1e02d243e46e: [css-env-1] Define safe area inset variables #2629">beccahughes@21309</a> </td> <td class="lineno"> <a href="#l126" id="l126"> 126</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/7f1a882f5ee6/css-env-1/Overview.bs#l127" title="7f1a882f5ee6: [css-env-1] Introduce environment variable indexing and viewport segment environment variables #5622 (#6474)">dlibby@27486</a> </td> <td class="lineno"> <a href="#l127" id="l127"> 127</a> </td> <td class="source"><index type=value for=env()></index> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/7f1a882f5ee6/css-env-1/Overview.bs#l128" title="7f1a882f5ee6: [css-env-1] Introduce environment variable indexing and viewport segment environment variables #5622 (#6474)">dlibby@27486</a> </td> <td class="lineno"> <a href="#l128" id="l128"> 128</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/7f1a882f5ee6/css-env-1/Overview.bs#l129" title="7f1a882f5ee6: [css-env-1] Introduce environment variable indexing and viewport segment environment variables #5622 (#6474)">dlibby@27486</a> </td> <td class="lineno"> <a href="#l129" id="l129"> 129</a> </td> <td class="source">Viewport segment variables {#viewport-segments} </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/7f1a882f5ee6/css-env-1/Overview.bs#l130" title="7f1a882f5ee6: [css-env-1] Introduce environment variable indexing and viewport segment environment variables #5622 (#6474)">dlibby@27486</a> </td> <td class="lineno"> <a href="#l130" id="l130"> 130</a> </td> <td class="source">------------------------------------------------------------------ </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/7f1a882f5ee6/css-env-1/Overview.bs#l131" title="7f1a882f5ee6: [css-env-1] Introduce environment variable indexing and viewport segment environment variables #5622 (#6474)">dlibby@27486</a> </td> <td class="lineno"> <a href="#l131" id="l131"> 131</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/7f1a882f5ee6/css-env-1/Overview.bs#l132" title="7f1a882f5ee6: [css-env-1] Introduce environment variable indexing and viewport segment environment variables #5622 (#6474)">dlibby@27486</a> </td> <td class="lineno"> <a href="#l132" id="l132"> 132</a> </td> <td class="source"><table dfn-type=value dfn-for="env()"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/7f1a882f5ee6/css-env-1/Overview.bs#l133" title="7f1a882f5ee6: [css-env-1] Introduce environment variable indexing and viewport segment environment variables #5622 (#6474)">dlibby@27486</a> </td> <td class="lineno"> <a href="#l133" id="l133"> 133</a> </td> <td class="source"> <tr> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/7f1a882f5ee6/css-env-1/Overview.bs#l134" title="7f1a882f5ee6: [css-env-1] Introduce environment variable indexing and viewport segment environment variables #5622 (#6474)">dlibby@27486</a> </td> <td class="lineno"> <a href="#l134" id="l134"> 134</a> </td> <td class="source"> <th>Name </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/7f1a882f5ee6/css-env-1/Overview.bs#l135" title="7f1a882f5ee6: [css-env-1] Introduce environment variable indexing and viewport segment environment variables #5622 (#6474)">dlibby@27486</a> </td> <td class="lineno"> <a href="#l135" id="l135"> 135</a> </td> <td class="source"> <th>Value </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/7f1a882f5ee6/css-env-1/Overview.bs#l136" title="7f1a882f5ee6: [css-env-1] Introduce environment variable indexing and viewport segment environment variables #5622 (#6474)">dlibby@27486</a> </td> <td class="lineno"> <a href="#l136" id="l136"> 136</a> </td> <td class="source"> <th>Number of dimensions </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/7f1a882f5ee6/css-env-1/Overview.bs#l137" title="7f1a882f5ee6: [css-env-1] Introduce environment variable indexing and viewport segment environment variables #5622 (#6474)">dlibby@27486</a> </td> <td class="lineno"> <a href="#l137" id="l137"> 137</a> </td> <td class="source"> <tr> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/7f1a882f5ee6/css-env-1/Overview.bs#l138" title="7f1a882f5ee6: [css-env-1] Introduce environment variable indexing and viewport segment environment variables #5622 (#6474)">dlibby@27486</a> </td> <td class="lineno"> <a href="#l138" id="l138"> 138</a> </td> <td class="source"> <td><dfn>viewport-segment-width</dfn> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/7f1a882f5ee6/css-env-1/Overview.bs#l139" title="7f1a882f5ee6: [css-env-1] Introduce environment variable indexing and viewport segment environment variables #5622 (#6474)">dlibby@27486</a> </td> <td class="lineno"> <a href="#l139" id="l139"> 139</a> </td> <td class="source"> <td><<length>> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/7f1a882f5ee6/css-env-1/Overview.bs#l140" title="7f1a882f5ee6: [css-env-1] Introduce environment variable indexing and viewport segment environment variables #5622 (#6474)">dlibby@27486</a> </td> <td class="lineno"> <a href="#l140" id="l140"> 140</a> </td> <td class="source"> <td>2 </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/7f1a882f5ee6/css-env-1/Overview.bs#l141" title="7f1a882f5ee6: [css-env-1] Introduce environment variable indexing and viewport segment environment variables #5622 (#6474)">dlibby@27486</a> </td> <td class="lineno"> <a href="#l141" id="l141"> 141</a> </td> <td class="source"> <tr> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/7f1a882f5ee6/css-env-1/Overview.bs#l142" title="7f1a882f5ee6: [css-env-1] Introduce environment variable indexing and viewport segment environment variables #5622 (#6474)">dlibby@27486</a> </td> <td class="lineno"> <a href="#l142" id="l142"> 142</a> </td> <td class="source"> <td><dfn>viewport-segment-height</dfn> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/7f1a882f5ee6/css-env-1/Overview.bs#l143" title="7f1a882f5ee6: [css-env-1] Introduce environment variable indexing and viewport segment environment variables #5622 (#6474)">dlibby@27486</a> </td> <td class="lineno"> <a href="#l143" id="l143"> 143</a> </td> <td class="source"> <td><<length>> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/7f1a882f5ee6/css-env-1/Overview.bs#l144" title="7f1a882f5ee6: [css-env-1] Introduce environment variable indexing and viewport segment environment variables #5622 (#6474)">dlibby@27486</a> </td> <td class="lineno"> <a href="#l144" id="l144"> 144</a> </td> <td class="source"> <td>2 </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/7f1a882f5ee6/css-env-1/Overview.bs#l145" title="7f1a882f5ee6: [css-env-1] Introduce environment variable indexing and viewport segment environment variables #5622 (#6474)">dlibby@27486</a> </td> <td class="lineno"> <a href="#l145" id="l145"> 145</a> </td> <td class="source"> <tr> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/7f1a882f5ee6/css-env-1/Overview.bs#l146" title="7f1a882f5ee6: [css-env-1] Introduce environment variable indexing and viewport segment environment variables #5622 (#6474)">dlibby@27486</a> </td> <td class="lineno"> <a href="#l146" id="l146"> 146</a> </td> <td class="source"> <td><dfn>viewport-segment-top</dfn> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/7f1a882f5ee6/css-env-1/Overview.bs#l147" title="7f1a882f5ee6: [css-env-1] Introduce environment variable indexing and viewport segment environment variables #5622 (#6474)">dlibby@27486</a> </td> <td class="lineno"> <a href="#l147" id="l147"> 147</a> </td> <td class="source"> <td><<length>> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/7f1a882f5ee6/css-env-1/Overview.bs#l148" title="7f1a882f5ee6: [css-env-1] Introduce environment variable indexing and viewport segment environment variables #5622 (#6474)">dlibby@27486</a> </td> <td class="lineno"> <a href="#l148" id="l148"> 148</a> </td> <td class="source"> <td>2 </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/7f1a882f5ee6/css-env-1/Overview.bs#l149" title="7f1a882f5ee6: [css-env-1] Introduce environment variable indexing and viewport segment environment variables #5622 (#6474)">dlibby@27486</a> </td> <td class="lineno"> <a href="#l149" id="l149"> 149</a> </td> <td class="source"> <tr> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/7f1a882f5ee6/css-env-1/Overview.bs#l150" title="7f1a882f5ee6: [css-env-1] Introduce environment variable indexing and viewport segment environment variables #5622 (#6474)">dlibby@27486</a> </td> <td class="lineno"> <a href="#l150" id="l150"> 150</a> </td> <td class="source"> <td><dfn>viewport-segment-left</dfn> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/7f1a882f5ee6/css-env-1/Overview.bs#l151" title="7f1a882f5ee6: [css-env-1] Introduce environment variable indexing and viewport segment environment variables #5622 (#6474)">dlibby@27486</a> </td> <td class="lineno"> <a href="#l151" id="l151"> 151</a> </td> <td class="source"> <td><<length>> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/7f1a882f5ee6/css-env-1/Overview.bs#l152" title="7f1a882f5ee6: [css-env-1] Introduce environment variable indexing and viewport segment environment variables #5622 (#6474)">dlibby@27486</a> </td> <td class="lineno"> <a href="#l152" id="l152"> 152</a> </td> <td class="source"> <td>2 </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/7f1a882f5ee6/css-env-1/Overview.bs#l153" title="7f1a882f5ee6: [css-env-1] Introduce environment variable indexing and viewport segment environment variables #5622 (#6474)">dlibby@27486</a> </td> <td class="lineno"> <a href="#l153" id="l153"> 153</a> </td> <td class="source"> <tr> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/7f1a882f5ee6/css-env-1/Overview.bs#l154" title="7f1a882f5ee6: [css-env-1] Introduce environment variable indexing and viewport segment environment variables #5622 (#6474)">dlibby@27486</a> </td> <td class="lineno"> <a href="#l154" id="l154"> 154</a> </td> <td class="source"> <td><dfn>viewport-segment-bottom</dfn> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/7f1a882f5ee6/css-env-1/Overview.bs#l155" title="7f1a882f5ee6: [css-env-1] Introduce environment variable indexing and viewport segment environment variables #5622 (#6474)">dlibby@27486</a> </td> <td class="lineno"> <a href="#l155" id="l155"> 155</a> </td> <td class="source"> <td><<length>> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/7f1a882f5ee6/css-env-1/Overview.bs#l156" title="7f1a882f5ee6: [css-env-1] Introduce environment variable indexing and viewport segment environment variables #5622 (#6474)">dlibby@27486</a> </td> <td class="lineno"> <a href="#l156" id="l156"> 156</a> </td> <td class="source"> <td>2 </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/7f1a882f5ee6/css-env-1/Overview.bs#l157" title="7f1a882f5ee6: [css-env-1] Introduce environment variable indexing and viewport segment environment variables #5622 (#6474)">dlibby@27486</a> </td> <td class="lineno"> <a href="#l157" id="l157"> 157</a> </td> <td class="source"> <tr> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/7f1a882f5ee6/css-env-1/Overview.bs#l158" title="7f1a882f5ee6: [css-env-1] Introduce environment variable indexing and viewport segment environment variables #5622 (#6474)">dlibby@27486</a> </td> <td class="lineno"> <a href="#l158" id="l158"> 158</a> </td> <td class="source"> <td><dfn>viewport-segment-right</dfn> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/7f1a882f5ee6/css-env-1/Overview.bs#l159" title="7f1a882f5ee6: [css-env-1] Introduce environment variable indexing and viewport segment environment variables #5622 (#6474)">dlibby@27486</a> </td> <td class="lineno"> <a href="#l159" id="l159"> 159</a> </td> <td class="source"> <td><<length>> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/7f1a882f5ee6/css-env-1/Overview.bs#l160" title="7f1a882f5ee6: [css-env-1] Introduce environment variable indexing and viewport segment environment variables #5622 (#6474)">dlibby@27486</a> </td> <td class="lineno"> <a href="#l160" id="l160"> 160</a> </td> <td class="source"> <td>2 </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/7f1a882f5ee6/css-env-1/Overview.bs#l161" title="7f1a882f5ee6: [css-env-1] Introduce environment variable indexing and viewport segment environment variables #5622 (#6474)">dlibby@27486</a> </td> <td class="lineno"> <a href="#l161" id="l161"> 161</a> </td> <td class="source"></table> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/7f1a882f5ee6/css-env-1/Overview.bs#l162" title="7f1a882f5ee6: [css-env-1] Introduce environment variable indexing and viewport segment environment variables #5622 (#6474)">dlibby@27486</a> </td> <td class="lineno"> <a href="#l162" id="l162"> 162</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/7f1a882f5ee6/css-env-1/Overview.bs#l163" title="7f1a882f5ee6: [css-env-1] Introduce environment variable indexing and viewport segment environment variables #5622 (#6474)">dlibby@27486</a> </td> <td class="lineno"> <a href="#l163" id="l163"> 163</a> </td> <td class="source">The viewport segments are [=environment variables=] that define the position and </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/7f1a882f5ee6/css-env-1/Overview.bs#l164" title="7f1a882f5ee6: [css-env-1] Introduce environment variable indexing and viewport segment environment variables #5622 (#6474)">dlibby@27486</a> </td> <td class="lineno"> <a href="#l164" id="l164"> 164</a> </td> <td class="source">dimensions of a logically separate region of the viewport. Viewport </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/7f1a882f5ee6/css-env-1/Overview.bs#l165" title="7f1a882f5ee6: [css-env-1] Introduce environment variable indexing and viewport segment environment variables #5622 (#6474)">dlibby@27486</a> </td> <td class="lineno"> <a href="#l165" id="l165"> 165</a> </td> <td class="source">segments are created when the viewport is split by one or more hardware features </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/7f1a882f5ee6/css-env-1/Overview.bs#l166" title="7f1a882f5ee6: [css-env-1] Introduce environment variable indexing and viewport segment environment variables #5622 (#6474)">dlibby@27486</a> </td> <td class="lineno"> <a href="#l166" id="l166"> 166</a> </td> <td class="source">(such as a fold or a hinge between separate displays) that act as a divider; </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/7f1a882f5ee6/css-env-1/Overview.bs#l167" title="7f1a882f5ee6: [css-env-1] Introduce environment variable indexing and viewport segment environment variables #5622 (#6474)">dlibby@27486</a> </td> <td class="lineno"> <a href="#l167" id="l167"> 167</a> </td> <td class="source">segments are the regions of the viewport that can be treated as logically distinct </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/7f1a882f5ee6/css-env-1/Overview.bs#l168" title="7f1a882f5ee6: [css-env-1] Introduce environment variable indexing and viewport segment environment variables #5622 (#6474)">dlibby@27486</a> </td> <td class="lineno"> <a href="#l168" id="l168"> 168</a> </td> <td class="source">by the author. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/7f1a882f5ee6/css-env-1/Overview.bs#l169" title="7f1a882f5ee6: [css-env-1] Introduce environment variable indexing and viewport segment environment variables #5622 (#6474)">dlibby@27486</a> </td> <td class="lineno"> <a href="#l169" id="l169"> 169</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/7f1a882f5ee6/css-env-1/Overview.bs#l170" title="7f1a882f5ee6: [css-env-1] Introduce environment variable indexing and viewport segment environment variables #5622 (#6474)">dlibby@27486</a> </td> <td class="lineno"> <a href="#l170" id="l170"> 170</a> </td> <td class="source">The viewport segment [=environment variables=] have two dimensions, which represent </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/7f1a882f5ee6/css-env-1/Overview.bs#l171" title="7f1a882f5ee6: [css-env-1] Introduce environment variable indexing and viewport segment environment variables #5622 (#6474)">dlibby@27486</a> </td> <td class="lineno"> <a href="#l171" id="l171"> 171</a> </td> <td class="source">the x and y position, respectively, in the two dimensional grid created by the </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/7f1a882f5ee6/css-env-1/Overview.bs#l172" title="7f1a882f5ee6: [css-env-1] Introduce environment variable indexing and viewport segment environment variables #5622 (#6474)">dlibby@27486</a> </td> <td class="lineno"> <a href="#l172" id="l172"> 172</a> </td> <td class="source">hardware features separating the segments. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/7f1a882f5ee6/css-env-1/Overview.bs#l173" title="7f1a882f5ee6: [css-env-1] Introduce environment variable indexing and viewport segment environment variables #5622 (#6474)">dlibby@27486</a> </td> <td class="lineno"> <a href="#l173" id="l173"> 173</a> </td> <td class="source">Segments along the left edge have x position ''0'', those in the next column to the right have x position ''1'', etc. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/7f1a882f5ee6/css-env-1/Overview.bs#l174" title="7f1a882f5ee6: [css-env-1] Introduce environment variable indexing and viewport segment environment variables #5622 (#6474)">dlibby@27486</a> </td> <td class="lineno"> <a href="#l174" id="l174"> 174</a> </td> <td class="source">Similarly, segments along the top edge have y position ''0'', etc. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/7f1a882f5ee6/css-env-1/Overview.bs#l175" title="7f1a882f5ee6: [css-env-1] Introduce environment variable indexing and viewport segment environment variables #5622 (#6474)">dlibby@27486</a> </td> <td class="lineno"> <a href="#l175" id="l175"> 175</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/7f1a882f5ee6/css-env-1/Overview.bs#l176" title="7f1a882f5ee6: [css-env-1] Introduce environment variable indexing and viewport segment environment variables #5622 (#6474)">dlibby@27486</a> </td> <td class="lineno"> <a href="#l176" id="l176"> 176</a> </td> <td class="source">Note: In certain hardware configurations, the separator itself may occupy logical </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/7f1a882f5ee6/css-env-1/Overview.bs#l177" title="7f1a882f5ee6: [css-env-1] Introduce environment variable indexing and viewport segment environment variables #5622 (#6474)">dlibby@27486</a> </td> <td class="lineno"> <a href="#l177" id="l177"> 177</a> </td> <td class="source">space within the viewport. The dimensions of the separator can be computed by </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/7f1a882f5ee6/css-env-1/Overview.bs#l178" title="7f1a882f5ee6: [css-env-1] Introduce environment variable indexing and viewport segment environment variables #5622 (#6474)">dlibby@27486</a> </td> <td class="lineno"> <a href="#l178" id="l178"> 178</a> </td> <td class="source">calculating the area between the position of the viewport segments. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/7f1a882f5ee6/css-env-1/Overview.bs#l179" title="7f1a882f5ee6: [css-env-1] Introduce environment variable indexing and viewport segment environment variables #5622 (#6474)">dlibby@27486</a> </td> <td class="lineno"> <a href="#l179" id="l179"> 179</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/7f1a882f5ee6/css-env-1/Overview.bs#l180" title="7f1a882f5ee6: [css-env-1] Introduce environment variable indexing and viewport segment environment variables #5622 (#6474)">dlibby@27486</a> </td> <td class="lineno"> <a href="#l180" id="l180"> 180</a> </td> <td class="source"><div class="example"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/7f1a882f5ee6/css-env-1/Overview.bs#l181" title="7f1a882f5ee6: [css-env-1] Introduce environment variable indexing and viewport segment environment variables #5622 (#6474)">dlibby@27486</a> </td> <td class="lineno"> <a href="#l181" id="l181"> 181</a> </td> <td class="source"> When the viewport is split into two side-by-side segments, the viewport segment on </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/7f1a882f5ee6/css-env-1/Overview.bs#l182" title="7f1a882f5ee6: [css-env-1] Introduce environment variable indexing and viewport segment environment variables #5622 (#6474)">dlibby@27486</a> </td> <td class="lineno"> <a href="#l182" id="l182"> 182</a> </td> <td class="source"> the left would have indices (0, 0). It's width would be represented as </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/7f1a882f5ee6/css-env-1/Overview.bs#l183" title="7f1a882f5ee6: [css-env-1] Introduce environment variable indexing and viewport segment environment variables #5622 (#6474)">dlibby@27486</a> </td> <td class="lineno"> <a href="#l183" id="l183"> 183</a> </td> <td class="source"> ''env(viewport-segment-width 0 0, 300px)''. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/7f1a882f5ee6/css-env-1/Overview.bs#l184" title="7f1a882f5ee6: [css-env-1] Introduce environment variable indexing and viewport segment environment variables #5622 (#6474)">dlibby@27486</a> </td> <td class="lineno"> <a href="#l184" id="l184"> 184</a> </td> <td class="source"> The viewport segment on the right would have indices (1, 0). </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/7f1a882f5ee6/css-env-1/Overview.bs#l185" title="7f1a882f5ee6: [css-env-1] Introduce environment variable indexing and viewport segment environment variables #5622 (#6474)">dlibby@27486</a> </td> <td class="lineno"> <a href="#l185" id="l185"> 185</a> </td> <td class="source"> Similarly, for a viewport split into two vertical segments, the viewport segment </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/7f1a882f5ee6/css-env-1/Overview.bs#l186" title="7f1a882f5ee6: [css-env-1] Introduce environment variable indexing and viewport segment environment variables #5622 (#6474)">dlibby@27486</a> </td> <td class="lineno"> <a href="#l186" id="l186"> 186</a> </td> <td class="source"> on the top would have indices (0, 0) and the one on the bottom (0, 1). </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/7f1a882f5ee6/css-env-1/Overview.bs#l187" title="7f1a882f5ee6: [css-env-1] Introduce environment variable indexing and viewport segment environment variables #5622 (#6474)">dlibby@27486</a> </td> <td class="lineno"> <a href="#l187" id="l187"> 187</a> </td> <td class="source"></div> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/7f1a882f5ee6/css-env-1/Overview.bs#l188" title="7f1a882f5ee6: [css-env-1] Introduce environment variable indexing and viewport segment environment variables #5622 (#6474)">dlibby@27486</a> </td> <td class="lineno"> <a href="#l188" id="l188"> 188</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/7f1a882f5ee6/css-env-1/Overview.bs#l189" title="7f1a882f5ee6: [css-env-1] Introduce environment variable indexing and viewport segment environment variables #5622 (#6474)">dlibby@27486</a> </td> <td class="lineno"> <a href="#l189" id="l189"> 189</a> </td> <td class="source">These variables are only defined when there are at least two such segments. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/7f1a882f5ee6/css-env-1/Overview.bs#l190" title="7f1a882f5ee6: [css-env-1] Introduce environment variable indexing and viewport segment environment variables #5622 (#6474)">dlibby@27486</a> </td> <td class="lineno"> <a href="#l190" id="l190"> 190</a> </td> <td class="source">Viewport units should be used instead when there is no hardware feature </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/7f1a882f5ee6/css-env-1/Overview.bs#l191" title="7f1a882f5ee6: [css-env-1] Introduce environment variable indexing and viewport segment environment variables #5622 (#6474)">dlibby@27486</a> </td> <td class="lineno"> <a href="#l191" id="l191"> 191</a> </td> <td class="source">splitting the viewport, otherwise content will not display as intended when </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/7f1a882f5ee6/css-env-1/Overview.bs#l192" title="7f1a882f5ee6: [css-env-1] Introduce environment variable indexing and viewport segment environment variables #5622 (#6474)">dlibby@27486</a> </td> <td class="lineno"> <a href="#l192" id="l192"> 192</a> </td> <td class="source">viewed on a device with multiple segments. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/7f1a882f5ee6/css-env-1/Overview.bs#l193" title="7f1a882f5ee6: [css-env-1] Introduce environment variable indexing and viewport segment environment variables #5622 (#6474)">dlibby@27486</a> </td> <td class="lineno"> <a href="#l193" id="l193"> 193</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l74" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l194" id="l194"> 194</a> </td> <td class="source">Using Environment Variables: the ''env()'' notation {#env-function} </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l75" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l195" id="l195"> 195</a> </td> <td class="source">=================================================================== </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l76" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l196" id="l196"> 196</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l77" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l197" id="l197"> 197</a> </td> <td class="source">In order to substitute the value of an [=environment variable=] into a CSS context, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l78" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l198" id="l198"> 198</a> </td> <td class="source">use the ''env()'' function: </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l79" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l199" id="l199"> 199</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l80" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l200" id="l200"> 200</a> </td> <td class="source"><pre class=prod> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/7f1a882f5ee6/css-env-1/Overview.bs#l201" title="7f1a882f5ee6: [css-env-1] Introduce environment variable indexing and viewport segment environment variables #5622 (#6474)">dlibby@27486</a> </td> <td class="lineno"> <a href="#l201" id="l201"> 201</a> </td> <td class="source"> <dfn function>env()</dfn> = env( <<custom-ident>> <<integer [0,鈭瀅>>*, <<declaration-value>>? ) </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l82" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l202" id="l202"> 202</a> </td> <td class="source"></pre> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l83" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l203" id="l203"> 203</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l84" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l204" id="l204"> 204</a> </td> <td class="source">The ''env()'' function can be used in place of any part of a value in any property on any element, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l85" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l205" id="l205"> 205</a> </td> <td class="source">or any part of a value in any descriptor on any [=at-rule=], </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l86" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l206" id="l206"> 206</a> </td> <td class="source">and in several other places where CSS values are allowed. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l87" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l207" id="l207"> 207</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l88" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l208" id="l208"> 208</a> </td> <td class="source"><div class=issue> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l89" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l209" id="l209"> 209</a> </td> <td class="source"> Define the full set of places ''env()'' can be used. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l90" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l210" id="l210"> 210</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l91" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l211" id="l211"> 211</a> </td> <td class="source"> * Should be able to replace any subset of MQ syntax, for example. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l92" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l212" id="l212"> 212</a> </td> <td class="source"> * Should be able to replace selectors, maybe? </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l93" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l213" id="l213"> 213</a> </td> <td class="source"> * Should it work on a rule level, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l94" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l214" id="l214"> 214</a> </td> <td class="source"> so you can insert arbitrary stuff into a rule, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l95" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l215" id="l215"> 215</a> </td> <td class="source"> like reusing a block of declarations? </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l96" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l216" id="l216"> 216</a> </td> <td class="source"></div> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l97" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l217" id="l217"> 217</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l98" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l218" id="l218"> 218</a> </td> <td class="source">The first argument to ''env()'' provides the name of an [=environment variable=] to be substituted. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/7f1a882f5ee6/css-env-1/Overview.bs#l219" title="7f1a882f5ee6: [css-env-1] Introduce environment variable indexing and viewport segment environment variables #5622 (#6474)">dlibby@27486</a> </td> <td class="lineno"> <a href="#l219" id="l219"> 219</a> </td> <td class="source">Following the first argument are integers that represent indices into the </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/7f1a882f5ee6/css-env-1/Overview.bs#l220" title="7f1a882f5ee6: [css-env-1] Introduce environment variable indexing and viewport segment environment variables #5622 (#6474)">dlibby@27486</a> </td> <td class="lineno"> <a href="#l220" id="l220"> 220</a> </td> <td class="source">dimensions of the [=environment variable=], if the provided name </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/7f1a882f5ee6/css-env-1/Overview.bs#l221" title="7f1a882f5ee6: [css-env-1] Introduce environment variable indexing and viewport segment environment variables #5622 (#6474)">dlibby@27486</a> </td> <td class="lineno"> <a href="#l221" id="l221"> 221</a> </td> <td class="source">represents an array-like [=environment variable=]. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/7f1a882f5ee6/css-env-1/Overview.bs#l222" title="7f1a882f5ee6: [css-env-1] Introduce environment variable indexing and viewport segment environment variables #5622 (#6474)">dlibby@27486</a> </td> <td class="lineno"> <a href="#l222" id="l222"> 222</a> </td> <td class="source">The argument after the comma, if provided, is a fallback value, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l100" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l223" id="l223"> 223</a> </td> <td class="source">which is used as the substitution value </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/2b4943736d68/css-env-1/Overview.bs#l107" title="2b4943736d68: [css-env-1] fix bikeshed errors">jackalmage@21013</a> </td> <td class="lineno"> <a href="#l224" id="l224"> 224</a> </td> <td class="source">when the referenced [=environment variable=] does not exist. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l102" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l225" id="l225"> 225</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l103" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l226" id="l226"> 226</a> </td> <td class="source">Note: The syntax of the fallback, like that of custom properties, allows commas. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l104" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l227" id="l227"> 227</a> </td> <td class="source">For example, ''env(foo, red, blue)'' defines a fallback of ''red, blue''; </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l105" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l228" id="l228"> 228</a> </td> <td class="source">that is, anything between the first comma and the end of the function is considered a fallback value. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l106" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l229" id="l229"> 229</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l107" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l230" id="l230"> 230</a> </td> <td class="source">If a property contains one or more ''env()'' functions, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l108" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l231" id="l231"> 231</a> </td> <td class="source">and those functions are syntactically valid, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l109" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l232" id="l232"> 232</a> </td> <td class="source">the entire property's grammar must be assumed to be valid at parse time. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l110" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l233" id="l233"> 233</a> </td> <td class="source">It is only syntax-checked at computed-time, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l111" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l234" id="l234"> 234</a> </td> <td class="source">after ''env()'' functions have been [=substituted=]. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l112" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l235" id="l235"> 235</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l113" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l236" id="l236"> 236</a> </td> <td class="source">If a descriptor contains one or more ''env()'' functions, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l114" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l237" id="l237"> 237</a> </td> <td class="source">and those functions are syntactically valid, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l115" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l238" id="l238"> 238</a> </td> <td class="source">the entire declaration's grammar must be assumed to be valid at parse time. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l116" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l239" id="l239"> 239</a> </td> <td class="source">It is only syntax-checked after ''env()'' functions have been [=substituted=]. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l117" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l240" id="l240"> 240</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l118" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l241" id="l241"> 241</a> </td> <td class="source"><div algorithm> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l119" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l242" id="l242"> 242</a> </td> <td class="source"> To <dfn export local-lt=substitute>substitute an env()</dfn> in a property or descriptor: </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l120" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l243" id="l243"> 243</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l121" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l244" id="l244"> 244</a> </td> <td class="source"> 1. If the name provided by the first argument of the ''env()'' function </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/7f1a882f5ee6/css-env-1/Overview.bs#l245" title="7f1a882f5ee6: [css-env-1] Introduce environment variable indexing and viewport segment environment variables #5622 (#6474)">dlibby@27486</a> </td> <td class="lineno"> <a href="#l245" id="l245"> 245</a> </td> <td class="source"> is a recognized [=environment variable=] name, the number of supplied integers </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/7f1a882f5ee6/css-env-1/Overview.bs#l246" title="7f1a882f5ee6: [css-env-1] Introduce environment variable indexing and viewport segment environment variables #5622 (#6474)">dlibby@27486</a> </td> <td class="lineno"> <a href="#l246" id="l246"> 246</a> </td> <td class="source"> matches the number of dimensions of the [=environment variable=] referenced </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/7f1a882f5ee6/css-env-1/Overview.bs#l247" title="7f1a882f5ee6: [css-env-1] Introduce environment variable indexing and viewport segment environment variables #5622 (#6474)">dlibby@27486</a> </td> <td class="lineno"> <a href="#l247" id="l247"> 247</a> </td> <td class="source"> by that name, and values of the indices correspond to a known sub-value, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l123" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l248" id="l248"> 248</a> </td> <td class="source"> replace the ''env()'' function by the value of the named [=environment variable=]. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l124" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l249" id="l249"> 249</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l125" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l250" id="l250"> 250</a> </td> <td class="source"> 2. Otherwise, if the ''env()'' function has a fallback value as its second argument, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l126" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l251" id="l251"> 251</a> </td> <td class="source"> replace the ''env()'' function by the fallback value. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l127" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l252" id="l252"> 252</a> </td> <td class="source"> If there are any ''env()'' references in the fallback, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l128" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l253" id="l253"> 253</a> </td> <td class="source"> [=substitute=] them as well. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l129" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l254" id="l254"> 254</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l130" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l255" id="l255"> 255</a> </td> <td class="source"> 3. Otherwise, the property or descriptor containing the ''env()'' function is [=invalid at computed-value time=]. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l131" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l256" id="l256"> 256</a> </td> <td class="source"></div> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l132" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l257" id="l257"> 257</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l133" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l258" id="l258"> 258</a> </td> <td class="source">Issue: Define when substitution happens. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l134" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l259" id="l259"> 259</a> </td> <td class="source">It has to be before ''var()'' substitution. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l135" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l260" id="l260"> 260</a> </td> <td class="source">Alternately, should ''env()'' substitution happen at parse time, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l136" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l261" id="l261"> 261</a> </td> <td class="source">so unknown variable names cause it to fail syntax checking? </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l137" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l262" id="l262"> 262</a> </td> <td class="source">There's no particular reason to have it happen at computed-value time, </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l138" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l263" id="l263"> 263</a> </td> <td class="source">like ''var()'' does-- </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l139" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l264" id="l264"> 264</a> </td> <td class="source">that was to ensure that [=custom properties=] could inherit their value down </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l140" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l265" id="l265"> 265</a> </td> <td class="source">before they were picked up by a ''var()''. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l141" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l266" id="l266"> 266</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l142" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l267" id="l267"> 267</a> </td> <td class="source">Issue: When I figure out where else ''env()'' can go, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l143" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l268" id="l268"> 268</a> </td> <td class="source">define how/when it substitutes. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l144" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l269" id="l269"> 269</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l145" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l270" id="l270"> 270</a> </td> <td class="source">Environment Variables in Shorthand Properties {#env-in-shorthands} </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l146" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l271" id="l271"> 271</a> </td> <td class="source">------------------------------------------------------------------ </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l147" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l272" id="l272"> 272</a> </td> <td class="source"> </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l148" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l273" id="l273"> 273</a> </td> <td class="source">Issue: If ''env()'' substitution happens during parsing, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l149" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l274" id="l274"> 274</a> </td> <td class="source">then this is unnecessary. </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l150" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l275" id="l275"> 275</a> </td> <td class="source"> </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l151" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l276" id="l276"> 276</a> </td> <td class="source">The ''env()'' function causes the same difficulties with [=shorthand properties=] </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l152" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l277" id="l277"> 277</a> </td> <td class="source">as the ''var()'' function does. </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l153" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l278" id="l278"> 278</a> </td> <td class="source">When an ''env()'' is used in a [=shorthand property=], </td> </tr> <tr class="parity0"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l154" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l279" id="l279"> 279</a> </td> <td class="source">then, </td> </tr> <tr class="parity1"> <td class="linenr"> <a href="/drafts/annotate/fa728e89db73/css-env-1/Overview.bs#l155" title="fa728e89db73: [css-env] Add first draft of Environment Variables.">jackalmage@21012</a> </td> <td class="lineno"> <a href="#l280" id="l280"> 280</a> </td> <td class="source">it has the same effects as defined in [[css-variables-1#variables-in-shorthands]]. </td> </tr> </table> <script type="text/javascript">process_dates()</script> <div class="page-footer"> <p>Mercurial Repository: drafts</p> <ul class="rss-logo"> <li><a href="/drafts/rss-log">RSS</a></li> <li><a href="/drafts/atom-log">Atom</a></li> </ul> </div> <div id="powered-by"> <p><a href="http://mercurial.selenic.com/" title="Mercurial"><img src="/drafts/static/hglogo.png" width=75 height=90 border=0 alt="mercurial"></a></p> </div> <div id="corner-top-left"></div> <div id="corner-top-right"></div> <div id="corner-bottom-left"></div> <div id="corner-bottom-right"></div> </div> </body> </html>