- From: Vincent Hardy via cvs-syncmail <cvsmail@w3.org>
- Date: Sat, 04 Feb 2012 07:19:58 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-regions In directory hutz:/tmp/cvs-serv6545 Modified Files: Overview.html Overview.src.html Log Message: Addressing bug 15131 Index: Overview.html =================================================================== RCS file: /sources/public/csswg/css3-regions/Overview.html,v retrieving revision 1.50 retrieving revision 1.51 diff -u -d -r1.50 -r1.51 --- Overview.html 4 Feb 2012 06:13:11 -0000 1.50 +++ Overview.html 4 Feb 2012 07:19:56 -0000 1.51 @@ -533,20 +533,54 @@ </pre> - <p>And the following snippet shows an example of elements that will be used - as regions. + <p>And the following snippet shows an example using grid cells to define + the region areas: <pre> -<div id="region1"></div> -<div id="region2"></div> -<div id="region3"></div> -<div id="region4"></div> +<style> + #page { + width: 800px; + height: 600px; + grid-template: "aaa.e" + "....e" + "bbb.e" + "....e" + "c.d.e"; + grid-rows: 52% 4% 20% 4% 20%; + grid-columns: 30% 5% 30% 5% 30%; + } + #regionA { grid-cell: a; } + #region1 { grid-cell: b; } + #region2 { grid-cell: c; } + #region3 { grid-cell: d; } + #region4 { grid-cell: e; } +</style> + +<div id="page"> + <div id="region1"></div> + <div id="region2"></div> + <div id="region3"></div> + <div id="region4"></div> +</div> </pre> - <p>CSS layout facilities can position and size regions as needed. However, - there is no existing mechanism to associate the content with the regions - so that content flows as intended. Figure 2 shows an example of the - intended visual rendering of the content. + <p>Any of the CSS layout facilities can be used to create, position and + size regions as needed. + + <div class=note> + <p>Using a grid layout (see <a href="#CSS3-GRID-LAYOUT" + rel=biblioentry>[CSS3-GRID-LAYOUT]<!--{{CSS3-GRID-LAYOUT}}--></a> is just + an example. The example could use a flexible box layout as well, see <a + href="#CSS3-FLEXBOX" + rel=biblioentry>[CSS3-FLEXBOX]<!--{{CSS3-FLEXBOX}}--></a>.</p> + + <p>The CSS regions specification does not define a layout mechanism and is + meant to integrate with existing and future CSS layout facilities.</p> + </div> + + <p>However, there is no existing mechanism to associate the content with + the regions so that content flows as intended. Figure 2 shows an example + of the intended visual rendering of the content. <div class=figure> <img alt="Sample rendering showing a single thread of text flowing through a chain of regions" @@ -555,8 +589,18 @@ </div> <p>The CSS regions module is independent of the layout of regions and the - mechanism used to create them. However, for simplicity, our example uses - elements as regions as shown in the previous code snippet. + mechanism used to create them. For simplicity, our example uses elements + as regions as shown in the previous code snippet. + + <div class=note> + <p>While the example uses elements as regions, it is important to note + that this is not required for regions. Regions can be pseudo-elements, + such as ‘<code class=css>::before</code>’ and ‘<code + class=css>::after</code>’. The only requirement for an element or + pseudo-element to become a region is that it needs to be subject to CSS + styling to receive the ‘<a href="#flow-from"><code + class=property>flow-from</code></a>’ property.</p> + </div> <p>The following code example illustrates how the content of the <code>article</code> element becomes a flow and how the areas ‘<code @@ -641,6 +685,16 @@ padding: 0px; } <strong>}</strong> + + +/* + * Style that would apply to region1's normal content but + * will not apply to its named flow content. + */ +#region1 p { + color: red; +} + </style> </pre> </div> @@ -658,6 +712,15 @@ <p class=caption>Different rendering with a different region styling</p> </div> + <p>Finally, note how the ‘<code class=property>red</code>’ + color specified for <code><p></code> elements under + <code>#region1</code> does not apply to content that flows into the + region. This specified style does not apply to the named flow content + because the <code><p></code> elements in the ‘<code + class=property>article</code>’ named flow are not descendants of the + <code>#region1</code> element and, consequently, the <code>"#region1 + p"</code> selector does not apply to these elements. + <h2 id=css-regions-concepts><span class=secno>2. </span>CSS regions concepts</h2> @@ -2161,6 +2224,9 @@ <li>Modified wording about containing block resolution for absolutely positioned elements in a named flow. + + <li>Modified initial examples as per <a + href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15131">Bug 15131</a> </ul> <h3 id="changes_from_June_09_2011"><span class=secno>10.2. </span>Changes Index: Overview.src.html =================================================================== RCS file: /sources/public/csswg/css3-regions/Overview.src.html,v retrieving revision 1.55 retrieving revision 1.56 diff -u -d -r1.55 -r1.56 --- Overview.src.html 4 Feb 2012 06:13:11 -0000 1.55 +++ Overview.src.html 4 Feb 2012 07:19:56 -0000 1.56 @@ -392,16 +392,47 @@ </pre> - <p>And the following snippet shows an example of elements that will be used - as regions.</p> + <p>And the following snippet shows an example using grid cells to + define the region areas:</p> <pre> -<div id="region1"></div> -<div id="region2"></div> -<div id="region3"></div> -<div id="region4"></div> +<style> + #page { + width: 800px; + height: 600px; + grid-template: "aaa.e" + "....e" + "bbb.e" + "....e" + "c.d.e"; + grid-rows: 52% 4% 20% 4% 20%; + grid-columns: 30% 5% 30% 5% 30%; + } + #regionA { grid-cell: a; } + #region1 { grid-cell: b; } + #region2 { grid-cell: c; } + #region3 { grid-cell: d; } + #region4 { grid-cell: e; } +</style> + +<div id="page"> + <div id="region1"></div> + <div id="region2"></div> + <div id="region3"></div> + <div id="region4"></div> +</div> </pre> - <p>CSS layout facilities can position and size regions as needed. However, + <p>Any of the CSS layout facilities can be used to create, position and size regions + as needed.</p> + + <div class="note"> + <p>Using a grid layout (see [[CSS3-GRID-LAYOUT]] is just an example. + The example could use a flexible box layout as well, see [[CSS3-FLEXBOX]].</p> + <p>The CSS regions specification does not define a layout mechanism and is meant + to integrate with existing and future CSS layout facilities.</p> + </div> + + <p>However, there is no existing mechanism to associate the content with the regions so that content flows as intended. Figure 2 shows an example of the intended visual rendering of the content.</p> @@ -414,9 +445,18 @@ </div> <p>The CSS regions module is independent of the layout of regions and - the mechanism used to create them. However, for simplicity, our example + the mechanism used to create them. For simplicity, our example uses elements as regions as shown in the previous code snippet.</p> + + <div class="note"> + <p>While the example uses elements as regions, it is important to note that + this is not required for regions. Regions can be pseudo-elements, + such as '::before' and '::after'. The only requirement for an element + or pseudo-element to become a region is that it needs to be subject to + CSS styling to receive the 'flow-from' property.</p> + </div> + <p>The following code example illustrates how the content of the <code>article</code> element becomes a flow and how the areas 'region1', 'region2', 'region3' and 'region4' become regions that consume the 'article_flow' content.</p> @@ -491,6 +531,16 @@ padding: 0px; } <strong>}</strong> + + +/* + * Style that would apply to region1's normal content but + * will not apply to its named flow content. + */ +#region1 p { + color: red; +} + </style> </pre> </div> @@ -508,6 +558,14 @@ <p class="caption">Different rendering with a different region styling</p> </div> + + <p>Finally, note how the 'red' color specified for <code><p></code> + elements under <code>#region1</code> does not apply to content that + flows into the region. This specified style does not apply to + the named flow content because the <code><p></code> elements + in the 'article' named flow are not descendants of the <code>#region1</code> + element and, consequently, the <code>"#region1 p"</code> selector does + not apply to these elements.</p> <h2 id="css-regions-concepts">CSS regions concepts</h2> @@ -1846,6 +1904,7 @@ per <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15828">Bug 15828</a>.</li> <li>Modified wording about containing block resolution for absolutely positioned elements in a named flow.</li> + <li>Modified initial examples as per <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15131">Bug 15131</a></li> </ul>
Received on Saturday, 4 February 2012 07:20:06 UTC