changeset
[css-regions] update ::region to match ::content
Tue, 26 Nov 2013 16:11:29 -0800
- author
- Alan Stearns <stearns@adobe.com>
- date
- Tue, 26 Nov 2013 16:11:29 -0800
- changeset 9640
- d6c2c35066c7
- parent 9639
- d9c6f692b8d7
- child 9641
- 22e806673354
[css-regions] update ::region to match ::content
| css-regions/Overview.html | file | annotate | diff | comparison | revisions | |
| css-regions/Overview.src.html | file | annotate | diff | comparison | revisions |
1.1 --- a/css-regions/Overview.html Mon Nov 25 17:07:34 2013 -0800 1.2 +++ b/css-regions/Overview.html Tue Nov 26 16:11:29 2013 -0800 1.3 @@ -12,7 +12,7 @@ 1.4 rel=dcterms.rights> 1.5 <meta content="CSS Regions Module Level 1" name=dcterms.title> 1.6 <meta content=text name=dcterms.type> 1.7 - <meta content=2013-11-26 name=dcterms.date> 1.8 + <meta content=2013-11-27 name=dcterms.date> 1.9 <meta content="Vincent Hardy" name=dcterms.creator> 1.10 <meta content="Rossen Atanassov" name=dcterms.creator> 1.11 <meta content="Alan Stearns" name=dcterms.creator> 1.12 @@ -46,7 +46,7 @@ 1.13 1.14 <h1 id=css-regions-module>CSS Regions Module Level 1</h1> 1.15 1.16 - <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 26 November 1.17 + <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 27 November 1.18 2013</h2> 1.19 1.20 <dl> 1.21 @@ -235,7 +235,7 @@ 1.22 </span>The region-fragment property</a> 1.23 1.24 <li><a href="#the-region-pseudo-element"><span class=secno>3.5. 1.25 - </span>The ::region() functional pseudo-element</a> 1.26 + </span>The ::region pseudo-element</a> 1.27 </ul> 1.28 1.29 <li><a href="#multi-column-regions"><span class=secno>4. 1.30 @@ -534,21 +534,20 @@ 1.31 <div class=example> 1.32 <pre> 1.33 <style> 1.34 - #region1::region(p) { 1.35 + #region1::region p { 1.36 color: #0C3D5F; 1.37 font-weight: bold; 1.38 } 1.39 </style></pre> 1.40 </div> 1.41 1.42 - <p>The <code class=css>::region()</code> functional pseudo-element takes a 1.43 - <code class=css>p</code> selector as an argument in this example. The 1.44 - color and font-weight declarations will apply to any fragments of 1.45 - paragraphs that are displayed in <code class=css>#region1</code>. The 1.46 - following figure shows how the rendering changes if we apply this styling 1.47 - specific to <code>#region1</code>. Note how less text fits into this box 1.48 - now that the ‘<code class=property>font-weight</code>’ is bold instead 1.49 - of normal. 1.50 + <p>The <code class=css>::region</code> pseudo-element is followed by a 1.51 + <code class=css>p</code> relative selector in this example. The color and 1.52 + font-weight declarations will apply to any fragments of paragraphs that 1.53 + are displayed in <code class=css>#region1</code>. The following figure 1.54 + shows how the rendering changes if we apply this styling specific to 1.55 + <code>#region1</code>. Note how less text fits into this box now that the 1.56 + ‘<code class=property>font-weight</code>’ is bold instead of normal. 1.57 1.58 <div class=figure> <img 1.59 alt="Illustrate how changing region styling affects the flow of content." 1.60 @@ -1428,46 +1427,37 @@ 1.61 href="#ref-CSS21" rel=biblioentry>[CSS21]<!--{{CSS21}}--></a>). 1.62 </div> 1.63 1.64 - <h3 id=the-region-pseudo-element><span class=secno>3.5. </span>The 1.65 - ::region() functional pseudo-element</h3> 1.66 - 1.67 - <p>A ::region() functional pseudo-element can be appended to a selector 1.68 - that matches a <a href="#css-region">CSS Region</a>, and takes a selector 1.69 - as an argument. This allows style declarations to be applied to fragments 1.70 - of named flow content flowing through particular regions. 1.71 + <h3 id=the-region-pseudo-element><span class=secno>3.5. </span>The ::region 1.72 + pseudo-element</h3> 1.73 + 1.74 + <p>A ::region pseudo-element represents a relationship between a selector 1.75 + that matches a <a href="#css-region">CSS Region</a>, and a relative 1.76 + selector that matches some named flow content. This allows style 1.77 + declarations to be applied to fragments of named flow content flowing into 1.78 + particular regions. 1.79 1.80 <pre> 1.81 -<region selector>::region(<content selector>) { 1.82 +<region selector>::region <content selector> { 1.83 ... CSS styling declarations ... 1.84 } 1.85 </pre> 1.86 1.87 - <div class=issue-marker> <a 1.88 - href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=23238">Issue-23238</a> 1.89 - 1.90 - <div class=issue-details> 1.91 - <p class=short-desc>Region styling syntax should sync with ‘<code 1.92 - class=property>distributed</code>’ from Shadow DOM 1.93 - </div> 1.94 - </div> 1.95 - 1.96 - <p>When the ::region() pseudo-element is appended to a <a 1.97 + <p>When the ::region pseudo-element is appended to a <a 1.98 href="http://www.w3.org/TR/css3-selectors/#selector-syntax">selector</a> 1.99 that matches one or more <a href="#css-region" title="CSS Region">CSS 1.100 Regions</a>, this creates a ‘<code class=css>flow fragment</code>’ 1.101 selector. The flow fragment selector specifies which range of elements in 1.102 - the flow can be matched by the selector argument. The selector argument 1.103 + the flow can be matched by the relative selector. The relative selector 1.104 can match elements in the range(s) (see <a href="#ref-DOM" 1.105 rel=biblioentry>[DOM]<!--{{!DOM}}--></a>) of the named flow that are 1.106 - displayed in the selected region(s). 1.107 + displayed fully or partially in the selected region(s). 1.108 1.109 <p>Elements that are fully or partially in the flow fragment range may 1.110 - match a selector argument. However, the style declarations only apply to 1.111 + match the relative selector. However, the style declarations only apply to 1.112 the fragment of the element that is displayed in the corresponding 1.113 region(s). 1.114 1.115 - <p>Only a limited list of properties apply to a ::region() functional 1.116 - pseudo-element: 1.117 + <p>Only a limited list of properties apply to a ::region pseudo-element: 1.118 1.119 <ol> 1.120 <li><a href="http://www.w3.org/TR/CSS2/fonts.html">font properties</a> 1.121 @@ -1537,7 +1527,7 @@ 1.122 1.123 <div class=example id=region-style-example> 1.124 <p>In the following example, the <a href="#named-flow0">named flow</a> 1.125 - ‘<code class=property>article-flow</code>’ flows through ‘<code 1.126 + ‘<code class=property>article-flow</code>’ flows into ‘<code 1.127 class=css>region-1</code>’ and ‘<code class=css>region-2</code>’. 1.128 1.129 <pre> 1.130 @@ -1551,7 +1541,7 @@ 1.131 } 1.132 1.133 /* region styling */ 1.134 - <strong>#region-1::region(p)</strong> { 1.135 + <strong>#region-1::region p </strong> { 1.136 margin-right: 5em; 1.137 } 1.138 </style> 1.139 @@ -1586,19 +1576,18 @@ 1.140 </div> 1.141 1.142 <p>The region styling applies to flow content that fits in ‘<code 1.143 - class=css>region-1</code>’. The selector argument matches ‘<code 1.144 + class=css>region-1</code>’. The relative selector matches ‘<code 1.145 class=css>p-1</code>’ and ‘<code class=css>p-2</code>’ because 1.146 these paragraphs flow into ‘<code class=css>region-1</code>’. Only 1.147 the fragment of ‘<code class=css>p-2</code>’ that flows into ‘<code 1.148 class=css>region-1</code>’ is styled with the pseudo-element. 1.149 </div> 1.150 1.151 - <p>All of the selectors in a ::region() functional pseudo-element 1.152 - contribute to its <a 1.153 + <p>All of the selectors in a ::region pseudo-element contribute to its <a 1.154 href="http://www.w3.org/TR/css3-selectors/#specificity">specificity</a>. 1.155 - So the specificity of the ::region() pseudo-element in the example above 1.156 + So the specificity of the ::region pseudo-element in the example above 1.157 would combine the id selector's specificity with the specificity of the 1.158 - type selector in the argument, resulting in a specificity of 101. 1.159 + type selector, resulting in a specificity of 101. 1.160 1.161 <p>Selectors that match a given element or element fragment (as described 1.162 above), participate in the <a 1.163 @@ -2842,6 +2831,8 @@ 1.164 28<sup>th</sup> 2013</a> version</h3> 1.165 1.166 <ul> 1.167 + <li>Changed ::region() to ::region 1.168 + 1.169 <li>display:none elements do not become CSS Regions 1.170 1.171 <li>Clarify accessibility interactions with flow-into
2.1 --- a/css-regions/Overview.src.html Mon Nov 25 17:07:34 2013 -0800 2.2 +++ b/css-regions/Overview.src.html Tue Nov 26 16:11:29 2013 -0800 2.3 @@ -286,15 +286,15 @@ 2.4 <div class="example"> 2.5 <pre> 2.6 <style> 2.7 - #region1::region(p) { 2.8 + #region1::region p { 2.9 color: #0C3D5F; 2.10 font-weight: bold; 2.11 } 2.12 </style></pre> 2.13 </div> 2.14 2.15 - <p>The <code class="css">::region()</code> functional pseudo-element 2.16 - takes a <code class="css">p</code> selector as an argument in this example. 2.17 + <p>The <code class="css">::region</code> pseudo-element 2.18 + is followed by a <code class="css">p</code> relative selector in this example. 2.19 The color and font-weight declarations will apply 2.20 to any fragments of paragraphs that are 2.21 displayed in <code class="css">#region1</code>. 2.22 @@ -1257,55 +1257,49 @@ 2.23 </div> 2.24 2.25 <div class="note"><span class="note-prefix">Note </span> 2.26 - <p>The 'overflow' property is honored on a region: if region content overflows, 2.27 - such as the borders of elements on the 2.28 - last line, the 'overflow' property controls the visibility of the overflowing 2.29 - content. See the 'overflow' property definition 2.30 - ([[CSS21]]).</p> 2.31 + <p>The 'overflow' property is honored on a region: 2.32 + if region content overflows, 2.33 + such as the borders of elements 2.34 + on the last line, 2.35 + the 'overflow' property controls 2.36 + the visibility of the overflowing content. 2.37 + See the 'overflow' property definition ([[CSS21]]).</p> 2.38 </div> 2.39 2.40 - <h3 id="the-region-pseudo-element">The ::region() functional pseudo-element</h3> 2.41 + <h3 id="the-region-pseudo-element">The ::region pseudo-element</h3> 2.42 2.43 - <p>A ::region() functional pseudo-element can be appended 2.44 - to a selector that matches a <span>CSS Region</span>, 2.45 - and takes a selector as an argument. 2.46 + <p>A ::region pseudo-element represents a relationship between 2.47 + a selector that matches a <span>CSS Region</span>, 2.48 + and a relative selector that matches some named flow content. 2.49 This allows style declarations to be applied 2.50 to fragments of named flow content flowing 2.51 - through particular regions.</p> 2.52 + into particular regions.</p> 2.53 2.54 <pre> 2.55 -<region selector>::region(<content selector>) { 2.56 +<region selector>::region <content selector> { 2.57 ... CSS styling declarations ... 2.58 } 2.59 </pre> 2.60 2.61 - <div class="issue-marker"> 2.62 - <a href= 2.63 - "https://www.w3.org/Bugs/Public/show_bug.cgi?id=23238">Issue-23238</a> 2.64 - 2.65 - <div class="issue-details"> 2.66 - <p class="short-desc">Region styling syntax should sync with 'distributed' from Shadow DOM</p> 2.67 - </div> 2.68 - </div> 2.69 - 2.70 - <p>When the ::region() pseudo-element is appended to a 2.71 + <p>When the ::region pseudo-element is appended to a 2.72 <a href="http://www.w3.org/TR/css3-selectors/#selector-syntax">selector</a> 2.73 that matches one or more <span title="CSS Region">CSS Regions</span>, 2.74 this creates a 'flow fragment' selector. 2.75 The flow fragment selector specifies 2.76 which range of elements in the flow 2.77 - can be matched by the selector argument. 2.78 - The selector argument can match elements 2.79 + can be matched by the relative selector. 2.80 + The relative selector can match elements 2.81 in the range(s) (see [[!DOM]]) of the named flow 2.82 - that are displayed in the selected region(s).</p> 2.83 + that are displayed fully or partially 2.84 + in the selected region(s).</p> 2.85 2.86 <p>Elements that are fully or partially 2.87 - in the flow fragment range may match a selector argument. 2.88 + in the flow fragment range may match the relative selector. 2.89 However, the style declarations only apply 2.90 to the fragment of the element 2.91 that is displayed in the corresponding region(s).</p> 2.92 2.93 - <p>Only a limited list of properties apply to a ::region() functional pseudo-element:</p> 2.94 + <p>Only a limited list of properties apply to a ::region pseudo-element:</p> 2.95 2.96 <ol> 2.97 <li><a href="http://www.w3.org/TR/CSS2/fonts.html">font properties</a></li> 2.98 @@ -1331,7 +1325,7 @@ 2.99 2.100 <div class="example" id="region-style-example"> 2.101 <p>In the following example, the <span>named flow</span> 'article-flow' flows 2.102 - through 'region-1' and 'region-2'.</p> 2.103 + into 'region-1' and 'region-2'.</p> 2.104 <pre> 2.105 <style> 2.106 #div-1 { 2.107 @@ -1343,7 +1337,7 @@ 2.108 } 2.109 2.110 /* region styling */ 2.111 - <strong>#region-1::region(p)</strong> { 2.112 + <strong>#region-1::region p </strong> { 2.113 margin-right: 5em; 2.114 } 2.115 </style> 2.116 @@ -1386,7 +1380,7 @@ 2.117 2.118 <p>The region styling applies 2.119 to flow content that fits in 'region-1'. 2.120 - The selector argument matches 'p-1' and 'p-2' 2.121 + The relative selector matches 'p-1' and 'p-2' 2.122 because these paragraphs 2.123 flow into 'region-1'. 2.124 Only the fragment of 'p-2' 2.125 @@ -1395,12 +1389,12 @@ 2.126 </div> 2.127 2.128 <p>All of the selectors 2.129 - in a ::region() functional pseudo-element 2.130 + in a ::region pseudo-element 2.131 contribute to its <a href="http://www.w3.org/TR/css3-selectors/#specificity">specificity</a>. 2.132 - So the specificity of the ::region() pseudo-element 2.133 + So the specificity of the ::region pseudo-element 2.134 in the example above would combine 2.135 the id selector's specificity 2.136 - with the specificity of the type selector in the argument, 2.137 + with the specificity of the type selector, 2.138 resulting in a specificity of 101.</p> 2.139 2.140 <p>Selectors that match a given element or element fragment (as described above), 2.141 @@ -2446,6 +2440,7 @@ 2.142 <h3 id="changes_from_May_28_2013">Changes from <a href="http://www.w3.org/TR/2013/WD-css3-regions-20130528/">May 28<sup>th</sup> 2013</a> version</h3> 2.143 2.144 <ul> 2.145 + <li>Changed ::region() to ::region</li> 2.146 <li>display:none elements do not become CSS Regions</li> 2.147 <li>Clarify accessibility interactions with flow-into</li> 2.148 <li>Change NamedFlowCollection to NamedFlowMap</li>
