8000 csswg-drafts/css-template/new2.html at f6bc98d8e84d8098e0a5c06dfdb35c3cd9e91ebc · simonwuelker/csswg-drafts · GitHub
Skip to content

new2.html

Latest commit

 

History

History
5479 lines (4286 loc) · 205 KB

new2.html

File metadata and controls

5479 lines (4286 loc) · 205 KB
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang=en>
<head
profile="http://microformats.org/profile/hcard http://microformats.org/wiki/rel-license">
<title>CSS Grid Template Layout Module</title>
<meta content="text/html; charset=utf-8" http-equiv=content-type>
<link href="../default.css" rel=stylesheet type="text/css">
<style type="text/css">
.prod { font-family: inherit; font-size: inherit }
pre.prod { white-space: pre-wrap; margin: 1em 0 1em 2em }
code { font-size: inherit; }
.level4 {color: gray; clear: both}
.level4 h2, .level4 h3, .level4 h4 {color: inherit}
p.level4:before, div.level4:before, li.level4:before {
content: "LEVEL\A 4"; background: #BBB; color: white; white-space: pre;
text-align: center; float: left; margin: 0 0.3em 0.1em 0; min-width: 0;
border-radius: 100%; line-height: 1; font-size: small;
padding: 1.1em 0.4em 0.6em 0.4em}
.example .visible {border: thin dotted silver}
/* delete this block when you've cleared out all the .replaceme elements */
.replaceme {
border: solid red;
padding: 0 0.5em;
margin: 0 0.1em;
background: yellow;
color: green;
}
.replaceme:before {
content: "FIXME(";
color: black;
}
.replaceme:after {
content: ")";
color: black;
}
</style>
<link href="http://www.w3.org/StyleSheets/TR/W3C-ED.css" rel=stylesheet
type="text/css">
<body>
<div class=head> <!--begin-logo-->
<p><a href="http://www.w3.org/"><img alt=W3C height=48
src="http://www.w3.org/Icons/w3c_home" width=72></a> <!--end-logo-->
<h1>CSS Grid Template Layout Module</h1>
<!--=================================================================-->
<h2 class="no-num no-toc" id=longstatus-date-3-august-2004>Editor's Draft
2 March 2012</h2>
<dl>
<dt>This version:
<dd><a
href="http://www.w3.org/TR/2012/ED-css3-layout-20120302/">http://www.w3.org/TR/2012/ED-css3-layout-20120302/</a>
<dt>Latest version:
<dd> <a
href="http://www.w3.org/TR/css3-layout/">http://www.w3.org/TR/css3-layout/</a>
<dt>Previous version:
<dd><a
href="http://www.w3.org/TR/2011/WD-css3-layout-20111129/">http://www.w3.org/TR/2011/WD-css3-layout-20111129/</a>
<dt>Editors:
<dd class=vcard><span class=fn>Bert Bos</span> (<span
class=org>W3C</span>) <a class=email href="mailto:bert@w3.org"
rel=author>bert@w3.org</a>
<dd class=vcard><span class=fn>César Acebal</span> (<span
class=org>University of Oviedo</span>)
</dl>
<!--begin-copyright-->
<p class=copyright><a
href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
rel=license>Copyright</a> &copy; 2012 <a
href="http://www.w3.org/"><acronym
title="World Wide Web Consortium">W3C</acronym></a><sup>&reg;</sup> (<a
href="http://www.csail.mit.edu/"><acronym
title="Massachusetts Institute of Technology">MIT</acronym></a>, <a
href="http://www.ercim.eu/"><acronym
title="European Research Consortium for Informatics and Mathematics">ERCIM</acronym></a>,
<a href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved. W3C <a
href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>,
<a
href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>
and <a
href="http://www.w3.org/Consortium/Legal/copyright-documents">document
use</a> rules apply.</p>
<!--end-copyright-->
<hr title="Separator for header">
</div>
<!--=================================================================-->
<h2 class="no-num no-toc" id=abstract>Abstract</h2>
<div class=sidefigure>
<p><img alt="Image: four elements move to four slots in a template"
longdesc=diagram.desc src=diagram.png>
<p class=caption>Above: a typical Web page. Below: the underlying grid
template.
</div>
<p>CSS is a simple, declarative language for creating style sheets that
specify the rendering of HTML and other structured documents. This module
defines a typographic grid for CSS. It has features to set up a grid
template, to flow content into it, and to absolutely position elements on
a grid.
<p>The &lsquo;<a href="#grid"><code class=property>grid</code></a>&rsquo;
property sets up a matrix of rows and columns and designates empty areas
and areas for content (called “slots”). The &lsquo;<a
href="#flow0"><code class=property>flow</code></a>&rsquo; property
specifies into which slot an element flows. A grid templates is like a
table in that the various slots are aligned in rows and columns and can
automatically adapt to each others size, and it is like absolute
positioning in that elements can be put in arbitrary slots so that the
visual order becomes independent of the document order.
<p>The &lsquo;<a href="#slot"><code class=css>::slot()</code></a>&rsquo;
pseudo-element allows to style the slots (backgrounds, borders, etc.)
<p>The &lsquo;<a href="#grid-position0"><code
class=property>grid-position</code></a>&rsquo; property can be used
instead of the &lsquo;<a href="#top"><code
class=property>top</code></a>&rsquo;, &lsquo;<a href="#left"><code
class=property>left</code></a>&rsquo;, &lsquo;<a href="#right"><code
class=property>right</code></a>&rsquo; and &lsquo;<a href="#bottom"><code
class=property>bottom</code></a>&rsquo; properties from level 2 to
position absolutely positioned elements relative to a grid template, so
that they align with the content in the grid.
<p class=level4>Grid templates can also be associated with pages in paged
media, to create page templates.
<p class=level4>Slots can also form “chains” to create non-rectangular
regions. A chain of slots is like a series of pages or columns: content is
distributed over the slots by breaking it at possible break points (see
the &lsquo;<code class=css>break-*</code>&rsquo; properties from <a
href="#CSS3-BREAK" rel=biblioentry>[CSS3-BREAK]<!--{{CSS3-BREAK}}--></a>).
<p class=level4>The &lsquo;<code class=css>::fragment()</code>&rsquo;
pseudo-element allows to select (parts of) elements based on whether they
fall in a certain slot or not, and thus style content differently in
different slots (region-based styling).
<!--=================================================================-->
<h2 class="no-num no-toc" id=status>Status of this document</h2>
<!--begin-status-->
<p>This is a public copy of the editors' draft. It is provided for
discussion only and may change at any moment. Its publication here does
not imply endorsement of its contents by W3C. Don't cite this document
other than as work in progress.
<p>The (<a
href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) public
mailing list <a
href="mailto:www-style@w3.org?Subject=%5Bcss3-layout%5D%20PUT%20SUBJECT%20HERE">
www-style@w3.org</a> (see <a
href="http://www.w3.org/Mail/Request">instructions</a>) is preferred for
discussion of this specification. When sending e-mail, please put the text
&#8220;css3-layout&#8221; in the subject, preferably like this:
&#8220;[<!---->css3-layout<!---->] <em>&hellip;summary of
comment&hellip;</em>&#8221;
<p>This document was produced by the <a href="/Style/CSS/members">CSS
Working Group</a> (part of the <a href="/Style/">Style Activity</a>).
<p>This document was produced by a group operating under the <a
href="/Consortium/Patent-Policy-20040205/">5 February 2004 W3C Patent
Policy</a>. W3C maintains a <a hre 67F6 f="/2004/01/pp-impl/32061/status"
rel=disclosure>public list of any patent disclosures</a> made in
connection with the deliverables of the group; that page also includes
instructions for disclosing a patent. An individual who has actual
knowledge of a patent which the individual believes contains <a
href="/Consortium/Patent-Policy-20040205/#def-essential">Essential
Claim(s)</a> must disclose the information in accordance with <a
href="/Consortium/Patent-Policy-20040205/#sec-Disclosure">section 6 of the
W3C Patent Policy</a>.</p>
<!--end-status-->
<p>This draft combines ideas from earlier drafts on Template Layout, Grid
Positioning <a href="#CSS3GRID"
rel=biblioentry>[CSS3GRID]<!--{{CSS3GRID}}--></a> and Grid Layout <a
href="#CSS3-GRID-LAYOUT"
rel=biblioentry>[CSS3-GRID-LAYOUT]<!--{{CSS3-GRID-LAYOUT}}--></a>.
<p>The section on <a href="#cr-exit-criteria">“CR exit criteria”</a>
lists some conditions for this specification to become a W3C
Recommendation.
<p>Issues on this draft are mentioned in the text itself (<span
class=issue>like this</span>) and/or in the on-line Tracker under <a
href="http://www.w3.org/Style/CSS/Tracker/products/15">“Details on
Product CSS3 Template Layout.”</a>
<!--=================================================================-->
<h2 class="no-num no-toc" id=contents>Table of contents</h2>
<!--begin-toc-->
<ul class=toc>
<li><a href="#introduction"><span class=secno>1. </span>Introduction</a>
<ul class=toc>
<li><a href="#summary-and-examples"><span class=secno>1.1.
</span>Summary and examples</a>
<li><a href="#dependencies"><span class=secno>1.2. </span>Dependencies
on other modules</a>
<li><a href="#values"><span class=secno>1.3. </span>Values</a>
<li><a href="#accessibility"><span class=secno>1.4. </span>A note about
accessibility</a>
</ul>
<li><a href="#declaring-templates"><span class=secno>2. </span>Declaring
templates</a>
<ul class=toc>
<li><a href="#grid-template"><span class=secno>2.1. </span> Declaring a
template: &lsquo;<code class=property>grid-template</code>&rsquo;</a>
<li><a href="#grid-column-sizes"><span class=secno>2.2. </span>
Specifying the widths of columns: &lsquo;<code
class=property>grid-columns</code>&rsquo;</a>
<li><a href="#grid-row-sizes"><span class=secno>2.3. </span> Specifying
the height of rows: &lsquo;<code
class=property>grid-rows</code>&rsquo;</a>
<li><a href="#grid-shorthand"><span class=secno>2.4. </span> The
&lsquo;<code class=property>grid</code>&rsquo; shorthand property</a>
<li><a href="#default"><span class=secno>2.5. </span>Default slots</a>
<li><a href="#slot-sizes"><span class=secno>2.6. </span>Calculating the
size of the grid</a>
</ul>
<li><a href="#positioning"><span class=secno>3. </span>Putting content
into a grid element</a>
<ul class=toc>
<li><a href="#flow"><span class=secno>3.1. </span>Flowing content into
slots: &lsquo;<code class=property>flow</code>&rsquo;</a>
<li><a href="#absolute-positioning-using-a-grid-grid-p"><span
class=secno>3.2. </span>Absolute positioning using a grid: &lsquo;<code
class=property>grid-position-x</code>&rsquo; and &lsquo;<code
class=property>grid-position-y</code>&rsquo;</a>
<li><a href="#grid-position"><span class=secno>3.3. </span> The
&lsquo;<code class=property>grid-position</code>&rsquo; shorthand
property</a>
</ul>
<li><a href="#slot-pseudo"><span class=secno>4. </span>Styling slots: the
&lsquo;<code class=css>::slot()</code>&rsquo; pseudo-element</a>
<li><a href="#styling-the-contents-of-slots-fragment"><span class=secno>5.
</span>Styling the contents of slots: &lsquo;<code
class=css>::fragment()</code>&rsquo;</a>
<li><a href="#rendering-of-grid-elements"><span class=secno>6.
</span>Rendering of grid elements</a>
<ul class=toc>
<li><a href="#vertical-alignment"><span class=secno>6.1. </span>Vertical
alignment of the contents of slots</a>
<li><a href="#paged"><span class=secno>6.2. </span>Breaking grid
elements across pages or columns</a>
<li><a href="#stacking-order"><span class=secno>6.3. </span>Stacking
order</a>
<li><a href="#floating-elements-inside-templates"><span class=secno>6.4.
</span>Floating elements inside templates</a>
</ul>
<li><a href="#page-templates"><span class=secno>7. </span> Page-based grid
templates</a>
<li><a href="#chains"><span class=secno>8. </span>Chaining slots: the
&lsquo;<code class=property>chains</code>&rsquo; property</a>
<li><a href="#cr-exit-criteria"><span class=secno>9. </span>CR exit
criteria</a>
<li><a href="#history"><span class=secno>10. </span>History</a>
<ul class=toc>
<li><a href="#developing-a-model-of-declaring-using-st"><span
class=secno>10.1. </span>Developing a model of declaring, using,
styling and resizing grids</a>
<li><a href="#syntax-features-and-levels"><span class=secno>10.2.
</span>Syntax, features and levels</a>
<ul class=toc>
<li><a href="#named-vs-numbered-slots"><span class=secno>10.2.1.
</span>Named vs numbered slots</a>
<li><a href="#single-letter-names-vs-identifiers"><span
class=secno>10.2.2. </span>Single letter names vs identifiers</a>
<li><a href="#display"><span class=secno>10.2.3. </span>Extend
&lsquo;<code class=property>display</code>&rsquo; or add a grid
property</a>
<li><a href="#combining-columns-and-grids"><span class=secno>10.2.4.
</span>Combining columns and grids</a>
<li><a href="#shorthand-vs-single-property"><span class=secno>10.2.5.
</span>Shorthand vs single property</a>
<li><a href="#the-number-of-rows-and-columns"><span
class=secno>10.2.6. </span>The number of rows and columns</a>
<li><a href="#need-fr"><span class=secno>10.2.7. </span>&lsquo;<code
class=css>*</code>&rsquo; vs &lsquo;<code
class=css>fr</code>&rsquo;</a>
<li><a href="#auto-add"><span class=secno>10.2.8. </span>Automatically
add rows and columns</a>
<li><a href="#rectangular-slots-vs-non-rectangular-slo"><span
class=secno>10.2.9. </span>Rectangular slots vs non-rectangular
slots</a>
<li><a href="#chained"><span class=secno>10.2.10. </span>Chained
slots</a>
<li><a href="#page-grid"><span class=secno>10.2.11. </span>Page
grids</a>
<li><a href="#style-the-slots-pseudo-elements"><span
class=secno>10.2.12. </span>Style the slots (pseudo-elements)</a>
<li><a href="#style-the-contents-of-slots-region-based"><span
class=secno>10.2.13. </span>Style the contents of slots (region-based
styling)</a>
<li><a href="#orient-the-grid-with-writing-mode-vs-ori"><span
class=secno>10.2.14. </span>Orient the grid with writing mode vs
orient the slots</a>
<li><a href="#indicating-the-default-slot-vs-"><span
class=secno>10.2.15. </span>Indicating the default slot (&lsquo;<code
class=css>*</code>&rsquo; vs &lsquo;<code
class=css>@</code>&rsquo;)</a>
<li><a href="#abspos"><span class=secno>10.2.16. </span>Flowing vs
absolutely positioning content in a grid</a>
<li><a href="#use-the-pseudo-class-to-create-additiona"><span
class=secno>10.2.17. </span>Use the pseudo-class to create additional
slots</a>
<li><a href="#names-for-edges"><span class=secno>10.2.18. </span>Names
for edges</a>
<li><a href="#position-from-the-right-and-bottom"><span
class=secno>10.2.19. </span>Position from the right and bottom</a>
<li><a href="#syntax-features-to-shorten-long-grid-spe"><span
class=secno>10.2.20. </span>Syntax features to shorten long grid
specifications</a>
<li><a href="#fit-content-vs-auto-vshellip"><span class=secno>10.2.21.
</span>&lsquo;<code class=css>fit-content</code>&rsquo; vs
&lsquo;<code class=css>auto</code>&rsquo; vs&hellip;</a>
<li><a href="#vert-align"><span class=secno>10.2.22. </span>Vertical
alignment inside slots</a>
<li><a href="#horizontal-alignment-inside-slots"><span
class=secno>10.2.23. </span>Horizontal alignment inside slots</a>
<li><a href="#auto-margins-on-slots"><span class=secno>10.2.24.
</span>Auto margins on slots</a>
<li><a href="#page-floats"><span class=secno>10.2.25. </span>Page
floats</a>
<li><a href="#break-properties"><span class=secno>10.2.26.
</span>Break-* properties</a>
<li><a href="#next-same"><span class=secno>10.2.27. </span>Automatic
placement of elements</a>
</ul>
</ul>
<li><a href="#changes"><span class=secno>11. </span>Changes</a>
<li class=no-num><a href="#acknowledgments">Acknowledgments</a>
<li class=no-num><a href="#references">References</a>
<li class=no-num><a href="#index">Index</a>
<li class=no-num><a href="#property-index">Property index</a>
</ul>
<!--end-toc-->
<!--=================================================================-->
<h2 id=introduction><span class=secno>1. </span>Introduction</h2>
<p><em>(This section is not normative.)</em>
<h3 id=summary-and-examples><span class=secno>1.1. </span>Summary and
examples</h3>
<div class=sidefigure>
<p><img alt="Image: four elements move to four slots in a template"
longdesc=diagram.desc src=diagram.png>
<p class=caption>Above: a typical Web page. Below: the underlying grid
template. It has four slots, a, b, c and d and the grid template is
defined by &lsquo;<code class=css>grid: "aaaaaaa"
"bccccdd"</code>&rsquo;.
</div>
<p class=mtb>The styling of a Web page, a form or a graphical user
interface can roughly be divided in two parts: (1) defining the overall
“grid” of the page or window and (2) specifying the fonts, indents,
colors, etc., of the text and other objects. The two are not completely
separate, of course, because indenting or coloring a text influences the
perceived grid as well. Nevertheless, when one separates the parts of a
style that should change when the window gets bigger from the parts that
stay the same, one often finds that the grid changes (room for a sidebar,
extra navigation bar, big margins, larger images…), while fonts, colors,
indents, numbering styles, and many other things don't have to change,
until the size of the window becomes extreme.
<p>The properties in this specification work by associating a layout grid
with an element. Rather than letting an element lay out its descendants in
a single flow, the policy defined in this module gives an element a
<span>grid template,</span> which is a set of <a href="#slot">slots</a>
aligned to an invisible grid, where each slot is a separate flow. The
descendants are given a &lsquo;<a href="#flow0"><code
class=property>flow</code></a>&rsquo; property to designate the slot into
which they flow.
<p>Because layouts on the Web have to adapt to different window and paper
sizes, the rows and columns of the grid can be made fixed or flexible in
size.
<p>The typical use cases for these properties include:
<ul>
<li>
<p>Complex Web pages, with multiple navigation bars in fixed positions,
areas for advertisements, etc.
<li>
<p>Complex forms, where the alignment of labels and form fields may be
easier with the properties of this module than with the properties for
tables and margins.
<li>
<p>GUIs, where buttons, toolbars, labels, icons, etc., are aligned in
complex ways and have to stay aligned (and not wrap, for example) when
the window is resized.
<li>
<p class=level4>Paged displays (e.g., printed media) where each page is
divided in fixed areas for different kinds of content.
<li>
<p class=level4>Complex pages with multiple regions, where the style of
the text does not only depend on the type of element it comes from, but
also on the region it is displayed in.
</ul>
<p>Once a grid template has been defined, it can also be used as an
alternative coordinate system for absolutely positioned elements. Such
elements do not flow into slots, but, by using &lsquo;<a
href="#grid-position0"><code
class=property>grid-position</code></a>&rsquo; (instead of &lsquo;<a
href="#top"><code class=property>top</code></a>&rsquo;, &lsquo;<a
href="#left"><code class=property>left</code></a>&rsquo; etc.) can be
aligned to grid lines and thus to the content in the grid.
<p>But for many applications, template-based positioning makes absolute
positioning unnecessary. Like absolute positioning, grid templates are
especially useful for aligning elements that don't have simple
relationships in the source (parent-child, ancestor-descendant, immediate
sibling). But in contrast to absolute positioning, the elements are not
positioned with the help of horizontal and vertical coordinates, but by
flowing them into a template that is very much like a table: The size and
alignment of elements are governed implicitly by the rows and columns of
the template, and can automatically adapt to the overall size of the
element and to the content in each row and column.
<div class=example>
<p>In this example, the four children of an element are assigned to four
slots (called a, b, c and d) in a 2×2 template. (All mark-up examples in
this specification are HTML fragments, unless otherwise stated.)
<div class=sidefigure>
<p><img alt="Image: sample rendering" longdesc=aapje.desc src=aapje.png>
<p class=caption>Each element occupies one slot. In this template, all
slots have the same size.
</div>
<pre>
&lt;style type="text/css"&gt;
dl { grid: "ab"
"cd" }
#sym1 { flow: a }
#lab1 { flow: b }
#sym2 { flow: c }
#lab2 { flow: d }
&lt;/style&gt;
&lt;dl&gt;
&lt;dt id=sym1&gt;A
&lt;dd id=lab1&gt;A is een aapje
&lt;dt id=sym2&gt;B
&lt;dd id=lab2&gt;B is de bakker
&lt;/dl&gt;
</pre>
</div>
<div class=example>
<p>Templates can also help with device-independence. This example uses
Media Queries <a href="#MEDIAQ"
rel=biblioentry>[MEDIAQ]<!--{{MEDIAQ}}--></a> to change the overall
layout of a page from 3-column layout for a wide screen to a 1-column
layout for a narrow screen. It assumes the page has been marked-up with
logical sections with IDs.
<pre>
@media all
{
body { grid: "aaa"
"bcd" }
#head { flow: a }
#nav { flow: b }
#adv { flow: c }
#body { flow: d }
}
@media all and (max-width: 500px)
{
body { grid: "a"
"b"
"c" }
#head { flow: a }
#nav { flow: b }
#adv { display: none }
#body { flow: c }
}
</pre>
</div>
<div class=example>
<p>The slots in a grid do not overlap, unless with negative margins. Here
is how the <a
href="http://www.csszengarden.com/?cssfile=/026/026.css&amp;page=0">
“zunflower” design</a> of the CSS Zen Garden could be done:
<pre>
#container {grid: "abc"}
#container::slot(a) {box-shadow: 0.5em 0.5em 0.5em; z-index: 1}
#container::slot(b) {box-shadow: 0.5em 0.5em 0.5em; margin-left: -2em}
#intro {flow: a}
#supportingText {flow: b}
#linkList {flow: c}
</pre>
</div>
<div class=example>
<p>Template-based positioning borrows some concepts from table layout, in
particular the idea of aligning elements in rows and columns, so that
they constrain one another's size. But there are also differences. This
example shows some of them. Assume this document fragment:
<pre>
&lt;div class=group>
&lt;div>aa aa aa aa aa aa&lt;/div>
&lt;div>bbb&lt;/div>
&lt;div class=menu>ccccc&lt;/div>
&lt;/div>
</pre>
<p>We can lay it out as three columns, as the following illustrations
show. The style sheet would contain the following.
<pre>
.group {display: table}
.group > div {display: table-cell}
</pre>
<div class=figure>
<p><img alt="[Three unequal cells]" longdesc=table1.desc src=table1.png>
<p class=caption>Example of rendering with a table.
</div>
<p>We can also use a template, in which case the style sheet would contain
this:
<pre>
.group {grid: "abc"}
.group > div {flow: a}
.group > div + div {flow: b}
.group > div + div + div {flow: c}
</pre>
<p>By default, the table is as wide as needed to fit its contents. To make
sure it is as wide as its containing block, we need to add
<pre>.group {display: table; width: 100%}</pre>
<p>That is not needed for the grid template, but, on the other hand, if we
want the template to fit its contents, we would need to say so:
<pre>.group {grid: "abc"; width: auto}</pre>
<p>(See <a href="#CSS3BOX"
rel=biblioentry>[CSS3BOX]<!--{{!CSS3BOX}}--></a> for the definition of
the &lsquo;<a href="#width"><code class=property>width</code></a>&rsquo;
property.) The columns of the template are by default all the same size.
The columns of the table satisfy certain constraints, but the exact size
is not defined. We can make them all the same by adding a rule (see <a
href="#CSS3TBL" rel=biblioentry>[CSS3TBL]<!--{{!CSS3TBL}}--></a>):
<pre>.group {display: table; width: 100%; table-layout: fixed}</pre>
<div class=figure>
<p><img alt="[Three equal cells]" longdesc=table2.desc src=table2.png>
<p class=caption>Example of rendering with equal columns.
</div>
<p>In both styles, we can set a column to a certain size:
<pre>div.menu {width: 3em}</pre>
<p>resp.,
<pre>.group {grid: "abc" * * 3em}</pre>
<div class=figure>
<p><img alt="[Two equal cells, third is 3em wide]" longdesc=table3.desc
src=table3.png>
<p class=caption>Example of rendering with a fixed third column and the
other two columns of equal width.
</div>
<p>If there is an unknown number of columns (children of the div.group
element), the style sheet for the table model will automatically take
them into account. The style sheet for the template model, however,
creates a template of exactly three columns and can't handle tables with
an unknown number of columns. The extra elements will be added into the
default slot (in this case the &lsquo;<code class=css>a</code>&rsquo;
slot).
<p>(However, extra columns or rows <em>will</em> be created if necessary
to absolutely position elements. See the &lsquo;<a
href="#grid-position0"><code
class=property>grid-position</code></a>&rsquo; property.)
<p>In both models, elements can have borders, but only in the table model
can borders be collapsed, which makes setting borders easier in the table
model:
<pre>
.group {display: table; border-collapse: collapse}
.group > div {border: solid}
</pre>
<p>resp.,
<pre>
.group > div {border: solid; border-left: none}
.group > div:first-child {border-left: solid}
</pre>
<p>In the template model, the order of the elements is explicit, and thus
it is possible to reverse the order of the columns:
<pre>
.group > div {flow: c}
.group > div + div {flow: b}
.group > div + div + div {flow: a}
</pre>
<div class=figure>
<p><img alt="[Different contents for the cells]" longdesc=table4.desc
src=table4.png>
<p class=caption>Example of rendering with the contents of the three
columns reversed: the third element is shown in the first slot and the
first element in the third slot.
</div>
<p>In the table model, the order of the rows and columns is given by the
document source and thus can't be changed.
</div>
<div class=example>
<p>This example shows a way to move notes to the end of a section.
“Notes” in this example refers to elements in HTML with a class of
“note”. A fragment of HTML such as
<pre>
&lt;div class=section>
&lt;p>The balubious coster of the fifth secter&lt;span
class=note> The sixth secter coster is a difter
manon.&lt;/span> of The Rollow Carpug mentizes a costernica.
&lt;p>&hellip;
&lt;/div>
</pre>
<p>with this style sheet
<pre>
div.section {
grid: "*"
"F"}
.note {
flow: F;
content: counter(note) ".\A0" contents;
counter-increment: note;
font-size: smaller}
.note::before {
content: counter(note);
vertical-align: super;
font-size: larger}
</pre>
<p>results in a rendering similar to this:
<div class=figure>
<p><img
alt="Same text, with the SPAN replaced by “(1)” and its content moved to the end."
longdesc=footnotes.desc src=footnotes.png>
<p class=caption>Rendering of a text with footnotes.
</div>
<p>The “Generated content for paged media” module <a href="#CSS3GCPM"
rel=biblioentry>[CSS3GCPM]<!--{{CSS3GCPM}}--></a> is expected to define
specific features for footnotes that are both easier and more powerful
than this example.
</div>
<div class="example level4">
<p>This example shows the use of chained regions: text from region 1
continues in region 2, 3 and 4. And it shows how to use pseudo-elements
to style text in a particular region: text in region 1 is bigger than in
other regions.
<div class=figure>
<p><img alt="Image of a complex, 3-column layout"
longdesc=regions-intro-rendering.desc src=regions-intro-rendering.png>
<p class=caption>Example rendering
</div>
<p>We assume a document fragment similar to this:
<pre>
&lt;div id=article>
&lt;h1>Introduction&lt;/h1>
&lt;p>&lt;img src="sunset" alt="">
&lt;p>This is an example…
&lt;h1>More Details&lt;/h1>
&lt;p>This illustrates…
&lt;p>Then, the example…
&lt;p>Finally, this…
&lt;/div>
</pre>
<p>The style sheet makes the DIV into a template element with five
regions, called A, *, b, c and d. The regions are grouped into two
chains: region A on its own, and the chain consisting of *, b, c and d.
<pre>
#article {
grid: "A A c"
"A A c"
"* * c"
"a b c";
chains: * a b c }
</pre>
<p>The &lsquo;<code class=css>*</code>&rsquo; is a special name. It
indicates the <a href="#default-slot."><em>default slot,</em></a> the
slot where content goes if it doesn't have an explicit &lsquo;<a
href="#flow0"><code class=property>flow</code></a>&rsquo; property. We
could have used a normal letter and added an explicit &lsquo;<a
href="#flow0"><code class=property>flow</code></a>&rsquo; property to the
children of the DIV, but by using * we don't have to. All children thus
go into region * (and continue in a, b and c as needed). The IMG element
goes into region A. We assume for simplicity that there is only one IMG
element:
<pre>#article img { flow: A }</pre>
<p>The text in region * is bolder, larger and a different color than in
the other regions. Also, an H1 that falls into this region is rendered
differently from other H1s:
<pre>
::slot(*) {
font-weight: bold;
color: #0C3D5F;
font-size: larger }
h1::slot(*) {
color: crimson;
display: run-in }
</pre>
<p>(For brevity, the example doesn't show the style rules to set the color
and background, to make the text justified, add the left border to the
second H1, etc.)
<p>As the image shows, the text of the last paragraph isn't complete and
presumably continues somewhere else, but that part is outside the scope
of this example. In paged media, we could attach the grid template to a
page instead of an element and let the text continue on the next page; we
could also make slot c into a multi-column element so that the text forms
additional columns to the right of current image (see <a href="#CSS3GCPM"
rel=biblioentry>[CSS3GCPM]<!--{{CSS3GCPM}}--></a> for some ideas), or we
could allow a scrollbar on slot c.
</div>
<!--=================================================================-->
<h3 id=dependencies><span class=secno>1.2. </span>Dependencies on other
modules</h3>
<p>This CSS3 module depends on the following other CSS3 modules:
<ul>
<li><cite>CSS 2.1</cite> <a href="#CSS21"
rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> &ndash; <a
href="http://www.w3.org/TR/CSS21/visuren.html#block-boxes"><dfn
id=block-container>block container</dfn></a> and property <dfn
id=content>content</dfn>.
<li><cite>CSS syntax module</cite> <a href="#CSS3SYN"
rel=biblioentry>[CSS3SYN]<!--{{!CSS3SYN}}--></a> &ndash; <dfn
id=interactive>interactive</dfn> vs <dfn
id=non-interactive>non-interactive</dfn> media.
<li><cite>CSS values and Units module</cite> <a href="#CSS3VAL"
rel=biblioentry>[CSS3VAL]<!--{{!CSS3VAL}}--></a> &ndash; <a
href="/TR/css3-values#strings"> <dfn
id=ltstringgt><var>&lt;string&gt;</var></dfn></a> and <a
href="/TR/css3-values#length-value"> <dfn
id=ltlengthgt><var>&lt;length&gt;</var></dfn></a>.
<li><cite>CSS box module</cite> <a href="#CSS3BOX"
rel=biblioentry>[CSS3BOX]<!--{{!CSS3BOX}}--></a> &ndash; properties <dfn
id=margin>margin</dfn>, <dfn id=margin-right>margin-right</dfn>, <dfn
id=margin-left>margin-left</dfn>, <dfn id=width>width</dfn>, <dfn
id=height>height</dfn>, <dfn id=float>float</dfn>, <dfn
id=display0>display</dfn> and <dfn id=overflow>overflow</dfn>
<li><cite>CSS text layout</cite> <a href="#CSS3-WRITING-MODES"
rel=biblioentry>[CSS3-WRITING-MODES]<!--{{!CSS3-WRITING-MODES}}--></a>
&ndash; defines <dfn id=block-flow-direction>block flow direction</dfn>
and the properties <dfn id=direction>direction</dfn> and <dfn
id=writing-mode>writing-mode</dfn>. The latter defines when an element
has a <dfn id=vertical-writing-mode>vertical writing mode</dfn> (text
lines are vertical) or a <dfn id=horizontal-writing-mode>horizontal
writing mode</dfn> (text lines are horizontal). For brevity, we refer to
the former as a <dfn id=vertical-element
title="vertical|vertical element">vertical element</dfn> and to the
latter as a <dfn id=horizontal-element.
title="horizontal|horizontal element">horizontal element.</dfn>
<li><cite>CSS positioning</cite> <a href="#CSS3POS"
rel=biblioentry>[CSS3POS]<!--{{!CSS3POS}}--></a> &ndash; properties <dfn
id=z-index>z-index</dfn>, <dfn id=position>position</dfn>, <dfn
id=top>top</dfn>, <dfn id=right>right</dfn>, <dfn id=bottom>bottom</dfn>,
<dfn id=left>left</dfn>.
<li><cite>CSS fragmentation</cite> <a href="#CSS3-BREAK"
rel=biblioentry>[CSS3-BREAK]<!--{{CSS3-BREAK}}--></a> &ndash; properties
<dfn id=break-before>break-before</dfn>, <dfn
id=break-after>break-after</dfn> and <dfn
id=break-inside>break-inside</dfn>; the definition of <dfn
id=fragmenter>fragmenter</dfn>.
<li><cite>CSS paged media</cite> <a href="#CSS3PAGE"
rel=biblioentry>[CSS3PAGE]<!--{{CSS3PAGE}}--></a> &ndash; definition of
<dfn id=page-area>page area</dfn> (in particular its width &amp; height).
<li><cite>CSS background and borders</cite> <a href="#CSS3BG"
rel=biblioentry>[CSS3BG]<!--{{CSS3BG}}--></a> &ndash; properties <dfn
id=background>background</dfn>, <dfn
id=background-image>background-image</dfn>, <dfn
id=background-size>background-size</dfn>, <dfn
id=box-decoration-break>box-decoration-break</dfn> <span class=issue>and
<dfn id=box-shadow>box-shadow</dfn>?</span>
<li><cite>CSS tables</cite> <a href="#CSS3TBL"
rel=biblioentry>[CSS3TBL]<!--{{!CSS3TBL}}--></a> &ndash; property <dfn
id=vertical-align>vertical-align</dfn>. <span class=issue>[or Box
Module?]</span>
<li><cite>CSS Multi-column Layout Module</cite> <a href="#CSS3COL"
rel=biblioentry>[CSS3COL]<!--{{CSS3COL}}--></a> &ndash; property <dfn
id=columns>columns</dfn>.
<li><cite>CSS Fragmentation Module</cite> <a href="#CSS3-BREAK"
rel=biblioentry>[CSS3-BREAK]<!--{{!CSS3-BREAK}}--></a> &ndash; properties
<dfn id=break-before0>break-before</dfn>, <dfn
id=break-after0>break-after</dfn> and <dfn
id=break-inside0>break-inside</dfn>.
</ul>
<p class=issue>Add to the above all the properties that are allowed on
slots (see <a href="#slot-pseudo">“The &lsquo;<code
class=css>::slot()</code>&rsquo; pseudo-element”</a>).
<p>It has non-normative (informative) references to the following other
CSS3 modules:
<ul>
<li><cite>Selectors</cite> <a href="#SELECT"
rel=biblioentry>[SELECT]<!--{{SELECT}}--></a>
</ul>
<p>See <a
href="http://www.w3.org/TR/CSS21/about.html#property-defs">section&nbsp;1.4.2
of CSS level&nbsp;2</a> <a href="#CSS21"
rel=biblioentry>[CSS21]<!--{{CSS21}}--></a> for the grammar and other
notations that this specification uses in property definitions.
<!--=================================================================-->
<h3 id=values><span class=secno>1.3. </span>Values</h3>
<p>This specification follows the <a
href="http://www.w3.org/TR/CSS21/about.html#property-defs">CSS property
definition conventions</a> from <a href="#CSS21"
rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>. Value types not defined in
this specification are defined in CSS Level 2 Revision 1 <a
href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>. Other CSS
modules may expand the definitions of these value types: for example <a
href="#CSS3COLOR" rel=biblioentry>[CSS3COLOR]<!--{{CSS3COLOR}}--></a>,
when combined with this module, expands the definition of the
&lt;color&gt; value type as used in this specification.
<p>In addition to the property-specific values listed in their definitions,
all properties defined in this specification also accept the <a
href="http://www.w3.org/TR/CSS21/cascade.html#value-def-inherit">inherit</a>
keyword as their property value. For readability it has not been repeated
explicitly.
<!--=================================================================-->
<h3 id=accessibility><span class=secno>1.4. </span>A note about
accessibility</h3>
<p><em>(This section is not normative.)</em>
<p>The facilities in this specification allow elements from a document to
be displayed in a visual order that is to a large extent independent of
the order in the document. That may have both positive and negative
effects on accessibility. The positive aspect is that it allows the
content in the document to be kept in logical order, so that the document
is as functional as possible without the style sheet and on media where
the style sheet doesn't apply. A negative aspect is that a document that
has a defined tab order (the order in which elements get the focus when
the tab-key is pressed) will show on the screen with a tab order unrelated
to the visual order. It may be necessary to use the keyboard control
features of the CSS Basic User Interface module <a href="#CSS3UI"
rel=biblioentry>[CSS3UI]<!--{{CSS3UI}}--></a> to ensure that the tab
navigation follows the visual order, or to refrain from positioning
semantically related elements in different parts of a template.
<p>The following two requirements from the Web Content Accessibility
Guidelines (WCAG) 2.0 <a href="#WCAG20"
rel=biblioentry>[WCAG20]<!--{{WCAG20}}--></a> are particularly relevant.
See that specification for more information.
<blockquote>
<p><a
href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#content-structure-separation-sequence"><strong>1.3.2
Meaningful Sequence:</strong></a> When the sequence in which content is
presented affects its meaning, a <a
href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#correct-reading-sequencedef">correct
reading sequence</a> can be <a
href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#programmaticallydetermineddef ">programmatically
determined.</a> (Level A)
View remainder of file in raw view