changeset
[css-regions] change @region to ::region()
Mon, 13 May 2013 17:21:47 -0700
- author
- Alan Stearns <stearns@adobe.com>
- date
- Mon, 13 May 2013 17:21:47 -0700
- changeset 8165
- bb9a5f9af54d
- parent 8164
- ba7e3adc5eb5
- child 8166
- a79dacb13eda
[css-regions] change @region to ::region()
| 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 May 13 16:42:38 2013 -0700 1.2 +++ b/css-regions/Overview.html Mon May 13 17:21:47 2013 -0700 1.3 @@ -12,7 +12,7 @@ 1.4 rel=dcterms.rights> 1.5 <meta content="CSS Regions Module Level 3" name=dcterms.title> 1.6 <meta content=text name=dcterms.type> 1.7 - <meta content=2013-05-03 name=dcterms.date> 1.8 + <meta content=2013-05-14 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 @@ -50,7 +50,7 @@ 1.13 1.14 <h1 id=css-regions-module>CSS Regions Module Level 3</h1> 1.15 1.16 - <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 3 May 2013</h2> 1.17 + <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 14 May 2013</h2> 1.18 1.19 <dl> 1.20 <dt>This version: 1.21 @@ -212,8 +212,8 @@ 1.22 </span>Regions flow breaking rules</a> 1.23 </ul> 1.24 1.25 - <li><a href="#properties-and-rules"><span class=secno>3. </span>Properties 1.26 - and rules</a> 1.27 + <li><a href="#properties-and-region-styling"><span class=secno>3. 1.28 + </span>Properties and Region Styling</a> 1.29 <ul class=toc> 1.30 <li><a href="#the-flow-into-property"><span class=secno>3.1. </span>The 1.31 ‘<code class=property>flow-into</code>’ property</a> 1.32 @@ -237,7 +237,7 @@ 1.33 </span>The region-fragment property</a> 1.34 1.35 <li><a href="#the-at-region-style-rule"><span class=secno>3.5. 1.36 - </span>The @region rule</a> 1.37 + </span>The ::region() functional pseudo-element</a> 1.38 </ul> 1.39 1.40 <li><a href="#multi-column-regions"><span class=secno>4. 1.41 @@ -259,21 +259,18 @@ 1.42 <li><a href="#the-region-interface"><span class=secno>6.2. </span>The 1.43 Region interface</a> 1.44 1.45 - <li><a href="#region-style-rule-interface"><span class=secno>6.3. 1.46 - </span>The CSSRegionStyleRule interface</a> 1.47 - 1.48 - <li><a href="#named-flow-events"><span class=secno>6.4. </span>Named 1.49 + <li><a href="#named-flow-events"><span class=secno>6.3. </span>Named 1.50 flow events</a> 1.51 1.52 - <li><a href="#cssomview-and-regions"><span class=secno>6.5. 1.53 + <li><a href="#cssomview-and-regions"><span class=secno>6.4. 1.54 </span>Clarifications on pre-existing APIs</a> 1.55 <ul class=toc> 1.56 <li><a 1.57 href="#cssomview-getclientrects-and-getboundingclientrect"><span 1.58 - class=secno>6.5.1. </span><code class=idl>getClientRects()</code> and 1.59 + class=secno>6.4.1. </span><code class=idl>getClientRects()</code> and 1.60 <code>getBoundingClientRects()</code></a> 1.61 1.62 - <li><a href="#cssomview-offset-attributes"><span class=secno>6.5.2. 1.63 + <li><a href="#cssomview-offset-attributes"><span class=secno>6.4.2. 1.64 </span><code class=idl>offsetTop</code>, <code 1.65 class=idl>offsetLeft</code>, <code class=idl>offsetWidth</code>, 1.66 <code class=idl>offsetHeight</code> and <code 1.67 @@ -537,14 +534,6 @@ 1.68 <h3 id=region-styling><span class=secno>1.2. </span>CSS Region names and 1.69 styling</h3> 1.70 1.71 - <div class=issue-marker data-bug_id=16859 data-bug_status=NEW> <a 1.72 - href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=16859">Issue-16859</a> 1.73 - 1.74 - <div class=issue-details> 1.75 - <p class=short-desc>Reconsider using @rule for region styling 1.76 - </div> 1.77 - </div> 1.78 - 1.79 <p>Content can be styled depending on the CSS Region it flows into. It is 1.80 an extension of pseudo-element styling such as <a 1.81 href="http://www.w3.org/TR/css3-selectors/#first-line"> <code 1.82 @@ -560,19 +549,21 @@ 1.83 <div class=example> 1.84 <pre> 1.85 <style> 1.86 - @region #region1 { 1.87 - p { 1.88 - color: #0C3D5F; 1.89 - font-weight: bold; 1.90 - } 1.91 + #region1::region(p) { 1.92 + color: #0C3D5F; 1.93 + font-weight: bold; 1.94 + } 1.95 </style></pre> 1.96 </div> 1.97 1.98 - <p>The <code class=css>@region #region1</code> rule limits its selectors to 1.99 - content flowing into <code class=css>#region1</code>. The following figure 1.100 - shows how the rendering changes if we apply styling specific to 1.101 - <code>#region1</code>. Note how less text fits into this box now that the 1.102 - ‘<code class=property>font-weight</code>’ is bold instead of normal. 1.103 + <p>The <code class=css>::region()</code> functional pseudo-element takes a 1.104 + <code class=css>p</code> selector as an argument in this example. The 1.105 + color and font-weight declarations will apply to any fragments of 1.106 + paragraphs that are displayed in <code class=css>#region1</code>. The 1.107 + following figure shows how the rendering changes if we apply this styling 1.108 + specific to <code>#region1</code>. Note how less text fits into this box 1.109 + now that the ‘<code class=property>font-weight</code>’ is bold instead 1.110 + of normal. 1.111 1.112 <div class=figure> <img 1.113 alt="Illustrate how changing region styling affects the flow of content." 1.114 @@ -649,8 +640,8 @@ 1.115 CSS Fragmentation Module Level 3 (see <a href="#CSS3-BREAK" 1.116 rel=biblioentry>[CSS3-BREAK]<!--{{!CSS3-BREAK}}--></a>). 1.117 1.118 - <h2 id=properties-and-rules><span class=secno>3. </span>Properties and 1.119 - rules</h2> 1.120 + <h2 id=properties-and-region-styling><span class=secno>3. </span>Properties 1.121 + and Region Styling</h2> 1.122 1.123 <h3 id=the-flow-into-property><span class=secno>3.1. </span>The ‘<a 1.124 href="#flow-into"><code class=property>flow-into</code></a>’ property</h3> 1.125 @@ -1432,43 +1423,36 @@ 1.126 rel=biblioentry>[CSS21]<!--{{CSS21}}--></a>). 1.127 </div> 1.128 1.129 - <h3 id=the-at-region-style-rule><span class=secno>3.5. </span>The @region 1.130 - rule</h3> 1.131 - 1.132 - <p>An ‘<code class=css>@region</code>’ rule contains style declarations 1.133 - specific to particular regions. 1.134 + <h3 id=the-at-region-style-rule><span class=secno>3.5. </span>The 1.135 + ::region() functional pseudo-element</h3> 1.136 + 1.137 + <p>A ::region() functional pseudo-element can be appended to a selector 1.138 + that matches a CSS Region, and takes a selector as an argument. This 1.139 + allows style declarations to be applied to fragments of named flow content 1.140 + flowing through particular regions. 1.141 1.142 <pre> 1.143 -@region <selector> { 1.144 - ... CSS styling rules ... 1.145 +<region selector>::region(<content selector>) { 1.146 + ... CSS styling declarations ... 1.147 } 1.148 </pre> 1.149 1.150 - <p>The ‘<code class=css>@region</code>’ rule consists of the keyword 1.151 - ‘<code class=css>@region</code>’ followed by a <a 1.152 + <p>When the ::region() pseudo-element is appended to a <a 1.153 href="http://www.w3.org/TR/css3-selectors/#selector-syntax">selector</a> 1.154 - and a block of style rules. The ‘<code class=css>@region</code>’ rule 1.155 - and the selector constitute the region's ‘<code class=css>flow 1.156 - fragment</code>’ selector. The region's flow fragment selector specifies 1.157 - which range of elements in the flow are subject to the style rules in the 1.158 - following block: it applies to the range (see <a href="#DOM" 1.159 - rel=biblioentry>[DOM]<!--{{!DOM}}--></a>) from the region's flow that 1.160 - flows in the selected region(s). 1.161 - 1.162 - <div class=issue-marker data-bug_id=15713 data-bug_status=NEW> <a 1.163 - href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15713">Issue-15713</a> 1.164 - 1.165 - <div class=issue-details> 1.166 - <p class=short-desc>Model for styling element fragments 1.167 - </div> 1.168 - </div> 1.169 - 1.170 - <p>Elements that are fully or partially in the ‘<code class=css>flow 1.171 - fragment</code>’ may match any of the selectors found in the style rule. 1.172 - However, the style rules only apply to the portion of the element that 1.173 - falls into the corresponding region. 1.174 - 1.175 - <p>Only a limited list of properties can be set in a region style rule: 1.176 + that matches one or more CSS Regions, this creates a ‘<code 1.177 + class=css>flow fragment</code>’ selector. The flow fragment selector 1.178 + specifies which range of elements in the flow can be matched by the 1.179 + selector argument. The selector argument can match elements in the 1.180 + range(s) (see <a href="#DOM" rel=biblioentry>[DOM]<!--{{!DOM}}--></a>) of 1.181 + the named flow that are displayed in the selected region(s). 1.182 + 1.183 + <p>Elements that are fully or partially in the flow fragment range may 1.184 + match a selector argument. However, the style declarations only apply to 1.185 + the fragment of the element that is displayed in the corresponding 1.186 + region(s). 1.187 + 1.188 + <p>Only a limited list of properties apply to a ::region() functional 1.189 + pseudo-element: 1.190 1.191 <ol> 1.192 <li><a href="http://www.w3.org/TR/CSS2/fonts.html">font properties</a> 1.193 @@ -1553,17 +1537,9 @@ 1.194 <strong>flow-from: article-flow;</strong> 1.195 } 1.196 1.197 - /* region style "RSA" */ 1.198 - <strong>@region #region-1, #region-2</strong> { 1.199 - div {...} 1.200 - p {...} 1.201 - } 1.202 - 1.203 - /* region style "RSB" */ 1.204 - <strong>@region #region-1</strong> { 1.205 - p { 1.206 - margin-right: 5em; 1.207 - } 1.208 + /* region styling */ 1.209 + <strong>#region-1::region(p)</strong> { 1.210 + margin-right: 5em; 1.211 } 1.212 </style> 1.213 1.214 @@ -1581,7 +1557,7 @@ 1.215 </pre> 1.216 1.217 <div id="region_styling_illustration"> <img 1.218 - alt="Illustration showing how a named flow content fits into regions to illustrate the @region styling." 1.219 + alt="Example showing how a named flow content fits into regions to illustrate region styling." 1.220 id="region_styling_img_2" name="region_styling_img_2" 1.221 src="images/region-styling-2.png"> 1.222 <ul class=swatch-list> 1.223 @@ -1599,55 +1575,23 @@ 1.224 </ul> 1.225 </div> 1.226 1.227 - <p>The region style ‘<code class=css>RSA</code>’ applies to flow 1.228 - content that is laid out in either ‘<code class=css>region-1</code>’ 1.229 - or ‘<code class=css>region-2</code>’. 1.230 - 1.231 - <p>The first rule set ‘<code class=css>div {...}</code>’ applies to 1.232 - all <code><div></code> elements that fit partially or fully into 1.233 - ‘<code class=css>region-1</code>’ or ‘<code 1.234 - class=css>region-2</code>’. ‘<code class=css>div-1</code>’ is split 1.235 - between ‘<code class=css>region-1</code>’ and ‘<code 1.236 - class=css>region-2</code>’ and gets the style from this style rule. 1.237 - 1.238 - <p>The second rule set ‘<code class=css>p {...}</code>’ applies to all 1.239 - <code><p></code> elements that fit into ‘<code 1.240 - class=css>region-1</code>’ or ‘<code class=css>region-2</code>’. In 1.241 - our example, both ‘<code class=css>p-1</code>’and ‘<code 1.242 - class=css>p-2</code>’ are selected. 1.243 - 1.244 - <p>The region style ‘<code class=css>RSB</code>’ applies to flow 1.245 - content that fits in ‘<code class=css>region-1</code>’. 1.246 - 1.247 - <p>The first rule set ‘<code class=css>p {...}</code>’ matches 1.248 - ‘<code class=css>p-1</code>’ and ‘<code class=css>p-2</code>’ 1.249 - because these paragraphs flow into ‘<code class=css>region-1</code>’. 1.250 - Only the fragment of ‘<code class=css>p-2</code>’ that flows into 1.251 - ‘<code class=css>region-1</code>’ is styled with this rule. 1.252 + <p>The region styling applies to flow content that fits in ‘<code 1.253 + class=css>region-1</code>’. The selector argument matches ‘<code 1.254 + class=css>p-1</code>’ and ‘<code class=css>p-2</code>’ because 1.255 + these paragraphs flow into ‘<code class=css>region-1</code>’. Only 1.256 + the fragment of ‘<code class=css>p-2</code>’ that flows into ‘<code 1.257 + class=css>region-1</code>’ is styled with the pseudo-element. 1.258 </div> 1.259 1.260 - <div class=issue-marker data-bug_id=15734 data-bug_status=NEW> <a 1.261 - href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15734">Issue-15734</a> 1.262 - 1.263 - <div class=issue-details> 1.264 - <p class=short-desc>@region and specificity 1.265 - </div> 1.266 - </div> 1.267 - 1.268 - <p>The specificity of the selectors in a ‘<code 1.269 - class=css>@region</code>’ rule is calculated as <a 1.270 - href="http://www.w3.org/TR/css3-selectors/#specificity">defined</a> in the 1.271 - CSS Selectors module (see <a href="#SELECT" 1.272 - rel=biblioentry>[SELECT]<!--{{SELECT}}--></a>). In other words, the 1.273 - ‘<code class=css>@region</code>’ rule adds an extra condition to the 1.274 - selector's matching, but does not change the selector's specificity. This 1.275 - is the same behavior as selectors appearing in ‘<code 1.276 - class=css>@media</code>’ rules declaration blocks (see <a href="#MEDIAQ" 1.277 - rel=biblioentry>[MEDIAQ]<!--{{MEDIAQ}}--></a>), where the rule does not 1.278 - influence the selectors' specificity. 1.279 - 1.280 - <p>Consequently, selectors that match a given element (as describe above), 1.281 - participate in the <a 1.282 + <p>All of the selectors in a ::region() functional pseudo-element 1.283 + contribute to its <a 1.284 + href="http://www.w3.org/TR/css3-selectors/#specificity">specificity</a>. 1.285 + So the specificity of the ::region() pseudo-element in the example above 1.286 + would combine the id selector's specificity with the specificity of the 1.287 + type selector in the argument, resulting in a specificity of 101. 1.288 + 1.289 + <p>Selectors that match a given element or element fragment (as described 1.290 + above), participate in the <a 1.291 href="http://www.w3.org/TR/2011/REC-CSS2-20110607/cascade.html#cascading-order">CSS 1.292 Cascading order</a> as defined in <a href="#CSS21" 1.293 rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>. 1.294 @@ -2122,111 +2066,7 @@ 1.295 class=property>none</code>’ but a script is still holding a reference to 1.296 the <a href="#css-region"><code class=idl>Region</code></a> object. 1.297 1.298 - <h3 id=region-style-rule-interface><span class=secno>6.3. </span>The 1.299 - CSSRegionStyleRule interface</h3> 1.300 - 1.301 - <p>The <dfn id=dom-region-style-rule-interface> <code 1.302 - class=idl>CSSRegionStyleRule</code> interface</dfn> represents an ‘<code 1.303 - class=css>@region</code>’ rule in a CSS style sheet. This rule type is 1.304 - added to the <a 1.305 - href="http://dev.w3.org/csswg/cssom/#the-cssrule-interface"><code>CSSRule</code></a> 1.306 - <a href="#CSSOM" rel=biblioentry>[CSSOM]<!--{{!CSSOM}}--></a> interface. 1.307 - 1.308 - <pre class=idl> 1.309 -partial interface <a 1.310 - href="http://dev.w3.org/csswg/cssom/#the-cssrule-interface">CSSRule</a> { 1.311 - const unsigned short <a 1.312 - href="#region-style-rule-const">REGION_STYLE_RULE</a> = 16; 1.313 -}; 1.314 -</pre> 1.315 - 1.316 - <dl> 1.317 - <dt><dfn id=region-style-rule-const>REGION_STYLE_RULE</dfn> 1.318 - 1.319 - <dd>The rule is a CSSRegionStyleRule 1.320 - </dl> 1.321 - 1.322 - <pre class=idl> 1.323 -interface <a 1.324 - href="#dom-region-style-rule-interface">CSSRegionStyleRule</a> : <a 1.325 - href="http://dev.w3.org/csswg/cssom/#the-cssrule-interface">CSSRule</a> { 1.326 - attribute DOMString <a 1.327 - href="#region-style-rule-selectorText">selectorText</a>; 1.328 - readonly attribute <a 1.329 - href="http://dev.w3.org/csswg/cssom/#the-cssrulelist-sequence">CSSRuleList</a> <a 1.330 - href="#region-style-rule-cssRules">cssRules</a>; 1.331 - unsigned long <a 1.332 - href="#region-style-rule-insertRule">insertRule</a>(DOMString rule, unsigned long index) 1.333 - raises(<a 1.334 - href="http://www.w3.org/TR/dom/#exception-domexception">DOMException</a>); 1.335 - void <a 1.336 - href="#region-style-rule-deleteRule">deleteRule</a>(unsigned long index) 1.337 - raises(<a 1.338 - href="http://www.w3.org/TR/dom/#exception-domexception">DOMException</a>); 1.339 -}; 1.340 -</pre> 1.341 - 1.342 - <p>The <dfn id=region-style-rule-selectorText> <code 1.343 - class=idl>selectorText</code></dfn> attribute gets and sets the associated 1.344 - selector as defined in section <a 1.345 - href="http://dev.w3.org/csswg/cssom/#widl-CSSStyleRule-selectorText">6.4.3</a> 1.346 - of <a href="#CSSOM" rel=biblioentry>[CSSOM]<!--{{!CSSOM}}--></a>. 1.347 - 1.348 - <p>The <dfn id=region-style-rule-cssRules> <code 1.349 - class=idl>cssRules</code></dfn> attribute must return a <a 1.350 - href="http://dev.w3.org/csswg/cssom/#the-cssrulelist-sequence"><code>CSSRuleList</code></a> 1.351 - <a href="#CSSOM" rel=biblioentry>[CSSOM]<!--{{!CSSOM}}--></a> object for 1.352 - the list of <a 1.353 - href="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleRule"><code 1.354 - class=idl>CSSStyleRules</code></a> specified in the region style block. 1.355 - 1.356 - <p>The <dfn id=region-style-rule-insertRule> <code 1.357 - class=idl>insertRule(rule, index)</code></dfn> method inserts a <a 1.358 - href="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleRule"><code 1.359 - class=idl>CSSStyleRule</code></a> into the region style block before the 1.360 - specified index. If the index is equal to the length of the <a 1.361 - href="http://dev.w3.org/csswg/cssom/#the-cssrulelist-sequence"><code>CSSRuleList</code></a> 1.362 - the <a 1.363 - href="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleRule"><code 1.364 - class=idl>CSSStyleRule</code></a> is inserted at the end of the list. 1.365 - 1.366 - <p>Possible exceptions: 1.367 - 1.368 - <ul> 1.369 - <li><a 1.370 - href="http://www.w3.org/TR/dom/#dom-domexception-hierarchy_request_err"><code 1.371 - class=idl>HIERARCHY_REQUEST_ERR</code></a>: Raised if the rule to insert 1.372 - is not a <a 1.373 - href="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleRule"><code 1.374 - class=idl>CSSStyleRule</code></a>. 1.375 - 1.376 - <li><a 1.377 - href="http://www.w3.org/TR/dom/#dom-domexception-index_size_err"><code 1.378 - class=idl>INDEX_SIZE_ERR</code></a>: Raised if the specified index is not 1.379 - a valid insertion point. 1.380 - 1.381 - <li><a href="http://www.w3.org/TR/dom/#dom-domexception-syntax_err"><code 1.382 - class=idl>SYNTAX_ERR</code></a>: Raised if the specified rule has a 1.383 - syntax error and is unparsable. 1.384 - </ul> 1.385 - 1.386 - <p>The <dfn id=region-style-rule-deleteRule> <code 1.387 - class=idl>deleteRule(index)</code></dfn> method deletes the <a 1.388 - href="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleRule"><code 1.389 - class=idl>CSSStyleRule</code></a> in the <a 1.390 - href="http://dev.w3.org/csswg/cssom/#the-cssrulelist-sequence"><code>CSSRuleList</code></a> 1.391 - at the specified index. 1.392 - 1.393 - <p>Possible exception: 1.394 - 1.395 - <ul> 1.396 - <li><a 1.397 - href="http://www.w3.org/TR/dom/#dom-domexception-index_size_err"><code 1.398 - class=idl>INDEX_SIZE_ERR</code></a>: Raised if the specified index does 1.399 - not correspond to a rule in the region style block. 1.400 - </ul> 1.401 - 1.402 - <h3 id=named-flow-events><span class=secno>6.4. </span>Named flow events</h3> 1.403 + <h3 id=named-flow-events><span class=secno>6.3. </span>Named flow events</h3> 1.404 1.405 <p><a href="#dom-named-flow"><code class=idl>NamedFlow</code></a> objects 1.406 are <a 1.407 @@ -2349,11 +2189,11 @@ 1.408 </ul> 1.409 </table> 1.410 1.411 - <h3 id=cssomview-and-regions><span class=secno>6.5. </span>Clarifications 1.412 + <h3 id=cssomview-and-regions><span class=secno>6.4. </span>Clarifications 1.413 on pre-existing APIs</h3> 1.414 1.415 <h4 id=cssomview-getclientrects-and-getboundingclientrect><span 1.416 - class=secno>6.5.1. </span><code class=idl>getClientRects()</code> and 1.417 + class=secno>6.4.1. </span><code class=idl>getClientRects()</code> and 1.418 <code>getBoundingClientRects()</code></h4> 1.419 1.420 <p>The <a href="http://www.w3.org/TR/cssom-view/">CSSOM View Module</a> 1.421 @@ -2370,7 +2210,7 @@ 1.422 well and is computed from the set of rectangles returned by <code 1.423 class=idl>getClientRects()</code>. 1.424 1.425 - <h4 id=cssomview-offset-attributes><span class=secno>6.5.2. </span><code 1.426 + <h4 id=cssomview-offset-attributes><span class=secno>6.4.2. </span><code 1.427 class=idl>offsetTop</code>, <code class=idl>offsetLeft</code>, <code 1.428 class=idl>offsetWidth</code>, <code class=idl>offsetHeight</code> and 1.429 <code class=idl>offsetParent</code></h4> 1.430 @@ -3014,6 +2854,10 @@ 1.431 28<sup>th</sup> 2012</a> version</h3> 1.432 1.433 <ul> 1.434 + <li>Changed @region rule to ::region() functional pseudo-element 1.435 + 1.436 + <li>removed CSSRegionStyleRule (see above) 1.437 + 1.438 <li>Tied named flow event triggers to visual processing model 1.439 1.440 <li>Described how visual formatting of nested regions works 1.441 @@ -3412,15 +3256,6 @@ 1.442 href="http://www.w3.org/TR/2013/WD-css3-page-20130314/">http://www.w3.org/TR/2013/WD-css3-page-20130314/</a> 1.443 </dd> 1.444 <!----> 1.445 - 1.446 - <dt id=MEDIAQ>[MEDIAQ] 1.447 - 1.448 - <dd>Florian Rivoal. <a 1.449 - href="http://www.w3.org/TR/2012/REC-css3-mediaqueries-20120619/"><cite>Media 1.450 - Queries.</cite></a> 19 June 2012. W3C Recommendation. URL: <a 1.451 - href="http://www.w3.org/TR/2012/REC-css3-mediaqueries-20120619/">http://www.w3.org/TR/2012/REC-css3-mediaqueries-20120619/</a> 1.452 - </dd> 1.453 - <!----> 1.454 </dl> 1.455 <!--end-informative--> 1.456 1.457 @@ -3440,17 +3275,6 @@ 1.458 <li>break-inside, <a href="#break-inside" 1.459 title="section 3.3."><strong>3.3.</strong></a> 1.460 1.461 - <li><code class=idl>CSSRegionStyleRule</code> interface, <a 1.462 - href="#dom-region-style-rule-interface" 1.463 - title="section 6.3."><strong>6.3.</strong></a> 1.464 - 1.465 - <li><code class=idl>cssRules</code>, <a href="#region-style-rule-cssRules" 1.466 - title="section 6.3."><strong>6.3.</strong></a> 1.467 - 1.468 - <li><code class=idl>deleteRule(index)</code>, <a 1.469 - href="#region-style-rule-deleteRule" 1.470 - title="section 6.3."><strong>6.3.</strong></a> 1.471 - 1.472 <li>firstEmptyRegionIndex, <a 1.473 href="#dom-named-flow-first-empty-region-index" 1.474 title="section 6.1."><strong>6.1.</strong></a> 1.475 @@ -3485,10 +3309,6 @@ 1.476 href="#dom-named-flow-get-regions-by-content" 1.477 title="section 6.1."><strong>6.1.</strong></a> 1.478 1.479 - <li><code class=idl>insertRule(rule, index)</code>, <a 1.480 - href="#region-style-rule-insertRule" 1.481 - title="section 6.3."><strong>6.3.</strong></a> 1.482 - 1.483 <li><code class=idl>item(index)</code>, <a 1.484 href="#dom-named-flow-collection-item" 1.485 title="section 6.1."><strong>6.1.</strong></a> 1.486 @@ -3539,18 +3359,11 @@ 1.487 href="#dom-region-regionoverset" 1.488 title="section 6.2."><strong>6.2.</strong></a> 1.489 1.490 - <li>REGION_STYLE_RULE, <a href="#region-style-rule-const" 1.491 - title="section 6.3."><strong>6.3.</strong></a> 1.492 - 1.493 <li>renderer, <a href="#renderer" 1.494 title="section 11."><strong>11.</strong></a> 1.495 1.496 <li>RFCB, <a href="#rfcb" title="section 7.1."><strong>7.1.</strong></a> 1.497 1.498 - <li><code class=idl>selectorText</code>, <a 1.499 - href="#region-style-rule-selectorText" 1.500 - title="section 6.3."><strong>6.3.</strong></a> 1.501 - 1.502 <li>specified flow, <a href="#specified-flow" 1.503 title="section 3.1."><strong>3.1.</strong></a> 1.504
2.1 --- a/css-regions/Overview.src.html Mon May 13 16:42:38 2013 -0700 2.2 +++ b/css-regions/Overview.src.html Mon May 13 17:21:47 2013 -0700 2.3 @@ -290,13 +290,6 @@ 2.4 2.5 <h3 id="region-styling">CSS Region names and styling</h3> 2.6 2.7 -<div class="issue-marker" data-bug_id="16859" data-bug_status="NEW"> 2.8 - <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=16859">Issue-16859</a> 2.9 - <div class="issue-details"> 2.10 - <p class="short-desc">Reconsider using @rule for region styling</p> 2.11 - </div> 2.12 -</div> 2.13 - 2.14 <p>Content can be styled depending on 2.15 the CSS Region it flows into. 2.16 It is an extension 2.17 @@ -321,20 +314,21 @@ 2.18 <div class="example"> 2.19 <pre> 2.20 <style> 2.21 - @region #region1 { 2.22 - p { 2.23 - color: #0C3D5F; 2.24 - font-weight: bold; 2.25 - } 2.26 + #region1::region(p) { 2.27 + color: #0C3D5F; 2.28 + font-weight: bold; 2.29 + } 2.30 </style></pre> 2.31 </div> 2.32 2.33 - <p>The <code class="css">@region #region1</code> rule 2.34 - limits its selectors to content 2.35 - flowing into <code class="css">#region1</code>. 2.36 + <p>The <code class="css">::region()</code> functional pseudo-element 2.37 + takes a <code class="css">p</code> selector as an argument in this example. 2.38 + The color and font-weight declarations will apply 2.39 + to any fragments of paragraphs that are 2.40 + displayed in <code class="css">#region1</code>. 2.41 The following figure shows how 2.42 the rendering changes 2.43 - if we apply styling specific to <code>#region1</code>. 2.44 + if we apply this styling specific to <code>#region1</code>. 2.45 Note how less text fits into this box 2.46 now that the 'font-weight' is 2.47 bold instead of normal.</p> 2.48 @@ -427,7 +421,7 @@ 2.49 (see [[!CSS3-BREAK]]).</p> 2.50 2.51 2.52 - <h2 id="properties-and-rules">Properties and rules</h2> 2.53 + <h2 id="properties-and-region-styling">Properties and Region Styling</h2> 2.54 2.55 <h3 id="the-flow-into-property">The 'flow-into' property</h3> 2.56 2.57 @@ -1290,42 +1284,39 @@ 2.58 ([[CSS21]]).</p> 2.59 </div> 2.60 2.61 - <h3 id="the-at-region-style-rule">The @region rule</h3> 2.62 + <h3 id="the-at-region-style-rule">The ::region() functional pseudo-element</h3> 2.63 2.64 - <p>An '@region' rule contains style declarations specific to particular 2.65 - regions.</p> 2.66 + <p>A ::region() functional pseudo-element can be appended 2.67 + to a selector that matches a CSS Region, 2.68 + and takes a selector as an argument. 2.69 + This allows style declarations to be applied 2.70 + to fragments of named flow content flowing 2.71 + through particular regions.</p> 2.72 2.73 <pre> 2.74 -@region <selector> { 2.75 - ... CSS styling rules ... 2.76 +<region selector>::region(<content selector>) { 2.77 + ... CSS styling declarations ... 2.78 } 2.79 </pre> 2.80 2.81 - <p>The '@region' rule consists of the keyword '@region' followed by a 2.82 - <a href="http://www.w3.org/TR/css3-selectors/#selector-syntax">selector</a> 2.83 - and a block of style rules. The '@region' rule and the selector constitute 2.84 - the region's 'flow fragment' selector. The region's flow fragment selector 2.85 - specifies which range of elements in the flow are subject to the style rules in the 2.86 - following block: it applies to the range (see 2.87 - [[!DOM]]) from the region's flow that flows in the 2.88 - selected region(s).</p> 2.89 + <p>When the ::region() pseudo-element is appended to a 2.90 + <a href="http://www.w3.org/TR/css3-selectors/#selector-syntax">selector</a> 2.91 + that matches one or more CSS Regions, 2.92 + this creates a 'flow fragment' selector. 2.93 + The flow fragment selector specifies 2.94 + which range of elements in the flow 2.95 + can be matched by the selector argument. 2.96 + The selector argument can match elements 2.97 + in the range(s) (see [[!DOM]]) of the named flow 2.98 + that are displayed in the selected region(s).</p> 2.99 2.100 - <div class="issue-marker" data-bug_id="15713" data-bug_status="NEW"> 2.101 - <a href= 2.102 - "https://www.w3.org/Bugs/Public/show_bug.cgi?id=15713">Issue-15713</a> 2.103 + <p>Elements that are fully or partially 2.104 + in the flow fragment range may match a selector argument. 2.105 + However, the style declarations only apply 2.106 + to the fragment of the element 2.107 + that is displayed in the corresponding region(s).</p> 2.108 2.109 - <div class="issue-details"> 2.110 - <p class="short-desc">Model for styling element fragments</p> 2.111 - </div> 2.112 - </div> 2.113 - 2.114 - <p>Elements that are fully or partially in the 'flow fragment' may match any of the 2.115 - selectors found in the style rule. However, the style rules only apply to the 2.116 - portion of the element that falls into the corresponding region.</p> 2.117 - 2.118 - 2.119 - 2.120 - <p>Only a limited list of properties can be set in a region style rule:</p> 2.121 + <p>Only a limited list of properties apply to a ::region() functional pseudo-element:</p> 2.122 2.123 <ol> 2.124 <li><a href="http://www.w3.org/TR/CSS2/fonts.html">font properties</a></li> 2.125 @@ -1364,17 +1355,9 @@ 2.126 <strong>flow-from: article-flow;</strong> 2.127 } 2.128 2.129 - /* region style "RSA" */ 2.130 - <strong>@region #region-1, #region-2</strong> { 2.131 - div {...} 2.132 - p {...} 2.133 - } 2.134 - 2.135 - /* region style "RSB" */ 2.136 - <strong>@region #region-1</strong> { 2.137 - p { 2.138 - margin-right: 5em; 2.139 - } 2.140 + /* region styling */ 2.141 + <strong>#region-1::region(p)</strong> { 2.142 + margin-right: 5em; 2.143 } 2.144 </style> 2.145 2.146 @@ -1394,7 +1377,7 @@ 2.147 <div id="region_styling_illustration"> 2.148 <img id="region_styling_img_2" src="images/region-styling-2.png" 2.149 alt= 2.150 - "Illustration showing how a named flow content fits into regions to illustrate the @region styling." 2.151 + "Example showing how a named flow content fits into regions to illustrate region styling." 2.152 name="region_styling_img_2"> 2.153 2.154 <ul class="swatch-list"> 2.155 @@ -1417,56 +1400,26 @@ 2.156 </ul> 2.157 </div> 2.158 2.159 - <p>The region style ''RSA'' applies 2.160 - to flow content that is laid out 2.161 - in either 'region-1' or 'region-2'.</p> 2.162 - 2.163 - <p>The first rule set ''div {...}'' applies 2.164 - to all <code><div></code> elements 2.165 - that fit partially or fully 2.166 - into 'region-1' or 'region-2'. 2.167 - 'div-1' is split between 'region-1' 2.168 - and 'region-2' and gets the style 2.169 - from this style rule.</p> 2.170 - 2.171 - <p>The second rule set ''p {...}'' applies 2.172 - to all <code><p></code> elements 2.173 - that fit into 'region-1' or 'region-2'. 2.174 - In our example, 2.175 - both 'p-1'and 'p-2' are selected.</p> 2.176 - 2.177 - <p>The region style ''RSB'' applies 2.178 - to flow content that fits in 'region-1'.</p> 2.179 - 2.180 - <p>The first rule set ''p {...}'' 2.181 - matches 'p-1' and 'p-2' 2.182 + <p>The region styling applies 2.183 + to flow content that fits in 'region-1'. 2.184 + The selector argument matches 'p-1' and 'p-2' 2.185 because these paragraphs 2.186 flow into 'region-1'. 2.187 Only the fragment of 'p-2' 2.188 that flows into 'region-1' 2.189 - is styled with this rule.</p> 2.190 - </div> 2.191 - 2.192 - 2.193 - 2.194 - <div class="issue-marker" data-bug_id="15734" data-bug_status="NEW"> 2.195 - <a href= 2.196 - "https://www.w3.org/Bugs/Public/show_bug.cgi?id=15734">Issue-15734</a> 2.197 - 2.198 - <div class="issue-details"> 2.199 - <p class="short-desc">@region and specificity</p> 2.200 - </div> 2.201 + is styled with the pseudo-element.</p> 2.202 </div> 2.203 2.204 - <p>The specificity of the selectors in a '@region' rule is calculated as 2.205 - <a href="http://www.w3.org/TR/css3-selectors/#specificity">defined</a> in 2.206 - the CSS Selectors module (see [[SELECT]]). In other words, the '@region' 2.207 - rule adds an extra condition to the selector's matching, but does not 2.208 - change the selector's specificity. This is the same behavior as selectors 2.209 - appearing in '@media' rules declaration blocks (see [[MEDIAQ]]), where the 2.210 - rule does not influence the selectors' specificity.</p> 2.211 + <p>All of the selectors 2.212 + in a ::region() functional pseudo-element 2.213 + contribute to its <a href="http://www.w3.org/TR/css3-selectors/#specificity">specificity</a>. 2.214 + So the specificity of the ::region() pseudo-element 2.215 + in the example above would combine 2.216 + the id selector's specificity 2.217 + with the specificity of the type selector in the argument, 2.218 + resulting in a specificity of 101.</p> 2.219 2.220 - <p>Consequently, selectors that match a given element (as describe above), 2.221 + <p>Selectors that match a given element or element fragment (as described above), 2.222 participate in the <a href="http://www.w3.org/TR/2011/REC-CSS2-20110607/cascade.html#cascading-order">CSS Cascading 2.223 order</a> as defined in [[!CSS21]].</p> 2.224 2.225 @@ -1968,88 +1921,6 @@ 2.226 but a script is still holding 2.227 a reference to the <code class="idl">Region</code> object.</p> 2.228 2.229 - <h3 id="region-style-rule-interface">The CSSRegionStyleRule interface</h3> 2.230 - 2.231 - <p>The <dfn id='dom-region-style-rule-interface'> 2.232 - <code class="idl">CSSRegionStyleRule</code> 2.233 - interface</dfn> represents 2.234 - an '@region' rule 2.235 - in a CSS style sheet. 2.236 - This rule type is added 2.237 - to the <a href="http://dev.w3.org/csswg/cssom/#the-cssrule-interface"><code>CSSRule</code></a> [[!CSSOM]] interface.</p> 2.238 - 2.239 - <pre class="idl"> 2.240 -partial interface <a href="http://dev.w3.org/csswg/cssom/#the-cssrule-interface">CSSRule</a> { 2.241 - const unsigned short <a href="#region-style-rule-const">REGION_STYLE_RULE</a> = 16; 2.242 -}; 2.243 -</pre> 2.244 - <dl> 2.245 - <dt><dfn id="region-style-rule-const">REGION_STYLE_RULE</dfn></dt> 2.246 - <dd>The rule is a CSSRegionStyleRule</dd> 2.247 - </dl> 2.248 - <pre class="idl"> 2.249 -interface <a href="#dom-region-style-rule-interface">CSSRegionStyleRule</a> : <a href="http://dev.w3.org/csswg/cssom/#the-cssrule-interface">CSSRule</a> { 2.250 - attribute DOMString <a href="#region-style-rule-selectorText">selectorText</a>; 2.251 - readonly attribute <a href="http://dev.w3.org/csswg/cssom/#the-cssrulelist-sequence">CSSRuleList</a> <a href="#region-style-rule-cssRules">cssRules</a>; 2.252 - unsigned long <a href="#region-style-rule-insertRule">insertRule</a>(DOMString rule, unsigned long index) 2.253 - raises(<a href="http://www.w3.org/TR/dom/#exception-domexception">DOMException</a>); 2.254 - void <a href="#region-style-rule-deleteRule">deleteRule</a>(unsigned long index) 2.255 - raises(<a href="http://www.w3.org/TR/dom/#exception-domexception">DOMException</a>); 2.256 -}; 2.257 -</pre> 2.258 - 2.259 - <p>The <dfn id="region-style-rule-selectorText"> 2.260 - <code class="idl">selectorText</code></dfn> 2.261 - attribute gets and sets 2.262 - the associated selector 2.263 - as defined in section <a href="http://dev.w3.org/csswg/cssom/#widl-CSSStyleRule-selectorText">6.4.3</a> of [[!CSSOM]]. 2.264 - 2.265 - <p>The <dfn id="region-style-rule-cssRules"> 2.266 - <code class="idl">cssRules</code></dfn> 2.267 - attribute must return a 2.268 - <a href="http://dev.w3.org/csswg/cssom/#the-cssrulelist-sequence"><code>CSSRuleList</code></a> [[!CSSOM]] 2.269 - object for the list of 2.270 - <a href="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleRule"><code class="idl">CSSStyleRules</code></a> 2.271 - specified in the region style block.</p> 2.272 - 2.273 - <p>The <dfn id="region-style-rule-insertRule"> 2.274 - <code class="idl">insertRule(rule, index)</code></dfn> 2.275 - method inserts a 2.276 - <a href="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleRule"><code class="idl">CSSStyleRule</code></a> 2.277 - into the region style block 2.278 - before the specified index. 2.279 - If the index is equal to the length 2.280 - of the <a href="http://dev.w3.org/csswg/cssom/#the-cssrulelist-sequence"><code>CSSRuleList</code></a> the 2.281 - <a href="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleRule"><code class="idl">CSSStyleRule</code></a> 2.282 - is inserted at the end of the list.</p> 2.283 - 2.284 - <p>Possible exceptions:</p> 2.285 - <ul> 2.286 - <li><a href="http://www.w3.org/TR/dom/#dom-domexception-hierarchy_request_err"><code class="idl">HIERARCHY_REQUEST_ERR</code></a>: 2.287 - Raised if the rule to insert is not a 2.288 - <a href="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleRule"><code class="idl">CSSStyleRule</code></a>.</li> 2.289 - <li><a href="http://www.w3.org/TR/dom/#dom-domexception-index_size_err"><code class="idl">INDEX_SIZE_ERR</code></a>: 2.290 - Raised if the specified index 2.291 - is not a valid insertion point.</li> 2.292 - <li><a href="http://www.w3.org/TR/dom/#dom-domexception-syntax_err"><code class="idl">SYNTAX_ERR</code></a>: 2.293 - Raised if the specified rule 2.294 - has a syntax error 2.295 - and is unparsable.</li> 2.296 - </ul> 2.297 - <p>The <dfn id="region-style-rule-deleteRule"> 2.298 - <code class="idl">deleteRule(index)</code></dfn> 2.299 - method deletes the <a href="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleRule"><code class="idl">CSSStyleRule</code></a> 2.300 - in the <a href="http://dev.w3.org/csswg/cssom/#the-cssrulelist-sequence"><code>CSSRuleList</code></a> 2.301 - at the specified index.</p> 2.302 - 2.303 - <p>Possible exception:</p> 2.304 - <ul> 2.305 - <li><a href="http://www.w3.org/TR/dom/#dom-domexception-index_size_err"><code class="idl">INDEX_SIZE_ERR</code></a>: 2.306 - Raised if the specified index 2.307 - does not correspond to a rule 2.308 - in the region style block.</li> 2.309 - </ul> 2.310 - 2.311 <h3 id="named-flow-events">Named flow events</h3> 2.312 2.313 <p><a href="#dom-named-flow"><code class="idl">NamedFlow</code></a> 2.314 @@ -2588,6 +2459,8 @@ 2.315 <h3 id="changes_from_Aug_28_2012">Changes from <a href="http://www.w3.org/TR/2012/WD-css3-regions-20120823/">August 28<sup>th</sup> 2012</a> version</h3> 2.316 2.317 <ul> 2.318 + <li>Changed @region rule to ::region() functional pseudo-element</li> 2.319 + <li>removed CSSRegionStyleRule (see above)</li> 2.320 <li>Tied named flow event triggers to visual processing model</li> 2.321 <li>Described how visual formatting of nested regions works</li> 2.322 <li>Added regionoversetchange event</li>
