CINXE.COM

<!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-2020/Overview.bs@b0602c4c66ef</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 revision</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/changelog">changelog</a></li> <li><a href="/drafts/graph/b0602c4c66ef">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/b0602c4c66ef/css-2020/">files</a></li> <li><a href="/drafts/help">help</a></li> </ul> </div> <ul class="submenu"> <li class="current">file</li> <li><a href="/drafts/log/b0602c4c66ef/css-2020/Overview.bs">revisions</a></li> <li><a href="/drafts/annotate/b0602c4c66ef/css-2020/Overview.bs">annotate</a></li> <li><a href="/drafts/diff/b0602c4c66ef/css-2020/Overview.bs">diff</a></li> <li><a href="/drafts/comparison/b0602c4c66ef/css-2020/Overview.bs">comparison</a></li> <li><a href="/drafts/raw-file/b0602c4c66ef/css-2020/Overview.bs">raw</a></li> </ul> <h2 class="no-link no-border">css-2020/Overview.bs@b0602c4c66ef</h2> <h3 class="changeset">css-2020/Overview.bs</h3> <p class="changeset-age age">Mon, 08 Feb 2021 14:41:26 -0500</p> <dl class="overview"> <dt>author</dt> <dd>Nick Schonning <nschonni@gmail.com></dd> <dt>date</dt> <dd>Mon, 08 Feb 2021 14:41:26 -0500</dd> <dt>changeset 26667</dt> <dd><a class="list" href="/drafts/rev/b0602c4c66ef">b0602c4c66ef</a></dd> <dt>parent 26516</dt> <dd> <a href="/drafts/file/65ceb68a0e8c/css-2020/Overview.bs"> 65ceb68a0e8c </a> </dd> <dt>child 26746</dt> <dd> <a href="/drafts/file/d311b4c7e390/css-2020/Overview.bs">d311b4c7e390</a> </dd> <dt>permissions</dt> <dd>-rw-r--r--</dd> </dl> <p class="description">typo: Double words (#5951)<br/> <br/> Co-authored-by: Rachel Andrew <rachel.andrew@edgeofmyseat.com></p> <div class="source"> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l1" id="l1"> 1</a> <pre class='metadata'> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l2" id="l2"> 2</a> Title: CSS Snapshot 2020 </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l3" id="l3"> 3</a> Shortname: css-2020 </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l4" id="l4"> 4</a> Level: none </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l5" id="l5"> 5</a> Status: WG-NOTE </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l6" id="l6"> 6</a> Group: CSSWG </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l7" id="l7"> 7</a> Date: 2020-12-21 </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l8" id="l8"> 8</a> Prepare for TR: yes </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l9" id="l9"> 9</a> Work Status: revising </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l10" id="l10"> 10</a> URL: https://drafts.csswg.org/css-2020/ </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l11" id="l11"> 11</a> TR: https://www.w3.org/TR/css-2020/ </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l12" id="l12"> 12</a> Previous Version: https://www.w3.org/TR/2019/NOTE-css-2018-20190122/ </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l13" id="l13"> 13</a> Editor: Tab Atkins Jr., Google, http://xanthir.com/, w3cid 42199 </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l14" id="l14"> 14</a> Editor: Elika J. Etemad / fantasai, Invited Expert, http://fantasai.inkedblade.net/contact, w3cid 35400 </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l15" id="l15"> 15</a> Editor: Florian Rivoal, Invited Expert, https://florian.rivoal.net, w3cid 43241 </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l16" id="l16"> 16</a> Abstract: This document collects together into one definition all the specs that </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l17" id="l17"> 17</a> together form the current state of Cascading Style Sheets (CSS) as of 2020. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l18" id="l18"> 18</a> The primary audience is CSS implementers, not CSS authors, as this definition </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l19" id="l19"> 19</a> includes modules by specification stability, not Web browser adoption rate. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l20" id="l20"> 20</a> Boilerplate: index no </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l21" id="l21"> 21</a> </pre> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l22" id="l22"> 22</a> <pre class=link-defaults> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l23" id="l23"> 23</a> spec:css-sizing-3; type:value; for:width; text:min-content </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l24" id="l24"> 24</a> spec:css-sizing-3; type:value; for:width; text:max-content </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l25" id="l25"> 25</a> spec:css-conditional-3; type:at-rule; text:@media </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l26" id="l26"> 26</a> spec:selectors-4; type:selector; text::lang() </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l27" id="l27"> 27</a> </pre> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l28" id="l28"> 28</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l29" id="l29"> 29</a> <div boilerplate=status> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l30" id="l30"> 30</a>  </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l33" id="l33"> 33</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l34" id="l34"> 34</a>  </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l35" id="l35"> 35</a> This document represents the state of CSS as of 2020. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l36" id="l36"> 36</a> The CSS Working Group does not expect any further changes to this document: </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l37" id="l37"> 37</a> new snapshots will be published at <a href="https://www.w3.org/TR/CSS/">https://www.w3.org/TR/CSS/</a> as CSS advances. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l38" id="l38"> 38</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l39" id="l39"> 39</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l40" id="l40"> 40</a> </div> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l41" id="l41"> 41</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l42" id="l42"> 42</a> Introduction {#intro} </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l43" id="l43"> 43</a> ===================== </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l44" id="l44"> 44</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l45" id="l45"> 45</a> When the first CSS specification was published, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l46" id="l46"> 46</a> all of CSS was contained in one document that defined CSS Level 1. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l47" id="l47"> 47</a> CSS Level 2 was defined also by a single, multi-chapter document. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l48" id="l48"> 48</a> However for CSS beyond Level 2, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l49" id="l49"> 49</a> the CSS Working Group chose to adopt a modular approach, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l50" id="l50"> 50</a> where each module defines a part of CSS, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l51" id="l51"> 51</a> rather than to define a single monolithic specification. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l52" id="l52"> 52</a> This breaks the specification into more manageable chunks </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l53" id="l53"> 53</a> and allows more immediate, incremental improvement to CSS. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l54" id="l54"> 54</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l55" id="l55"> 55</a> Since different CSS modules are at different levels of stability, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l56" id="l56"> 56</a> the CSS Working Group has chosen to publish this profile </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l57" id="l57"> 57</a> to define the current scope and state of Cascading Style Sheets as of 2020. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l58" id="l58"> 58</a> This profile includes only specifications that we consider stable </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l59" id="l59"> 59</a> <em>and</em> for which we have enough implementation experience that we are sure of that stability. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l60" id="l60"> 60</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l61" id="l61"> 61</a> Note: This is not intended to be a CSS Desktop Browser Profile: </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l62" id="l62"> 62</a> inclusion in this profile is based on feature stability only </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l63" id="l63"> 63</a> and not on expected use or Web browser adoption. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l64" id="l64"> 64</a> This profile defines CSS in its most complete form. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l65" id="l65"> 65</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l66" id="l66"> 66</a> Note: Although we don't anticipate significant changes to the specifications that form this snapshot, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l67" id="l67"> 67</a> their inclusion does not mean they are frozen. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l68" id="l68"> 68</a> The Working Group will continue to address problems as they are found in these specs. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l69" id="l69"> 69</a> Implementers should monitor <a href="http://lists.w3.org/Archives/Public/www-style/">www-style</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l70" id="l70"> 70</a> and/or the <a href="http://www.w3.org/blog/CSS">CSS Working Group Blog</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l71" id="l71"> 71</a> for any resulting changes, corrections, or clarifications. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l72" id="l72"> 72</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l73" id="l73"> 73</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l74" id="l74"> 74</a> <h3 id="w3c-process"> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l75" id="l75"> 75</a> Background: The W3C Process and CSS</h3> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l76" id="l76"> 76</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l77" id="l77"> 77</a> <em>This section is non-normative.</em> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l78" id="l78"> 78</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l79" id="l79"> 79</a> In the <a href="http://www.w3.org/Consortium/Process/">W3C Process</a>, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l80" id="l80"> 80</a> a Recommendation-track document passes through three levels of stability, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l81" id="l81"> 81</a> summarized below: </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l82" id="l82"> 82</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l83" id="l83"> 83</a> <dl> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l84" id="l84"> 84</a> <dt>Working Draft (WD) </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l85" id="l85"> 85</a> <dd> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l86" id="l86"> 86</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l87" id="l87"> 87</a> This is the design phase of a W3C spec. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l88" id="l88"> 88</a> The WG iterates the spec in response to internal and external feedback. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l89" id="l89"> 89</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l90" id="l90"> 90</a> The first official Working Draft is designated the “First Public Working Draft” (FPWD). </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l91" id="l91"> 91</a> In the CSSWG, publishing FPWD indicates that the Working Group as a whole has agreed to work on the module, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l92" id="l92"> 92</a> roughly as scoped out and proposed in the editor's draft. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l93" id="l93"> 93</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l94" id="l94"> 94</a> The transition to the next stage is sometimes called “Last Call Working Draft” (LCWD) phase. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l95" id="l95"> 95</a> The CSSWG transitions Working Drafts once we have resolved all known issues, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l96" id="l96"> 96</a> and can make no further progress without feedback from building tests and implementations. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l97" id="l97"> 97</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l98" id="l98"> 98</a> This “Last Call for Comments” sets a deadline for reporting any outstanding issues, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l99" id="l99"> 99</a> and requires the WG to specially track and address incoming feedback. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l100" id="l100"> 100</a> The comment-tracking document is the Disposition of Comments (DoC). </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l101" id="l101"> 101</a> It is submitted along with an updated draft for the Director's approval, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l102" id="l102"> 102</a> to demonstrate wide review and acceptance. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l103" id="l103"> 103</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l104" id="l104"> 104</a> <dt>Candidate Recommendation (CR) </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l105" id="l105"> 105</a> <dd> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l106" id="l106"> 106</a> This is the testing phase of a W3C spec. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l107" id="l107"> 107</a> Notably, this phase is about using tests and implementations to test the specification: </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l108" id="l108"> 108</a> it is not about testing the implementations. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l109" id="l109"> 109</a> This process often reveals more problems with the spec, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l110" id="l110"> 110</a> and so a Candidate Recommendation will morph over time in response to implementation and testing feedback, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l111" id="l111"> 111</a> though usually less so than during the design phase (WD). </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l112" id="l112"> 112</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l113" id="l113"> 113</a> Demonstration of two correct, independent implementations of each feature is required to exit CR, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l114" id="l114"> 114</a> so in this phase the WG builds a test suite and generates implementation reports. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l115" id="l115"> 115</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l116" id="l116"> 116</a> The transition to the next stage is “Proposed Recommendation” (PR). </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l117" id="l117"> 117</a> During this phase the W3C Advisory Committee must approve the transition to REC. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l118" id="l118"> 118</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l119" id="l119"> 119</a> <dt>Recommendation (REC) </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l120" id="l120"> 120</a> <dd> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l121" id="l121"> 121</a> This is the completed state of a W3C spec and represents a maintenance phase. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l122" id="l122"> 122</a> At this point the WG only maintains an errata document </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l123" id="l123"> 123</a> and occasionally publishes an updated edition that incorporates the errata back into the spec. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l124" id="l124"> 124</a> </dl> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l125" id="l125"> 125</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l126" id="l126"> 126</a> An <dfn export>Editor's Draft</dfn> is effectively a live copy of the editors’ own working copy. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l127" id="l127"> 127</a> It may or may not reflect Working Group consensus, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l128" id="l128"> 128</a> and can at times be in a self-inconsistent state. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l129" id="l129"> 129</a> (Because the publishing process at W3C is time-consuming and onerous, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l130" id="l130"> 130</a> the <a>Editor's Draft</a> is usually the best (most up-to-date) reference for a spec. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l131" id="l131"> 131</a> Efforts are currently underway to reduce the friction of publishing, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l132" id="l132"> 132</a> so that official drafts will be regularly up-to-date </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l133" id="l133"> 133</a> and <a>Editor's Drafts</a> can return to their original function as scratch space.) </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l134" id="l134"> 134</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l135" id="l135"> 135</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l136" id="l136"> 136</a> <h2 id=module-classification> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l137" id="l137"> 137</a> Classification of CSS Specifications</h2> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l138" id="l138"> 138</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l139" id="l139"> 139</a> Advisement: </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l140" id="l140"> 140</a> A list of all CSS modules, stable and in-progress, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l141" id="l141"> 141</a> and their statuses </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l142" id="l142"> 142</a> can be found at the <a href="http://www.w3.org/Style/CSS/current-work">CSS Current Work page</a>. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l143" id="l143"> 143</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l144" id="l144"> 144</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l145" id="l145"> 145</a> <h3 id="css">Cascading Style Sheets (CSS) &mdash; The Official Definition</h3> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l146" id="l146"> 146</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l147" id="l147"> 147</a> As of 2020, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l148" id="l148"> 148</a> <dfn export>Cascading Style Sheets (CSS)</dfn> is defined by the following </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l149" id="l149"> 149</a> specifications. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l150" id="l150"> 150</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l151" id="l151"> 151</a> <dl> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l152" id="l152"> 152</a> <dt><a href="https://www.w3.org/TR/CSS2/">CSS Level 2, latest revision</a> (including errata) </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l153" id="l153"> 153</a> [[!CSS2]] </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l154" id="l154"> 154</a> <dd> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l155" id="l155"> 155</a> This defines the core of CSS, parts of which are overridden by later specifications. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l156" id="l156"> 156</a> We recommend in particular reading <a href="https://www.w3.org/TR/CSS2/intro.html">Chapter 2</a>, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l157" id="l157"> 157</a> which introduces some of the basic concepts of CSS </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l158" id="l158"> 158</a> and its design principles. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l159" id="l159"> 159</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l160" id="l160"> 160</a> <dt><a href="https://www.w3.org/TR/css-syntax-3/">CSS Syntax Level 3</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l161" id="l161"> 161</a> [[!CSS-SYNTAX-3]] </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l162" id="l162"> 162</a> <dd> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l163" id="l163"> 163</a> Replaces CSS2&sect;4.1, CSS2&sect;4.2, CSS2&sect;4.4, and CSS2&sect;G, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l164" id="l164"> 164</a> redefining how CSS is parsed. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l165" id="l165"> 165</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l166" id="l166"> 166</a> <dt><a href="https://www.w3.org/TR/css-style-attr/">CSS Style Attributes</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l167" id="l167"> 167</a> [[!CSS-STYLE-ATTR]] </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l168" id="l168"> 168</a> <dd> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l169" id="l169"> 169</a> Defines how CSS declarations can be embedded in markup attributes. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l170" id="l170"> 170</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l171" id="l171"> 171</a> <dt><a href="https://www.w3.org/TR/css3-mediaqueries/">Media Queries Level 3</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l172" id="l172"> 172</a> [[!CSS3-MEDIAQUERIES]] </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l173" id="l173"> 173</a> <dd> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l174" id="l174"> 174</a> Replaces CSS2&sect;7.3 and expands on the syntax for media-specific styles. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l175" id="l175"> 175</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l176" id="l176"> 176</a> <dt><a href="https://www.w3.org/TR/css-conditional-3/">CSS Conditional Rules Level 3</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l177" id="l177"> 177</a> [[!CSS-CONDITIONAL-3]] </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l178" id="l178"> 178</a> <dd> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l179" id="l179"> 179</a> Extends and supersedes CSS2&sect;7.2, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l180" id="l180"> 180</a> updating the definition of ''@media'' rules to allow nesting </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l181" id="l181"> 181</a> and introducing the ''@supports'' rule for feature-support queries. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l182" id="l182"> 182</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l183" id="l183"> 183</a> <dt><a href="https://www.w3.org/TR/selectors-3/">Selectors Level 3</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l184" id="l184"> 184</a> [[!SELECTORS-3]] </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l185" id="l185"> 185</a> <dd> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l186" id="l186"> 186</a> Replaces CSS2&sect;5 and CSS2&sect;6.4.3, defining an extended range of selectors. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l187" id="l187"> 187</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l188" id="l188"> 188</a> <dt><a href="https://www.w3.org/TR/css-namespaces/">CSS Namespaces</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l189" id="l189"> 189</a> [[!CSS3-NAMESPACE]] </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l190" id="l190"> 190</a> <dd> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l191" id="l191"> 191</a> Introduces an ''@namespace'' rule to allow namespace-prefixed selectors. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l192" id="l192"> 192</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l193" id="l193"> 193</a> <dt><a href="https://www.w3.org/TR/css-cascade-4/">CSS Cascading and Inheritance Level 4</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l194" id="l194"> 194</a> [[!CSS-CASCADE-4]] </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l195" id="l195"> 195</a> <dd> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l196" id="l196"> 196</a> Extends and supersedes CSS2&sect;1.4.3 and CSS2&sect;6, as well as [[CSS-CASCADE-3]]. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l197" id="l197"> 197</a> Describes how to collate style rules and assign values to all properties on all elements. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l198" id="l198"> 198</a> By way of cascading and inheritance, values are propagated for all properties on all elements. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l199" id="l199"> 199</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l200" id="l200"> 200</a> <dt><a href="https://www.w3.org/TR/css-values-3/">CSS Values and Units Level 3</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l201" id="l201"> 201</a> [[!CSS-VALUES-3]] </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l202" id="l202"> 202</a> <dd> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l203" id="l203"> 203</a> Extends and supersedes CSS2&sect;1.4.2.1, CSS2&sect;4.3, and CSS2&sect;A.2.1&ndash;3, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l204" id="l204"> 204</a> defining CSS's property definition syntax </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l205" id="l205"> 205</a> and expanding its set of units. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l206" id="l206"> 206</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l207" id="l207"> 207</a> <dt><a href="https://www.w3.org/TR/css-variables-1/">CSS Custom Properties for Cascading Variables Module Level 1</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l208" id="l208"> 208</a> [[!CSS-VARIABLES-1]] </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l209" id="l209"> 209</a> <dd> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l210" id="l210"> 210</a> Introduces cascading variables as a new primitive value type that is accepted by all CSS properties, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l211" id="l211"> 211</a> and custom properties for defining them. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l212" id="l212"> 212</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l213" id="l213"> 213</a> <dt><a href="https://www.w3.org/TR/css-box-3/">CSS Box Model Level 3</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l214" id="l214"> 214</a> [[!CSS-BOX-3]] </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l215" id="l215"> 215</a> <dd> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l216" id="l216"> 216</a> Replaces CSS2&sect;8.1, &sect;8.2, &sect;8.3 (but not &sect;8.3.1), and &sect;8.4. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l217" id="l217"> 217</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l218" id="l218"> 218</a> <dt><a href="https://www.w3.org/TR/css-color-3/">CSS Color Level 3</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l219" id="l219"> 219</a> [[!CSS-COLOR-3]] </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l220" id="l220"> 220</a> <dd> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l221" id="l221"> 221</a> Extends and supersedes CSS2&sect;4.3.6, CSS2&sect;14.1, and CSS2&sect;18.2, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l222" id="l222"> 222</a> introducing an extended range of color values. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l223" id="l223"> 223</a> Also introduces the 'opacity' property. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l224" id="l224"> 224</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l225" id="l225"> 225</a> <dt><a href="https://www.w3.org/TR/css-backgrounds-3/">CSS Backgrounds and Borders Level 3</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l226" id="l226"> 226</a> [[!CSS-BACKGROUNDS-3]] </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l227" id="l227"> 227</a> <dd> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l228" id="l228"> 228</a> Extends and supersedes CSS2&sect;8.5 and CSS2&sect;14.2, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l229" id="l229"> 229</a> providing more control of backgrounds and borders, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l230" id="l230"> 230</a> including layered background images, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l231" id="l231"> 231</a> image borders, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l232" id="l232"> 232</a> and drop shadows. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l233" id="l233"> 233</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l234" id="l234"> 234</a> <dt><a href="https://www.w3.org/TR/css-images-3/">CSS Images Level 3</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l235" id="l235"> 235</a> [[!CSS-IMAGES-3]] </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l236" id="l236"> 236</a> <dd> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l237" id="l237"> 237</a> Redefines and incorporates the external 2D image value type, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l238" id="l238"> 238</a> introduces native 2D gradients, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l239" id="l239"> 239</a> and adds additional controls for replaced element sizing and rendering. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l240" id="l240"> 240</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l241" id="l241"> 241</a> <dt><a href="https://www.w3.org/TR/css-fonts-3/">CSS Fonts Level 3</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l242" id="l242"> 242</a> [[!CSS-FONTS-3]] </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l243" id="l243"> 243</a> <dd> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l244" id="l244"> 244</a> Extends and supersedes CSS2&sect;15 </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l245" id="l245"> 245</a> and provides more control over font choice and feature selection. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l246" id="l246"> 246</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l247" id="l247"> 247</a> <dt><a href="https://www.w3.org/TR/css-writing-modes-3/">CSS Writing Modes Level 3</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l248" id="l248"> 248</a> [[!CSS-WRITING-MODES-3]] </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l249" id="l249"> 249</a> <dd> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l250" id="l250"> 250</a> Defines CSS support for various international writing modes, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l251" id="l251"> 251</a> such as left-to-right (e.g. Latin or Indic), </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l252" id="l252"> 252</a> right-to-left (e.g. Hebrew or Arabic), </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l253" id="l253"> 253</a> bidirectional (e.g. mixed Latin and Arabic) and vertical (e.g. Asian scripts). </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l254" id="l254"> 254</a> Replaces and extends CSS2&sect;8.6 and &sect;9.10. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l255" id="l255"> 255</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l256" id="l256"> 256</a> <dt><a href="https://www.w3.org/TR/css-multicol-1/">CSS Multi-column Layout Level 1</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l257" id="l257"> 257</a> [[!CSS-MULTICOL-1]] </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l258" id="l258"> 258</a> <dd> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l259" id="l259"> 259</a> Introduces multi-column flows to CSS layout. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l260" id="l260"> 260</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l261" id="l261"> 261</a> <dt><a href="https://www.w3.org/TR/css-flexbox-1/">CSS Flexible Box Module Level 1</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l262" id="l262"> 262</a> [[!CSS-FLEXBOX-1]] </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l263" id="l263"> 263</a> <dd> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l264" id="l264"> 264</a> Introduces a flexible linear layout model for CSS. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l265" id="l265"> 265</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l266" id="l266"> 266</a> <dt><a href="https://www.w3.org/TR/css-ui-3/">CSS User Interface Module Level 3</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l267" id="l267"> 267</a> [[!CSS-UI-3]] </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l268" id="l268"> 268</a> <dd> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l269" id="l269"> 269</a> Extends and supersedes CSS2&sect;18.1 and CSS2&sect;18.4, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l270" id="l270"> 270</a> defining 'cursor', 'outline', and several new CSS features that also enhance the user interface. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l271" id="l271"> 271</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l272" id="l272"> 272</a> <dt><a href="https://www.w3.org/TR/css-contain-1/">CSS Containment Module Level 1</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l273" id="l273"> 273</a> [[!CSS-CONTAIN-1]] </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l274" id="l274"> 274</a> <dd> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l275" id="l275"> 275</a> Introduces the 'contain' property, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l276" id="l276"> 276</a> which enforces the independent CSS processing of an element’s subtree </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l277" id="l277"> 277</a> in order to enable heavy optimizations by user agents when used well. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l278" id="l278"> 278</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l279" id="l279"> 279</a> <dt><a href="https://www.w3.org/TR/css-transforms-1/">CSS Transforms Level 1</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l280" id="l280"> 280</a> [[!CSS-TRANSFORMS-1]] </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l281" id="l281"> 281</a> <dd> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l282" id="l282"> 282</a> Introduces coordinate-based graphical transformations to CSS. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l283" id="l283"> 283</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l284" id="l284"> 284</a> <dt><a href="https://www.w3.org/TR/compositing-1/">CSS Compositing and Blending Level 1</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l285" id="l285"> 285</a> [[!COMPOSITING]] </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l286" id="l286"> 286</a> <dd> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l287" id="l287"> 287</a> Defines the compositing and blending of overlaid content </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l288" id="l288"> 288</a> and introduces features to control their modes. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l289" id="l289"> 289</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l290" id="l290"> 290</a> <dt><a href="https://www.w3.org/TR/css-easing-1/">CSS Easing Functions Level 1</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l291" id="l291"> 291</a> [[!CSS-EASING-1]]. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l292" id="l292"> 292</a> <dd> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l293" id="l293"> 293</a> Describes a way for authors to define a transformation </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l294" id="l294"> 294</a> that controls the rate of change of some value. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l295" id="l295"> 295</a> Applied to animations, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l296" id="l296"> 296</a> such transformations can be used to produce animations </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l297" id="l297"> 297</a> that mimic physical phenomena such as momentum </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l298" id="l298"> 298</a> or to cause the animation to move in discrete steps producing robot-like movement. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l299" id="l299"> 299</a> </dl> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l300" id="l300"> 300</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l301" id="l301"> 301</a> <h3 id=fairly-stable> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l302" id="l302"> 302</a> Fairly Stable Modules with limited implementation experience</h3> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l303" id="l303"> 303</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l304" id="l304"> 304</a> The following modules have completed design work, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l305" id="l305"> 305</a> and are fairly stable, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l306" id="l306"> 306</a> but have not received much testing and implementation experience yet. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l307" id="l307"> 307</a> We hope to incorporate them into the [[#css|official definition of CSS]] in a future snapshot. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l308" id="l308"> 308</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l309" id="l309"> 309</a> <dl> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l310" id="l310"> 310</a> <dt><a href="https://www.w3.org/TR/mediaqueries-4/">Media Queries Level 4</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l311" id="l311"> 311</a> [[MEDIAQUERIES-4]] </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l312" id="l312"> 312</a> <dd> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l313" id="l313"> 313</a> Extends and supersedes [[CSS3-MEDIAQUERIES]], </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l314" id="l314"> 314</a> expanding the syntax, deprecating most media types, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l315" id="l315"> 315</a> and introducing new media features. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l316" id="l316"> 316</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l317" id="l317"> 317</a> <dt><a href="https://www.w3.org/TR/css-color-4/">CSS Color Level 4</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l318" id="l318"> 318</a> [[!CSS-COLOR-4]] </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l319" id="l319"> 319</a> <dd> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l320" id="l320"> 320</a> Extends and supersedes [[CSS-COLOR-3]], </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l321" id="l321"> 321</a> further expanding the range of colors expressable in CSS. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l322" id="l322"> 322</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l323" id="l323"> 323</a> <dt><a href="https://www.w3.org/TR/css-display-3/">CSS Display Module Level 3</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l324" id="l324"> 324</a> [[CSS-DISPLAY-3]] </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l325" id="l325"> 325</a> <dd> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l326" id="l326"> 326</a> Replaces CSS2&sect;9.1.2, &sect;9.2.1 (but not &sect;9.2.1.1), &sect;9.2.2 (but not &sect;9.2.2.1), &sect;9.2.3, and &sect;9.2.4 (and lays the foundations for replacing &sect;9.7), </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l327" id="l327"> 327</a> defining how the CSS formatting box tree is generated </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l328" id="l328"> 328</a> from the document element tree </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l329" id="l329"> 329</a> and defining the 'display' property that controls it. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l330" id="l330"> 330</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l331" id="l331"> 331</a> <dt><a href="https://www.w3.org/TR/css-writing-modes-4/">CSS Writing Modes Level 4</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l332" id="l332"> 332</a> [[CSS-WRITING-MODES-4]] </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l333" id="l333"> 333</a> <dd> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l334" id="l334"> 334</a> Extends and supersedes [[CSS-WRITING-MODES-3]], </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l335" id="l335"> 335</a> adding more options for vertical writing. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l336" id="l336"> 336</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l337" id="l337"> 337</a> <dt><a href="https://www.w3.org/TR/css-sizing-3/">CSS Box Sizing Level 3</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l338" id="l338"> 338</a> [[!CSS-SIZING-3]] </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l339" id="l339"> 339</a> <dd> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l340" id="l340"> 340</a> Overlays and extends CSS&sect;10., </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l341" id="l341"> 341</a> expanding the value set of the sizing properties, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l342" id="l342"> 342</a> introducing more precise sizing terminology, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l343" id="l343"> 343</a> and defining with more precision and detail </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l344" id="l344"> 344</a> various automatic sizing concepts only vaguely defined in CSS2. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l345" id="l345"> 345</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l346" id="l346"> 346</a> <dt><a href="https://www.w3.org/TR/css-break-3/">CSS Fragmentation Module Level 3</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l347" id="l347"> 347</a> [[CSS-BREAK-3]] </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l348" id="l348"> 348</a> <dd> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l349" id="l349"> 349</a> Describes the fragmentation model that partitions a flow into pages, columns, or regions </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l350" id="l350"> 350</a> and defines properties that control it. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l351" id="l351"> 351</a> Extends and supersedes CSS2&sect;13.3. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l352" id="l352"> 352</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l353" id="l353"> 353</a> <dt><a href="https://www.w3.org/TR/css-align-3/">CSS Box Alignment Module Level 3</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l354" id="l354"> 354</a> [[CSS-ALIGN-3]] </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l355" id="l355"> 355</a> <dd> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l356" id="l356"> 356</a> Introduces properties to control the alignment of boxes </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l357" id="l357"> 357</a> within their containers in the various CSS box layout models: </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l358" id="l358"> 358</a> block layout, table layout, flex layout, and grid layout. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l359" id="l359"> 359</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l360" id="l360"> 360</a> <dt><a href="https://www.w3.org/TR/css-shapes-1/">CSS Shapes Module Level 1</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l361" id="l361"> 361</a> [[CSS-SHAPES-1]] </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l362" id="l362"> 362</a> <dd> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l363" id="l363"> 363</a> Extends floats (CSS2&sect;9.5) to effect non-rectangular wrapping shapes. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l364" id="l364"> 364</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l365" id="l365"> 365</a> <dt><a href="https://www.w3.org/TR/css-text-3/">CSS Text Module Level 3</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l366" id="l366"> 366</a> [[CSS-TEXT-3]] </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l367" id="l367"> 367</a> <dd> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l368" id="l368"> 368</a> Extends and supersedes CSS2&sect;16 excepting &sect;16.2, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l369" id="l369"> 369</a> defining properties for text manipulation and specifying their processing model. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l370" id="l370"> 370</a> It covers line breaking, justification and alignment, white space handling, and text transformation. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l371" id="l371"> 371</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l372" id="l372"> 372</a> <dt><a href="https://www.w3.org/TR/css-text-decor-3/">CSS Text Decoration Level 3</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l373" id="l373"> 373</a> [[CSS-TEXT-DECOR-3]] </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l374" id="l374"> 374</a> <dd> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l375" id="l375"> 375</a> Extends and supersedes CSS2&sect;16.3, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l376" id="l376"> 376</a> providing more control over text decoration lines </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l377" id="l377"> 377</a> and adding the ability to specify text emphasis marks </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l378" id="l378"> 378</a> and text shadows. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l379" id="l379"> 379</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l380" id="l380"> 380</a> <dt><a href="https://www.w3.org/TR/css-counter-styles-3/">CSS Counter Styles Level 3</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l381" id="l381"> 381</a> [[CSS-COUNTER-STYLES-3]] </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l382" id="l382"> 382</a> <dd> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l383" id="l383"> 383</a> Expands the possible values of <<counter-style>> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l384" id="l384"> 384</a> and provides an ''@counter-style'' syntax for customized counter styles. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l385" id="l385"> 385</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l386" id="l386"> 386</a> <dt><a href="https://www.w3.org/TR/css-masking-1/">CSS Masking Level 1</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l387" id="l387"> 387</a> [[CSS-MASKING-1]] </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l388" id="l388"> 388</a> <dd> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l389" id="l389"> 389</a> Replaces CSS2&sect;11.1.2 </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l390" id="l390"> 390</a> and introduces more powerful ways of clipping and masking content. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l391" id="l391"> 391</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l392" id="l392"> 392</a> <dt><a href="https://www.w3.org/TR/css-scroll-snap-1/">CSS Scroll Snap Module Level 1</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l393" id="l393"> 393</a> [[CSS-SCROLL-SNAP-1]] </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l394" id="l394"> 394</a> <dd> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l395" id="l395"> 395</a> Contains features to control panning and scrolling behavior with “snap positions”. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l396" id="l396"> 396</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l397" id="l397"> 397</a> <dt><a href="https://www.w3.org/TR/css-speech-1/">CSS Speech Module Level 1</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l398" id="l398"> 398</a> [[CSS-SPEECH-1]] </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l399" id="l399"> 399</a> <dd> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l400" id="l400"> 400</a> Replaces CSS2&sect;A, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l401" id="l401"> 401</a> overhauling the (non-normative) speech rendering chapter. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l402" id="l402"> 402</a> </dl> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l403" id="l403"> 403</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l404" id="l404"> 404</a> <h3 id=rough-interop> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l405" id="l405"> 405</a> Modules with Rough Interoperability</h3> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l406" id="l406"> 406</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l407" id="l407"> 407</a> Although the following modules have been widely deployed with <a>rough interoperability</a>, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l408" id="l408"> 408</a> their details are not fully worked out or sufficiently well-specified </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l409" id="l409"> 409</a> and they need more testing and bugfixing. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l410" id="l410"> 410</a> We hope to incorporate them into the [[#css|official definition of CSS]] in a future snapshot. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l411" id="l411"> 411</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l412" id="l412"> 412</a> <dl> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l413" id="l413"> 413</a> <dt><a href="https://www.w3.org/TR/css-transitions-1/">CSS Transitions Level 1</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l414" id="l414"> 414</a> [[CSS-TRANSITIONS-1]] </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l415" id="l415"> 415</a> and <a href="https://www.w3.org/TR/css-animations-1/">CSS Animations Level 1</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l416" id="l416"> 416</a> [[CSS-ANIMATIONS-1]]. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l417" id="l417"> 417</a> <dd> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l418" id="l418"> 418</a> Introduces mechanisms for transitioning the computed values of CSS properties over time. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l419" id="l419"> 419</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l420" id="l420"> 420</a> <dt><a href="https://www.w3.org/TR/css-grid-1/">CSS Grid Layout Module Level 1</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l421" id="l421"> 421</a> [[!CSS-GRID-1]] </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l422" id="l422"> 422</a> <dd> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l423" id="l423"> 423</a> Introduces a two-dimensional grid-based layout system, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l424" id="l424"> 424</a> optimized for user interface design. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l425" id="l425"> 425</a> In the grid layout model, the children of a grid container </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l426" id="l426"> 426</a> can be positioned into arbitrary slots in a predefined flexible or fixed-size layout grid. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l427" id="l427"> 427</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l428" id="l428"> 428</a> <dt><a href="https://www.w3.org/TR/css-grid-2/">CSS Grid Layout Module Level 2</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l429" id="l429"> 429</a> [[!CSS-GRID-2]] </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l430" id="l430"> 430</a> <dd> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l431" id="l431"> 431</a> Extends and supersedes [[CSS-GRID-1]], </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l432" id="l432"> 432</a> introducing “subgrids” for managing nested markup in a shared grid framework. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l433" id="l433"> 433</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l434" id="l434"> 434</a> <dt><a href="https://www.w3.org/TR/css-will-change-1/">CSS Will Change Level 1</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l435" id="l435"> 435</a> [[CSS-WILL-CHANGE-1]] </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l436" id="l436"> 436</a> <dd> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l437" id="l437"> 437</a> Introduces a performance hint property called 'will-change'. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l438" id="l438"> 438</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l439" id="l439"> 439</a> <dt><a href="https://www.w3.org/TR/filter-effects-1/">Filter Effects Module Level 1</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l440" id="l440"> 440</a> [[FILTER-EFFECTS-1]] </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l441" id="l441"> 441</a> <dd> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l442" id="l442"> 442</a> Introduces filter effects as a way of processing an element’s rendering before it is displayed in the document. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l443" id="l443"> 443</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l444" id="l444"> 444</a> <dt><a href="https://www.w3.org/TR/css-font-loading/">CSS Font Loading Module Level 3</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l445" id="l445"> 445</a> [[CSS-FONT-LOADING-3]] </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l446" id="l446"> 446</a> <dd> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l447" id="l447"> 447</a> Introduces events and interfaces used for dynamically loading font resources. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l448" id="l448"> 448</a> </dl> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l449" id="l449"> 449</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l450" id="l450"> 450</a> <h3 id="css-levels"> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l451" id="l451"> 451</a> CSS Levels</h3> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l452" id="l452"> 452</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l453" id="l453"> 453</a> Cascading Style Sheets does not have versions in the traditional sense; </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l454" id="l454"> 454</a> instead it has <dfn export>levels</dfn>. Each level of CSS builds on the previous, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l455" id="l455"> 455</a> refining definitions and adding features. The feature set of each higher </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l456" id="l456"> 456</a> level is a superset of any lower level, and the behavior allowed for a given </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l457" id="l457"> 457</a> feature in a higher level is a subset of that allowed in the lower levels. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l458" id="l458"> 458</a> A user agent conforming to a higher level of CSS is thus also conformant to </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l459" id="l459"> 459</a> all lower levels. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l460" id="l460"> 460</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l461" id="l461"> 461</a> <dl> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l462" id="l462"> 462</a> <dt><dfn export>CSS Level 1</dfn> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l463" id="l463"> 463</a> <dd> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l464" id="l464"> 464</a> The CSS Working Group considers the </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l465" id="l465"> 465</a> <a href="https://www.w3.org/TR/2008/REC-CSS1-20080411/">CSS1 specification</a> to be </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l466" id="l466"> 466</a> obsolete. <a>CSS Level 1</a> is defined as all the features defined </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l467" id="l467"> 467</a> in the CSS1 specification (properties, values, at-rules, etc), but using </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l468" id="l468"> 468</a> the syntax and definitions in the </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l469" id="l469"> 469</a> <a href="https://www.w3.org/TR/CSS2/">CSS2.1 specification</a>. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l470" id="l470"> 470</a> <a href="https://www.w3.org/TR/css-style-attr/">CSS Style Attributes</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l471" id="l471"> 471</a> defines its inclusion in element-specific style attributes. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l472" id="l472"> 472</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l473" id="l473"> 473</a> <dt><dfn export>CSS Level 2</dfn> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l474" id="l474"> 474</a> <dd> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l475" id="l475"> 475</a> Although the <a href="https://www.w3.org/TR/2008/REC-CSS2-20080411/">CSS2 specification</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l476" id="l476"> 476</a> is technically a W3C Recommendation, it passed into the Recommendation stage </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l477" id="l477"> 477</a> before the W3C had defined the Candidate Recommendation stage. Over time </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l478" id="l478"> 478</a> implementation experience and further review has brought to light many problems </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l479" id="l479"> 479</a> in the CSS2 specification, so instead of expanding an already <a </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l480" id="l480"> 480</a> href="http://www.w3.org/Style/css2-updates/REC-CSS2-19980512-errata.html">unwieldy </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l481" id="l481"> 481</a> errata list</a>, the CSS Working Group chose to define <cite>CSS Level 2 </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l482" id="l482"> 482</a> Revision 1</cite> (CSS2.1). In case of any conflict between the two specs </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l483" id="l483"> 483</a> CSS2.1 contains the definitive definition. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l484" id="l484"> 484</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l485" id="l485"> 485</a> Once CSS2.1 became Candidate Recommendation&#8212;effectively though not </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l486" id="l486"> 486</a> officially the same level of stability as CSS2&#8212;obsoleted the CSS2 </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l487" id="l487"> 487</a> Recommendation. Features in CSS2 that were dropped from CSS2.1 should be </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l488" id="l488"> 488</a> considered to be at the Candidate Recommendation stage, but note that many </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l489" id="l489"> 489</a> of these have been or will be pulled into a CSS Level 3 working draft, in </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l490" id="l490"> 490</a> which case that specification will, once it reaches CR, obsolete the </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l491" id="l491"> 491</a> definitions in CSS2. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l492" id="l492"> 492</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l493" id="l493"> 493</a> The <a href="https://www.w3.org/TR/CSS2/">CSS2.1 specification</a> defines </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l494" id="l494"> 494</a> <a>CSS Level 2</a> and the <a href="https://www.w3.org/TR/css-style-attr/">CSS </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l495" id="l495"> 495</a> Style Attributes specification</a> defines its inclusion in </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l496" id="l496"> 496</a> element-specific style attributes. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l497" id="l497"> 497</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l498" id="l498"> 498</a> <dt><dfn export>CSS Level 3</dfn> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l499" id="l499"> 499</a> <dd> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l500" id="l500"> 500</a> <a>CSS Level 3</a> builds on CSS Level 2 module by module, using the CSS2.1 </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l501" id="l501"> 501</a> specification as its core. Each module adds functionality and/or </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l502" id="l502"> 502</a> replaces part of the CSS2.1 specification. The CSS Working Group </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l503" id="l503"> 503</a> intends that the new CSS modules will not contradict the CSS2.1 </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l504" id="l504"> 504</a> specification: only that they will add functionality and refine </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l505" id="l505"> 505</a> definitions. As each module is completed, it will be plugged in to </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l506" id="l506"> 506</a> the existing system of CSS2.1 plus previously-completed modules. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l507" id="l507"> 507</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l508" id="l508"> 508</a> From this level on modules are levelled independently: for example </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l509" id="l509"> 509</a> Selectors Level 4 may well be completed before CSS Line Module Level 3. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l510" id="l510"> 510</a> Modules with no <a>CSS Level 2</a> equivalent start at Level 1; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l511" id="l511"> 511</a> modules that update features that existed in <a>CSS Level 2</a> start at Level 3. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l512" id="l512"> 512</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l513" id="l513"> 513</a> <dt><dfn export>CSS Level 4</dfn> and beyond </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l514" id="l514"> 514</a> <dd> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l515" id="l515"> 515</a> There is no CSS Level 4. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l516" id="l516"> 516</a> Independent modules can reach level 4 or beyond, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l517" id="l517"> 517</a> but CSS the language no longer has levels. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l518" id="l518"> 518</a> ("CSS Level 3" as a term is used only to differentiate it from the previous monolithic versions.) </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l519" id="l519"> 519</a> </dl> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l520" id="l520"> 520</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l521" id="l521"> 521</a> <h3 id="profiles"> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l522" id="l522"> 522</a> CSS Profiles</h3> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l523" id="l523"> 523</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l524" id="l524"> 524</a> Not all implementations will implement all functionality defined in CSS. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l525" id="l525"> 525</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l526" id="l526"> 526</a> In the past, the Working Group published a few Profiles, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l527" id="l527"> 527</a> which were meant to define the minimal subset of CSS </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l528" id="l528"> 528</a> that various classes of User Agents were expected to support. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l529" id="l529"> 529</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l530" id="l530"> 530</a> This effort has been discontinued, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l531" id="l531"> 531</a> as the Working Group was not finding it effective or useful, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l532" id="l532"> 532</a> and the profiles previously defined are now unmaintained. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l533" id="l533"> 533</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l534" id="l534"> 534</a> Note: Partial implementations of CSS, even if that subset is an official profile, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l535" id="l535"> 535</a> must follow the forward-compatible parsing rules for <a href="#partial">partial implementations</a>. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l536" id="l536"> 536</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l537" id="l537"> 537</a> <h2 id="responsible"> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l538" id="l538"> 538</a> Requirements for Responsible Implementation of CSS</h2> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l539" id="l539"> 539</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l540" id="l540"> 540</a> The following sections define several conformance requirements </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l541" id="l541"> 541</a> for implementing CSS responsibly, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l542" id="l542"> 542</a> in a way that promotes interoperability in the present and future. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l543" id="l543"> 543</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l544" id="l544"> 544</a> <h3 id="partial">Partial Implementations</h3> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l545" id="l545"> 545</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l546" id="l546"> 546</a> So that authors can exploit the forward-compatible parsing rules to assign fallback values, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l547" id="l547"> 547</a> <strong>CSS renderers <em>must</em> treat as invalid </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l548" id="l548"> 548</a> (and <a href="https://www.w3.org/TR/CSS2/conform.html#ignore">ignore as appropriate</a>) </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l549" id="l549"> 549</a> any at-rules, properties, property values, keywords, and other syntactic constructs </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l550" id="l550"> 550</a> for which they have no usable level of support</strong>. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l551" id="l551"> 551</a> In particular, user agents <em>must not</em> selectively ignore </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l552" id="l552"> 552</a> unsupported property values and honor supported values in a single multi-value property declaration: </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l553" id="l553"> 553</a> if any value is considered invalid (as unsupported values must be), </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l554" id="l554"> 554</a> CSS requires that the entire declaration be ignored. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l555" id="l555"> 555</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l556" id="l556"> 556</a> <h3 id="future-proofing">Implementations of Unstable and Proprietary Features</h3> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l557" id="l557"> 557</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l558" id="l558"> 558</a> To avoid clashes with future stable CSS features, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l559" id="l559"> 559</a> the CSSWG recommends the following best practices for the implementation of </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l560" id="l560"> 560</a> <a>unstable</a> features and <a>proprietary extensions</a> to CSS: </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l561" id="l561"> 561</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l562" id="l562"> 562</a> <h4 id="experimental"> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l563" id="l563"> 563</a> Experimentation and Unstable Features</h4> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l564" id="l564"> 564</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l565" id="l565"> 565</a> Implementations of <a>unstable</a> features </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l566" id="l566"> 566</a> that are described in W3C specifications </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l567" id="l567"> 567</a> but are not interoperable </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l568" id="l568"> 568</a> should not be released broadly for general use; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l569" id="l569"> 569</a> but may be released for limited, experimental use in controlled environments. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l570" id="l570"> 570</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l571" id="l571"> 571</a> <details class=why> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l572" id="l572"> 572</a> <summary>Why?</summary> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l573" id="l573"> 573</a> We want to allow both authors and implementors to experiment with the feature and give feedback, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l574" id="l574"> 574</a> but prevent authors from relying on them in production websites </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l575" id="l575"> 575</a> and thereby accidentally "locking in" (through content dependence) </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l576" id="l576"> 576</a> certain syntax or behavior that might change later. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l577" id="l577"> 577</a> </details> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l578" id="l578"> 578</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l579" id="l579"> 579</a> <div class="example"> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l580" id="l580"> 580</a> For example, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l581" id="l581"> 581</a> a UA could release an <a>unstable</a> features for experimentation </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l582" id="l582"> 582</a> through beta or other testing-stage builds; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l583" id="l583"> 583</a> behind a hidden configuration flag; </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l584" id="l584"> 584</a> behind a switch enabled only for specific testing partners; </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l585" id="l585"> 585</a> or through some other means of limiting dependent use. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l586" id="l586"> 586</a> </div> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l587" id="l587"> 587</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l588" id="l588"> 588</a> A CSS feature is considered <dfn>unstable</dfn> until </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l589" id="l589"> 589</a> its specification has reached the Candidate Recommendation (CR) stage in the W3C process. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l590" id="l590"> 590</a> In exceptional cases, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l591" id="l591"> 591</a> the CSSWG may additionally, by an officially-recorded resolution, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l592" id="l592"> 592</a> add pre-CR features to the set that are considered safe to release for broad use. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l593" id="l593"> 593</a> See [[#CR-exceptions]]. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l594" id="l594"> 594</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l595" id="l595"> 595</a> Note: Vendors should consult the WG explicitly and not make assumptions on this point, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l596" id="l596"> 596</a> as a pre-CR spec that hasn't changed in awhile is usually more out-of-date than stable. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l597" id="l597"> 597</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l598" id="l598"> 598</a> <h4 id="proprietary"> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l599" id="l599"> 599</a> Proprietary and Non-standardized Features</h4> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l600" id="l600"> 600</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l601" id="l601"> 601</a> To avoid clashes with future CSS features, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l602" id="l602"> 602</a> the CSS2.1 specification reserves a </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l603" id="l603"> 603</a> <dfn export lt="vendor prefix | vendor-prefixed | prefixed | unprefixed"><a href="https://www.w3.org/TR/CSS2/syndata.html#vendor-keywords">prefixed syntax</a></dfn> [[!CSS2]] </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l604" id="l604"> 604</a> for proprietary and experimental extensions to CSS. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l605" id="l605"> 605</a> A CSS feature is a <dfn>proprietary extension</dfn> if it is meant for use </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l606" id="l606"> 606</a> in a closed environment accessible only to a single vendor's user agent(s). </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l607" id="l607"> 607</a> A UA should support such <a>proprietary extensions</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l608" id="l608"> 608</a> only through a vendor-<a>prefixed</a> syntax </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l609" id="l609"> 609</a> and not expose them to open (multi-UA) environments such as the World Wide Web. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l610" id="l610"> 610</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l611" id="l611"> 611</a> <details class=why> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l612" id="l612"> 612</a> <summary>Why?</summary> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l613" id="l613"> 613</a> The prefixing requirement allows shipping specialized features in closed environments </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l614" id="l614"> 614</a> without conflicting with future additions to standard CSS. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l615" id="l615"> 615</a> The restriction on exposure to open systems is to prevent </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l616" id="l616"> 616</a> accidentally causing the public CSS environment </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l617" id="l617"> 617</a> to depend on an unstandardized <a>proprietary extensions</a>. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l618" id="l618"> 618</a> </details> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l619" id="l619"> 619</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l620" id="l620"> 620</a> <div class="example"> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l621" id="l621"> 621</a> For example, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l622" id="l622"> 622</a> Firefox's XUL-based UI, Apple's iTunes UI, and Microsoft's Universal Windows Platform app </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l623" id="l623"> 623</a> use extensions to CSS implemented by their respective UAs. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l624" id="l624"> 624</a> So long as these UAs do not allow Web content to access these features, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l625" id="l625"> 625</a> they do not provide an opportunity for such content </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l626" id="l626"> 626</a> to become dependent on their <a>proprietary extensions</a>. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l627" id="l627"> 627</a> </div> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l628" id="l628"> 628</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l629" id="l629"> 629</a> Even if a feature is intended to eventually be used in the Web, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l630" id="l630"> 630</a> if it hasn't yet been standardized </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l631" id="l631"> 631</a> it should still not be exposed to the Web. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l632" id="l632"> 632</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l633" id="l633"> 633</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l634" id="l634"> 634</a> <h4 id="de-facto"> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l635" id="l635"> 635</a> Market Pressure and De Facto Standards</h4> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l636" id="l636"> 636</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l637" id="l637"> 637</a> If a feature is <a>unstable</a> (i.e. the spec has not yet stabilized), but </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l638" id="l638"> 638</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l639" id="l639"> 639</a> * at least three UAs implement the feature </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l640" id="l640"> 640</a> (<em>or</em> a UA has broken the other rules and shipped for broad use </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l641" id="l641"> 641</a> an <a>unstable</a> or otherwise non-standard feature in a production release), </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l642" id="l642"> 642</a> * <em>and</em> the implementations have rough interoperability, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l643" id="l643"> 643</a> * <em>and</em> the CSS Working Group has recorded consensus </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l644" id="l644"> 644</a> that this feature should exist and be released, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l645" id="l645"> 645</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l646" id="l646"> 646</a> implementers may ship that feature <a>unprefixed</a> in broad-release builds. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l647" id="l647"> 647</a> <dfn>Rough interoperability</dfn> is satisfied by a subjective judgment </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l648" id="l648"> 648</a> that even though there may be differences, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l649" id="l649"> 649</a> the implementations are sufficiently similar </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l650" id="l650"> 650</a> to be used in production websites for a substantial number of use cases. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l651" id="l651"> 651</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l652" id="l652"> 652</a> <p class="note">Note that the CSSWG must still be consulted to ensure coordination across vendors </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l653" id="l653"> 653</a> and to ensure coherency review by the CSS experts from each vendor. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l654" id="l654"> 654</a> Note also that <a>rough interoperability</a> still usually means </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l655" id="l655"> 655</a> painful lack of interop in edge (or not-so-edge) cases, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l656" id="l656"> 656</a> particularly because details have not been ironed out through the standards review process. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l657" id="l657"> 657</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l658" id="l658"> 658</a> <details class=why> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l659" id="l659"> 659</a> <summary>Why?</summary> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l660" id="l660"> 660</a> If a feature is sufficiently popular that three or more browsers have implemented it before it's finished standardization, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l661" id="l661"> 661</a> this clause allows releasing the pressure to ship. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l662" id="l662"> 662</a> Also, if a feature has already escaped into the wild and sites have started depending on it, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l663" id="l663"> 663</a> pretending it's still “experimental” doesn't help anyone. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l664" id="l664"> 664</a> Allowing others to ship unprefixed recognizes that the feature is now de facto standardized </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l665" id="l665"> 665</a> and encourages authors to write cross-platform code. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l666" id="l666"> 666</a> </details> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l667" id="l667"> 667</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l668" id="l668"> 668</a> <h5 id="unstable-syntax" class="no-toc"> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l669" id="l669"> 669</a> Vendor-prefixing Unstable Features</h5> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l670" id="l670"> 670</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l671" id="l671"> 671</a> <p>When exposing such a standards-track <a>unstable</a> feature to the Web in a production release, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l672" id="l672"> 672</a> implementations should support <em>both</em> <a>vendor-prefixed</a> and unprefixed syntaxes </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l673" id="l673"> 673</a> for the feature. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l674" id="l674"> 674</a> Once the feature has stabilized and the implementation is updated to match interoperable behavior, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l675" id="l675"> 675</a> support for the <a>vendor-prefixed</a> syntax should be removed. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l676" id="l676"> 676</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l677" id="l677"> 677</a> <details class=why> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l678" id="l678"> 678</a> <summary>Why?</summary> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l679" id="l679"> 679</a> This is recommended so that authors can use the unprefixed syntax to target all implementations, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l680" id="l680"> 680</a> but when necessary, can target specific implementations </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l681" id="l681"> 681</a> to work around incompatibilities among implementations </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l682" id="l682"> 682</a> as they get ironed out through the standards/bugfixing process. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l683" id="l683"> 683</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l684" id="l684"> 684</a> The lack of a phase </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l685" id="l685"> 685</a> where only the prefixed syntax is supported </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l686" id="l686"> 686</a> greatly reduces the risk of stylesheets </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l687" id="l687"> 687</a> being written with only the vendor-prefixed syntax. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l688" id="l688"> 688</a> This in turn allows UA vendors to retire </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l689" id="l689"> 689</a> their prefixed syntax once the feature is stable, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l690" id="l690"> 690</a> with a lower risk of breaking existing content. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l691" id="l691"> 691</a> It also reduces the need occasionally felt by some vendors </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l692" id="l692"> 692</a> to support a feature with the prefix of another vendor, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l693" id="l693"> 693</a> due to content depending on that syntax. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l694" id="l694"> 694</a> </details> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l695" id="l695"> 695</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l696" id="l696"> 696</a> Anyone promoting <a>unstable</a> features to authors </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l697" id="l697"> 697</a> should document them using their standard unprefixed syntax, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l698" id="l698"> 698</a> and avoid encouraging the use of the <a>vendor-prefixed</a> syntax </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l699" id="l699"> 699</a> for any purpose other than working around implementation differences. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l700" id="l700"> 700</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l701" id="l701"> 701</a> <h5 id="open-technology" class="no-toc"> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l702" id="l702"> 702</a> Preserving the Openness of CSS</h5> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l703" id="l703"> 703</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l704" id="l704"> 704</a> In order to preserve the open nature of CSS as a technology, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l705" id="l705"> 705</a> vendors should make it possible for other implementors </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l706" id="l706"> 706</a> to freely implement any features that they do ship. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l707" id="l707"> 707</a> To this end, they should provide spec-editing and testing resources </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l708" id="l708"> 708</a> to complete standardization of such features, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l709" id="l709"> 709</a> and avoid other obstacles (e.g., platform dependency, licensing restrictions) </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l710" id="l710"> 710</a> to their competitors shipping the feature. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l711" id="l711"> 711</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l712" id="l712"> 712</a> <h3 id="testing">Implementations of CR-level Features</h3> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l713" id="l713"> 713</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l714" id="l714"> 714</a> Once a specification reaches the Candidate Recommendation stage, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l715" id="l715"> 715</a> implementers should release an <a>unprefixed</a> implementation </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l716" id="l716"> 716</a> of any CR-level feature they can demonstrate </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l717" id="l717"> 717</a> to be correctly implemented according to spec, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l718" id="l718"> 718</a> and should avoid exposing a prefixed variant of that feature. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l719" id="l719"> 719</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l720" id="l720"> 720</a> To establish and maintain the interoperability of CSS across </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l721" id="l721"> 721</a> implementations, the CSS Working Group requests that non-experimental </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l722" id="l722"> 722</a> CSS renderers submit an implementation report (and, if necessary, the </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l723" id="l723"> 723</a> testcases used for that implementation report) to the W3C before </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l724" id="l724"> 724</a> releasing an unprefixed implementation of any CSS features. Testcases </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l725" id="l725"> 725</a> submitted to W3C are subject to review and correction by the CSS </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l726" id="l726"> 726</a> Working Group. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l727" id="l727"> 727</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l728" id="l728"> 728</a> Further information on submitting testcases and implementation reports </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l729" id="l729"> 729</a> can be found from on the CSS Working Group's website at </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l730" id="l730"> 730</a> <a href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l731" id="l731"> 731</a> Questions should be directed to the </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l732" id="l732"> 732</a> <a href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l733" id="l733"> 733</a> mailing list. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l734" id="l734"> 734</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l735" id="l735"> 735</a> <h2 id="CR-exceptions"> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l736" id="l736"> 736</a> Safe to Release pre-CR Exceptions</h2> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l737" id="l737"> 737</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l738" id="l738"> 738</a> The following features have been explicitly and proactively cleared </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l739" id="l739"> 739</a> by the CSS Working Group for broad release </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l740" id="l740"> 740</a> prior to the spec reaching Candidate Recommendation. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l741" id="l741"> 741</a> See [[#experimental]]. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l742" id="l742"> 742</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l743" id="l743"> 743</a> <ul> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l744" id="l744"> 744</a> <li>The flow-relative equivalents of </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l745" id="l745"> 745</a> the sizing properties ('width', 'height', etc.), </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l746" id="l746"> 746</a> the border properties, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l747" id="l747"> 747</a> the margin and padding properties. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l748" id="l748"> 748</a> See <a href="https://lists.w3.org/Archives/Public/www-style/2015Jul/0040.html">explanation</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l749" id="l749"> 749</a> and <a href="https://www.w3.org/TR/css-logical-1/">specification</a>. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l750" id="l750"> 750</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l751" id="l751"> 751</a> <li>The ''min-content'' and ''max-content'' keywords of the sizing properties. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l752" id="l752"> 752</a> See <a href="https://lists.w3.org/Archives/Public/www-style/2015Aug/0109.html">decision</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l753" id="l753"> 753</a> and <a href="https://www.w3.org/TR/css-sizing-3/#sizing-values">specification</a>. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l754" id="l754"> 754</a> <li>The ''conic-gradient()'' gradient notation. See <a href="https://github.com/w3c/csswg-drafts/issues/2383#issuecomment-371340088">decision</a>. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l755" id="l755"> 755</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l756" id="l756"> 756</a> <li>The 'aspect-ratio' property. [[!CSS-SIZING-4]] </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l757" id="l757"> 757</a> </ul> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l758" id="l758"> 758</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l759" id="l759"> 759</a> The following features have been explicitly and retroactively cleared </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l760" id="l760"> 760</a> by the CSS Working Group for broad release </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l761" id="l761"> 761</a> prior to the spec reaching Candidate Recommendation: </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l762" id="l762"> 762</a> <ul> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l763" id="l763"> 763</a> <li>Everything in </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l764" id="l764"> 764</a> <a href="https://www.w3.org/TR/css-animations-1/">CSS Animations Level 1</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l765" id="l765"> 765</a> and </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l766" id="l766"> 766</a> <a href="https://www.w3.org/TR/css-transitions-1/">CSS Transitions Level 1</a>. </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l767" id="l767"> 767</a> <li>The '':dir()'', '':lang()'', and '':focus-within'' pseudo-classes from [[SELECTORS-4]]. </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l768" id="l768"> 768</a> </ul> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l769" id="l769"> 769</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l770" id="l770"> 770</a> <h2 id="indices">Indices</h2> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l771" id="l771"> 771</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l772" id="l772"> 772</a> <em>These sections are non-normative.</em> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l773" id="l773"> 773</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l774" id="l774"> 774</a> <h3 id="terms">Terms Index</h3> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l775" id="l775"> 775</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l776" id="l776"> 776</a> <index type="dfn" status="TR" spec=" </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l777" id="l777"> 777</a> css2, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l778" id="l778"> 778</a> css-syntax-3, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l779" id="l779"> 779</a> css-style-attr-1, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l780" id="l780"> 780</a> mediaqueries-3, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l781" id="l781"> 781</a> mediaqueries-4, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l782" id="l782"> 782</a> css-conditional-3, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l783" id="l783"> 783</a> css-namespaces-3, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l784" id="l784"> 784</a> selectors-3, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l785" id="l785"> 785</a> css-cascade-4, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l786" id="l786"> 786</a> css-values-3, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l787" id="l787"> 787</a> css-color-3, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l788" id="l788"> 788</a> css-backgrounds-3, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l789" id="l789"> 789</a> css-images-3, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l790" id="l790"> 790</a> css-fonts-3, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l791" id="l791"> 791</a> css-multicol-1, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l792" id="l792"> 792</a> css-ui-3, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l793" id="l793"> 793</a> compositing-1, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l794" id="l794"> 794</a> css-writing-modes-3, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l795" id="l795"> 795</a> css-writing-modes-4, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l796" id="l796"> 796</a> css-transitions-1, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l797" id="l797"> 797</a> css-animations-1, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l798" id="l798"> 798</a> css-easing-1, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l799" id="l799"> 799</a> css-flexbox-1, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l800" id="l800"> 800</a> css-transforms-1, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l801" id="l801"> 801</a> css-variables-1, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l802" id="l802"> 802</a> css-text-3, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l803" id="l803"> 803</a> css-counter-styles-3, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l804" id="l804"> 804</a> css-masking-1, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l805" id="l805"> 805</a> css-shapes-1, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l806" id="l806"> 806</a> css-text-decor-3, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l807" id="l807"> 807</a> css-will-change-1, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l808" id="l808"> 808</a> css-speech-1, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l809" id="l809"> 809</a> css-align-3, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l810" id="l810"> 810</a> css-grid-1, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l811" id="l811"> 811</a> filter-effects-1, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l812" id="l812"> 812</a> css-break-3, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l813" id="l813"> 813</a> css-contain-1, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l814" id="l814"> 814</a> css-scroll-snap-1, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l815" id="l815"> 815</a> css-display-3, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l816" id="l816"> 816</a> css-font-loading-3"></index> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l817" id="l817"> 817</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l818" id="l818"> 818</a> <h3 id="selectors">Selector Index</h3> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l819" id="l819"> 819</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l820" id="l820"> 820</a> <index type="selector" status="TR" spec=" </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l821" id="l821"> 821</a> css2, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l822" id="l822"> 822</a> css-syntax-3, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l823" id="l823"> 823</a> css-style-attr-1, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l824" id="l824"> 824</a> mediaqueries-3, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l825" id="l825"> 825</a> mediaqueries-4, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l826" id="l826"> 826</a> css-conditional-3, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l827" id="l827"> 827</a> css-namespaces-3, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l828" id="l828"> 828</a> selectors-3, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l829" id="l829"> 829</a> css-cascade-4, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l830" id="l830"> 830</a> css-values-3, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l831" id="l831"> 831</a> css-color-3, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l832" id="l832"> 832</a> css-backgrounds-3, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l833" id="l833"> 833</a> css-images-3, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l834" id="l834"> 834</a> css-fonts-3, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l835" id="l835"> 835</a> css-multicol-1, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l836" id="l836"> 836</a> css-ui-3, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l837" id="l837"> 837</a> compositing-1, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l838" id="l838"> 838</a> css-writing-modes-3, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l839" id="l839"> 839</a> css-writing-modes-4, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l840" id="l840"> 840</a> css-transitions-1, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l841" id="l841"> 841</a> css-animations-1, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l842" id="l842"> 842</a> css-easing-1, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l843" id="l843"> 843</a> css-flexbox-1, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l844" id="l844"> 844</a> css-transforms-1, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l845" id="l845"> 845</a> css-variables-1, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l846" id="l846"> 846</a> css-text-3, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l847" id="l847"> 847</a> css-counter-styles-3, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l848" id="l848"> 848</a> css-masking-1, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l849" id="l849"> 849</a> css-shapes-1, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l850" id="l850"> 850</a> css-text-decor-3, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l851" id="l851"> 851</a> css-will-change-1, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l852" id="l852"> 852</a> css-speech-1, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l853" id="l853"> 853</a> css-align-3, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l854" id="l854"> 854</a> css-grid-1, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l855" id="l855"> 855</a> filter-effects-1, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l856" id="l856"> 856</a> css-break-3, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l857" id="l857"> 857</a> css-contain-1, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l858" id="l858"> 858</a> css-scroll-snap-1, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l859" id="l859"> 859</a> css-display-3, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l860" id="l860"> 860</a> css-font-loading-3"></index> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l861" id="l861"> 861</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l862" id="l862"> 862</a> <h3 id="at-rules"> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l863" id="l863"> 863</a> At-Rule Index</h3> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l864" id="l864"> 864</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l865" id="l865"> 865</a> <index type="at-rule" status="TR" spec=" </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l866" id="l866"> 866</a> css2, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l867" id="l867"> 867</a> css-syntax-3, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l868" id="l868"> 868</a> css-style-attr-1, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l869" id="l869"> 869</a> mediaqueries-3, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l870" id="l870"> 870</a> mediaqueries-4, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l871" id="l871"> 871</a> css-conditional-3, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l872" id="l872"> 872</a> css-namespaces-3, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l873" id="l873"> 873</a> selectors-3, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l874" id="l874"> 874</a> css-cascade-4, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l875" id="l875"> 875</a> css-values-3, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l876" id="l876"> 876</a> css-color-3, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l877" id="l877"> 877</a> css-backgrounds-3, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l878" id="l878"> 878</a> css-images-3, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l879" id="l879"> 879</a> css-fonts-3, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l880" id="l880"> 880</a> css-multicol-1, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l881" id="l881"> 881</a> css-ui-3, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l882" id="l882"> 882</a> compositing-1, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l883" id="l883"> 883</a> css-writing-modes-3, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l884" id="l884"> 884</a> css-writing-modes-4, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l885" id="l885"> 885</a> css-transitions-1, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l886" id="l886"> 886</a> css-animations-1, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l887" id="l887"> 887</a> css-easing-1, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l888" id="l888"> 888</a> css-flexbox-1, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l889" id="l889"> 889</a> css-transforms-1, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l890" id="l890"> 890</a> css-variables-1, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l891" id="l891"> 891</a> css-text-3, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l892" id="l892"> 892</a> css-counter-styles-3, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l893" id="l893"> 893</a> css-masking-1, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l894" id="l894"> 894</a> css-shapes-1, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l895" id="l895"> 895</a> css-text-decor-3, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l896" id="l896"> 896</a> css-will-change-1, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l897" id="l897"> 897</a> css-speech-1, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l898" id="l898"> 898</a> css-align-3, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l899" id="l899"> 899</a> css-grid-1, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l900" id="l900"> 900</a> filter-effects-1, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l901" id="l901"> 901</a> css-break-3, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l902" id="l902"> 902</a> css-contain-1, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l903" id="l903"> 903</a> css-scroll-snap-1, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l904" id="l904"> 904</a> css-display-3, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l905" id="l905"> 905</a> css-font-loading-3"></index> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l906" id="l906"> 906</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l907" id="l907"> 907</a> <h3 id="properties">Property Index</h3> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l908" id="l908"> 908</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l909" id="l909"> 909</a> <index type="property" status="TR" spec=" </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l910" id="l910"> 910</a> css2, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l911" id="l911"> 911</a> css-syntax-3, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l912" id="l912"> 912</a> css-style-attr-1, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l913" id="l913"> 913</a> mediaqueries-3, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l914" id="l914"> 914</a> mediaqueries-4, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l915" id="l915"> 915</a> css-conditional-3, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l916" id="l916"> 916</a> css-namespaces-3, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l917" id="l917"> 917</a> selectors-3, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l918" id="l918"> 918</a> css-cascade-4, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l919" id="l919"> 919</a> css-values-3, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l920" id="l920"> 920</a> css-color-3, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l921" id="l921"> 921</a> css-backgrounds-3, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l922" id="l922"> 922</a> css-images-3, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l923" id="l923"> 923</a> css-fonts-3, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l924" id="l924"> 924</a> css-multicol-1, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l925" id="l925"> 925</a> css-ui-3, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l926" id="l926"> 926</a> compositing-1, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l927" id="l927"> 927</a> css-writing-modes-3, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l928" id="l928"> 928</a> css-writing-modes-4, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l929" id="l929"> 929</a> css-transitions-1, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l930" id="l930"> 930</a> css-animations-1, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l931" id="l931"> 931</a> css-easing-1, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l932" id="l932"> 932</a> css-flexbox-1, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l933" id="l933"> 933</a> css-transforms-1, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l934" id="l934"> 934</a> css-variables-1, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l935" id="l935"> 935</a> css-text-3, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l936" id="l936"> 936</a> css-counter-styles-3, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l937" id="l937"> 937</a> css-masking-1, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l938" id="l938"> 938</a> css-shapes-1, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l939" id="l939"> 939</a> css-text-decor-3, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l940" id="l940"> 940</a> css-will-change-1, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l941" id="l941"> 941</a> css-speech-1, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l942" id="l942"> 942</a> css-align-3, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l943" id="l943"> 943</a> css-grid-1, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l944" id="l944"> 944</a> filter-effects-1, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l945" id="l945"> 945</a> css-break-3, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l946" id="l946"> 946</a> css-contain-1, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l947" id="l947"> 947</a> css-scroll-snap-1, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l948" id="l948"> 948</a> css-display-3, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l949" id="l949"> 949</a> css-font-loading-3"></index> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l950" id="l950"> 950</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l951" id="l951"> 951</a> <h3 id="values">Values Index</h3> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l952" id="l952"> 952</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l953" id="l953"> 953</a> <index type="value" status="TR" spec=" </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l954" id="l954"> 954</a> css2, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l955" id="l955"> 955</a> css-syntax-3, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l956" id="l956"> 956</a> css-style-attr-1, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l957" id="l957"> 957</a> mediaqueries-3, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l958" id="l958"> 958</a> mediaqueries-4, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l959" id="l959"> 959</a> css-conditional-3, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l960" id="l960"> 960</a> css-namespaces-3, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l961" id="l961"> 961</a> selectors-3, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l962" id="l962"> 962</a> css-cascade-4, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l963" id="l963"> 963</a> css-values-3, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l964" id="l964"> 964</a> css-color-3, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l965" id="l965"> 965</a> css-backgrounds-3, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l966" id="l966"> 966</a> css-images-3, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l967" id="l967"> 967</a> css-fonts-3, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l968" id="l968"> 968</a> css-multicol-1, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l969" id="l969"> 969</a> css-ui-3, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l970" id="l970"> 970</a> compositing-1, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l971" id="l971"> 971</a> css-writing-modes-3, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l972" id="l972"> 972</a> css-writing-modes-4, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l973" id="l973"> 973</a> css-transitions-1, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l974" id="l974"> 974</a> css-animations-1, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l975" id="l975"> 975</a> css-easing-1, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l976" id="l976"> 976</a> css-flexbox-1, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l977" id="l977"> 977</a> css-transforms-1, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l978" id="l978"> 978</a> css-variables-1, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l979" id="l979"> 979</a> css-text-3, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l980" id="l980"> 980</a> css-counter-styles-3, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l981" id="l981"> 981</a> css-masking-1, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l982" id="l982"> 982</a> css-shapes-1, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l983" id="l983"> 983</a> css-text-decor-3, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l984" id="l984"> 984</a> css-will-change-1, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l985" id="l985"> 985</a> css-speech-1, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l986" id="l986"> 986</a> css-align-3, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l987" id="l987"> 987</a> css-grid-1, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l988" id="l988"> 988</a> filter-effects-1, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l989" id="l989"> 989</a> css-break-3, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l990" id="l990"> 990</a> css-contain-1, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l991" id="l991"> 991</a> css-scroll-snap-1, </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l992" id="l992"> 992</a> css-display-3, </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l993" id="l993"> 993</a> css-font-loading-3"></index> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l994" id="l994"> 994</a> </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l995" id="l995"> 995</a> Acknowledgements {#acks} </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l996" id="l996"> 996</a> ======================== </pre> </div> <div style="font-family:monospace" class="parity0"> <pre><a class="linenr" href="#l997" id="l997"> 997</a> </pre> </div> <div style="font-family:monospace" class="parity1"> <pre><a class="linenr" href="#l998" id="l998"> 998</a> Special thanks to Florian Rivoal for creating the initial draft of the [[#experimental]] recommendations. </pre> </div> </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>