CINXE.COM
drafts: diff css-egg-1/Overview.bs
<!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: diff css-egg-1/Overview.bs</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> / file diff</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/eebddbf77ac0">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/eebddbf77ac0">files</a></li> <li><a href="/drafts/help">help</a></li> </ul> </div> <ul class="submenu"> <li><a href="/drafts/file/eebddbf77ac0/css-egg-1/Overview.bs">file</a></li> <li><a href="/drafts/log/eebddbf77ac0/css-egg-1/Overview.bs">revisions</a></li> <li><a href="/drafts/annotate/eebddbf77ac0/css-egg-1/Overview.bs">annotate</a></li> <li class="current">diff</li> <li><a href="/drafts/comparison/eebddbf77ac0/css-egg-1/Overview.bs">comparison</a></li> <li><a href="/drafts/raw-diff/eebddbf77ac0/css-egg-1/Overview.bs">raw</a></li> </ul> <h2 class="no-link no-border">diff: css-egg-1/Overview.bs</h2> <h3 class="changeset">css-egg-1/Overview.bs</h3> <dl class="overview"> <dt>changeset 26081</dt> <dd><a href="/drafts/rev/eebddbf77ac0">eebddbf77ac0</a></dd> <dt>parent 25875</dt> <dd><a href="/drafts/diff/6184bac8cb02/css-egg-1/Overview.bs">6184bac8cb02</a></dd> <dt>child 26746</dt> <dd><a href="/drafts/diff/d311b4c7e390/css-egg-1/Overview.bs">d311b4c7e390</a></dd> </dl> <div class="diff"> <pre><span style="color:#cc0000;"><a class="linenr" href="#l1.1" id="l1.1"> 1.1</a> --- a/css-egg-1/Overview.bs Fri Oct 23 16:35:02 2020 -0700 </span><span style="color:#008800;"><a class="linenr" href="#l1.2" id="l1.2"> 1.2</a> +++ b/css-egg-1/Overview.bs Mon Oct 26 02:17:46 2020 -0700 </span><span style="color:#990099;"><a class="linenr" href="#l1.3" id="l1.3"> 1.3</a> @@ -19,6 +19,7 @@ </span><span><a class="linenr" href="#l1.4" id="l1.4"> 1.4</a> text: closest-corner </span><span><a class="linenr" href="#l1.5" id="l1.5"> 1.5</a> text: farthest-corner </span><span><a class="linenr" href="#l1.6" id="l1.6"> 1.6</a> spec:css-values-3; type:type; text:<time> </span><span style="color:#008800;"><a class="linenr" href="#l1.7" id="l1.7"> 1.7</a> +spec:css-conditional-3; type:at-rule; text:@media </span><span><a class="linenr" href="#l1.8" id="l1.8"> 1.8</a> </pre> </span><span><a class="linenr" href="#l1.9" id="l1.9"> 1.9</a> </span><span><a class="linenr" href="#l1.10" id="l1.10"> 1.10</a> <style type="text/css"> </span><span style="color:#990099;"><a class="linenr" href="#l1.11" id="l1.11"> 1.11</a> @@ -62,14 +63,15 @@ </span><span><a class="linenr" href="#l1.12" id="l1.12"> 1.12</a> <li>the data type definitions in [[!CSS3-VALUES]] </span><span><a class="linenr" href="#l1.13" id="l1.13"> 1.13</a> <li>the <<gradient>> definition in [[!CSS4-IMAGES]] </span><span><a class="linenr" href="#l1.14" id="l1.14"> 1.14</a> <li>the 'voice-rate' property in [[!CSS3SPEECH]] </span><span style="color:#008800;"><a class="linenr" href="#l1.15" id="l1.15"> 1.15</a> + <li>the '@media' rule in [[!MEDIAQUERIES-5]] </span><span><a class="linenr" href="#l1.16" id="l1.16"> 1.16</a> </ul> </span><span><a class="linenr" href="#l1.17" id="l1.17"> 1.17</a> </span><span><a class="linenr" href="#l1.18" id="l1.18"> 1.18</a> <h3 id="values"> </span><span><a class="linenr" href="#l1.19" id="l1.19"> 1.19</a> Value Definitions</h3> </span><span><a class="linenr" href="#l1.20" id="l1.20"> 1.20</a> </span><span><a class="linenr" href="#l1.21" id="l1.21"> 1.21</a> This specification follows the <a href="https://www.w3.org/TR/CSS2/about.html#property-defs">CSS property definition conventions</a> from [[!CSS2]] </span><span style="color:#cc0000;"><a class="linenr" href="#l1.22" id="l1.22"> 1.22</a> - using the <a href="https://www.w3.org/TR/css-values-3/#value-defs">value definition syntax</a> from [[!CSS-VALUES-3]]. </span><span style="color:#cc0000;"><a class="linenr" href="#l1.23" id="l1.23"> 1.23</a> - Value types not defined in this specification are defined in CSS Values &amp; Units [[!CSS-VALUES-3]]. </span><span style="color:#008800;"><a class="linenr" href="#l1.24" id="l1.24"> 1.24</a> + using the <a href="https://www.w3.org/TR/css-values-3/#value-defs">value definition syntax</a> from [[!CSS3-VALUES]]. </span><span style="color:#008800;"><a class="linenr" href="#l1.25" id="l1.25"> 1.25</a> + Value types not defined in this specification are defined in CSS Values &amp; Units [[!CSS3-VALUES]]. </span><span><a class="linenr" href="#l1.26" id="l1.26"> 1.26</a> Combination with other CSS modules may expand the definitions of these value types. </span><span><a class="linenr" href="#l1.27" id="l1.27"> 1.27</a> </span><span><a class="linenr" href="#l1.28" id="l1.28"> 1.28</a> In addition to the property-specific values listed in their definitions, </span><span style="color:#990099;"><a class="linenr" href="#l1.29" id="l1.29"> 1.29</a> @@ -366,6 +368,68 @@ </span><span><a class="linenr" href="#l1.30" id="l1.30"> 1.30</a> </span><span><a class="linenr" href="#l1.31" id="l1.31"> 1.31</a> Issue: Should negative values be allowed for <<speech-rate>> for reversed speech? </span><span><a class="linenr" href="#l1.32" id="l1.32"> 1.32</a> </span><span style="color:#008800;"><a class="linenr" href="#l1.33" id="l1.33"> 1.33</a> + </span><span style="color:#008800;"><a class="linenr" href="#l1.34" id="l1.34"> 1.34</a> +<h3 id=fps> </span><span style="color:#008800;"><a class="linenr" href="#l1.35" id="l1.35"> 1.35</a> +Device performance</h3> </span><span style="color:#008800;"><a class="linenr" href="#l1.36" id="l1.36"> 1.36</a> + </span><span style="color:#008800;"><a class="linenr" href="#l1.37" id="l1.37"> 1.37</a> +<div class="informative"> </span><span style="color:#008800;"><a class="linenr" href="#l1.38" id="l1.38"> 1.38</a> +Device performance is known to be a perfectly linear quantity with a total ordering consistent across different kinds of workloads. It is desirable to be able to design adaptive content that works across a range of user agent and device performance.</div> </span><span style="color:#008800;"><a class="linenr" href="#l1.39" id="l1.39"> 1.39</a> + </span><span style="color:#008800;"><a class="linenr" href="#l1.40" id="l1.40"> 1.40</a> +This specification introduces an new <a spec="css-values">dimension</a>, together with a new unit to be used with this dimension. </span><span style="color:#008800;"><a class="linenr" href="#l1.41" id="l1.41"> 1.41</a> + </span><span style="color:#008800;"><a class="linenr" href="#l1.42" id="l1.42"> 1.42</a> +The <dfn id="device-performance-value"><<device-performance>></dfn> describes the performance of the current device and user agent combination. It can be expressed using the ''adafish'' unit, as defined below. </span><span style="color:#008800;"><a class="linenr" href="#l1.43" id="l1.43"> 1.43</a> + </span><span style="color:#008800;"><a class="linenr" href="#l1.44" id="l1.44"> 1.44</a> + </span><span style="color:#008800;"><a class="linenr" href="#l1.45" id="l1.45"> 1.45</a> +<table class="data" export> </span><span style="color:#008800;"><a class="linenr" href="#l1.46" id="l1.46"> 1.46</a> + <thead> </span><span style="color:#008800;"><a class="linenr" href="#l1.47" id="l1.47"> 1.47</a> + <tr><th>unit </span><span style="color:#008800;"><a class="linenr" href="#l1.48" id="l1.48"> 1.48</a> + <th>name </span><span style="color:#008800;"><a class="linenr" href="#l1.49" id="l1.49"> 1.49</a> + <th>definition </span><span style="color:#008800;"><a class="linenr" href="#l1.50" id="l1.50"> 1.50</a> + <tbody> </span><span style="color:#008800;"><a class="linenr" href="#l1.51" id="l1.51"> 1.51</a> + <tr><th><dfn>adafish</dfn> </span><span style="color:#008800;"><a class="linenr" href="#l1.52" id="l1.52"> 1.52</a> + <td>Adafish </span><span style="color:#008800;"><a class="linenr" href="#l1.53" id="l1.53"> 1.53</a> + <td>This is the maximum number of fish that can be displayed on the current device and user agent combination in <a href="https://ada.is/xrgarden/">Ada Rose Cannon's Fish Garden</a> without the user agent dropping any frames. </span><span style="color:#008800;"><a class="linenr" href="#l1.54" id="l1.54"> 1.54</a> +</table> </span><span style="color:#008800;"><a class="linenr" href="#l1.55" id="l1.55"> 1.55</a> + </span><span style="color:#008800;"><a class="linenr" href="#l1.56" id="l1.56"> 1.56</a> +Note: <a href="https://ada.is/xrgarden/">Ada Rose Cannon's Fish Garden</a> supports changing the number of fish through the `?fish=` query parameter, e.g. <a href="https://ada.is/xrgarden/?fish=50">this link will show 50 fish</a> </span><span style="color:#008800;"><a class="linenr" href="#l1.57" id="l1.57"> 1.57</a> + </span><span style="color:#008800;"><a class="linenr" href="#l1.58" id="l1.58"> 1.58</a> +<h4 id="media-query-ext"> </span><span style="color:#008800;"><a class="linenr" href="#l1.59" id="l1.59"> 1.59</a> +Extension to the ''@media'' rule: The 'performance' feature</h4> </span><span style="color:#008800;"><a class="linenr" href="#l1.60" id="l1.60"> 1.60</a> + </span><span style="color:#008800;"><a class="linenr" href="#l1.61" id="l1.61"> 1.61</a> + <pre class='descdef mq'> </span><span style="color:#008800;"><a class="linenr" href="#l1.62" id="l1.62"> 1.62</a> + Name: performance </span><span style="color:#008800;"><a class="linenr" href="#l1.63" id="l1.63"> 1.63</a> + Value: <<device-performance>> </span><span style="color:#008800;"><a class="linenr" href="#l1.64" id="l1.64"> 1.64</a> + For: @media </span><span style="color:#008800;"><a class="linenr" href="#l1.65" id="l1.65"> 1.65</a> + Type: range </span><span style="color:#008800;"><a class="linenr" href="#l1.66" id="l1.66"> 1.66</a> + </pre> </span><span style="color:#008800;"><a class="linenr" href="#l1.67" id="l1.67"> 1.67</a> + </span><span style="color:#008800;"><a class="linenr" href="#l1.68" id="l1.68"> 1.68</a> +The 'performance' media feature describes the performance characteristics of the current device and user agent combination at the current time. It SHOULD incorporate transient and permanent environmental factors affecting performance such as the current room temperature, the accumulation of dust in the device's cooling system, and the existence of spilled lemonade or coffee on the device's motherboard. </span><span style="color:#008800;"><a class="linenr" href="#l1.69" id="l1.69"> 1.69</a> + </span><span style="color:#008800;"><a class="linenr" href="#l1.70" id="l1.70"> 1.70</a> +When querying the 'performance' feature the user agent SHOULD ensure that it is querying a recent value. The user agent MAY in the background run <a href="https://ada.is/xrgarden/">Ada's Fish Garden</a> with various parameters to estimate this value. If device performance characteristics change while content is being viewed, the user agent MUST recompute its value for 'performance', potentially restyling the document. </span><span style="color:#008800;"><a class="linenr" href="#l1.71" id="l1.71"> 1.71</a> + </span><span style="color:#008800;"><a class="linenr" href="#l1.72" id="l1.72"> 1.72</a> +<div class=example> </span><span style="color:#008800;"><a class="linenr" href="#l1.73" id="l1.73"> 1.73</a> +This feature is useful for designing robust content that adapts to different device characteristics. </span><span style="color:#008800;"><a class="linenr" href="#l1.74" id="l1.74"> 1.74</a> + </span><span style="color:#008800;"><a class="linenr" href="#l1.75" id="l1.75"> 1.75</a> +<pre><code class="lang-css"> </span><span style="color:#008800;"><a class="linenr" href="#l1.76" id="l1.76"> 1.76</a> +@media (min-performance: 1000adafish) { </span><span style="color:#008800;"><a class="linenr" href="#l1.77" id="l1.77"> 1.77</a> + #very-cool-demo-with-blinky-lights { </span><span style="color:#008800;"><a class="linenr" href="#l1.78" id="l1.78"> 1.78</a> + display: block; </span><span style="color:#008800;"><a class="linenr" href="#l1.79" id="l1.79"> 1.79</a> + } </span><span style="color:#008800;"><a class="linenr" href="#l1.80" id="l1.80"> 1.80</a> +} </span><span style="color:#008800;"><a class="linenr" href="#l1.81" id="l1.81"> 1.81</a> + </span><span style="color:#008800;"><a class="linenr" href="#l1.82" id="l1.82"> 1.82</a> +@media (max-performance: 1000adafish) { </span><span style="color:#008800;"><a class="linenr" href="#l1.83" id="l1.83"> 1.83</a> + #really-bad-demo-with-no-blinky-lights-whatsoever { </span><span style="color:#008800;"><a class="linenr" href="#l1.84" id="l1.84"> 1.84</a> + display: block; </span><span style="color:#008800;"><a class="linenr" href="#l1.85" id="l1.85"> 1.85</a> + } </span><span style="color:#008800;"><a class="linenr" href="#l1.86" id="l1.86"> 1.86</a> +} </span><span style="color:#008800;"><a class="linenr" href="#l1.87" id="l1.87"> 1.87</a> +</code></pre> </span><span style="color:#008800;"><a class="linenr" href="#l1.88" id="l1.88"> 1.88</a> +</div> </span><span style="color:#008800;"><a class="linenr" href="#l1.89" id="l1.89"> 1.89</a> + </span><span style="color:#008800;"><a class="linenr" href="#l1.90" id="l1.90"> 1.90</a> +<h4 id="adafish-fingerprinting">Fingerprinting concerns</h4> </span><span style="color:#008800;"><a class="linenr" href="#l1.91" id="l1.91"> 1.91</a> + </span><span style="color:#008800;"><a class="linenr" href="#l1.92" id="l1.92"> 1.92</a> +This API may be used for gleaning information about the user's environment, which may be used to fingerprint them. This is recognized to be an acceptable loss for the momentous benefits this API is expected to provide the web platform. </span><span style="color:#008800;"><a class="linenr" href="#l1.93" id="l1.93"> 1.93</a> + </span><span style="color:#008800;"><a class="linenr" href="#l1.94" id="l1.94"> 1.94</a> + </span><span><a class="linenr" href="#l1.95" id="l1.95"> 1.95</a> <h2 id="rainbow"> </span><span><a class="linenr" href="#l1.96" id="l1.96"> 1.96</a> Double Rainbow</h2> </span><span><a class="linenr" href="#l1.97" id="l1.97"> 1.97</a> </span></pre> </div> <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>