FFFF csswg-drafts/css-template/new.html at ca87e50f7d0730926b2abf2ede12893ce4f9765c · w3c/csswg-drafts · GitHub
Skip to content

new.html

Latest commit

 

History

History
3957 lines (3029 loc) · 143 KB

new.html

File metadata and controls

3957 lines (3029 loc) · 143 KB
<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>
</div>
<h3 id=grid-intro><span class=secno>1.1. </span> Introduction to Grids</h3>
<h3 id=background><span class=secno>1.2. </span> Background</h3>
<div class=sidefigure> <img alt=FIXME class=figure
src="images/basic-form.png">
<p class=caption>Application layout example requiring horizontal and
vertical alignment.</p>
</div>
<p>As websites evolved from simple documents into complex, interactive
applications, tools for document layout, e.g. floats, were not necessarily
well suited for application layout. By using a combination of tables,
JavaScript, or careful measurements on floated elements, authors
discovered workarounds to achieve desired layouts. Layouts that adapted to
the available space were often brittle and resulted in counter-intuitive
behavior as space became constrained. As an alternative, authors of many
web applications opted for a fixed layout that cannot take advantage of
changes in the available rendering space on a screen.
<p>The layout capabilities of the Grid address these problems. The Grid
provides a mechanism for authors to divide available space for layout into
columns and rows using a set of predictable sizing behaviors. Authors can
then precisely position and size the building block elements of their
application by referencing the <a href="#grid-line">Grid Line</a>s between
the columns and rows, or by defining and referencing a <a
href="#grid-cell">Grid Slot</a>, which is a rectangular space covering an
intersection of columns and rows. Figure 1 illustrates a basic layout
which can be achieved with the Grid.
<h3 id=space-adapt><span class=secno>1.3. </span>Adapting Layouts to
Available Space</h3>
<div class=sidefigure>
<p><img alt=FIXME src="images/game-smaller.png">
<p class=caption>Five grid items arranged according to content size and
available space.</p>
</div>
<div class=sidefigure>
<p><img alt=FIXME src="images/game-larger.png">
<p class=caption>Growth in the grid due to an increase in available space.</p>
</div>
<p>The <a href="#grid-element1"><i>grid element</i></a> can be used to
intelligently reflow elements within a webpage. Figure 2 represents a game
with five major areas in the layout: the game title, stats area, game
board, score area, and control area. The author's intent is to divide the
space for the game such that:
<ul>
<li>The stats area always appears immediately under the game title.
<li>The game board appears to the right of the stats and title.
<li>The top of the game title and the game board should always align.
<li>The bottom of the game board and the stats area align when the game
has reached its minimum height, but otherwise the game board will stretch
to take advantage of all the screen real-estate available to it.
<li>The score area should align into the column created by the game and
stats area, while the controls are centered under the board.
</ul>
<p>As an alternative to using script to control the absolute position,
width, and height of all elements, the author can use the <a
href="#grid-element1"><i>grid element</i></a>, as shown in Figure 3. The
following example shows how an author might achieve all the sizing,
placement, and alignment rules declaratively.
<p>Note that there are multiple ways to specify the structure of the <a
href="#grid-element">Grid</a> and to position and size <i>grid items</i>,
each optimized for different scenarios. This example illustrates one that
an author may use to define the position and space for each <i>grid
item</i> using the &lsquo;<a href="#grid-rows"><code
class=property>grid-rows</code></a>&rsquo; and &lsquo;<a
href="#grid-columns"><code class=property>grid-columns</code></a>&rsquo;
properties of the <a href="#grid-element1"><i>grid element</i></a>, and
the &lsquo;<a href="#grid-row"><code
class=property>grid-row</code></a>&rsquo; and &lsquo;<a
href="#grid-column"><code class=property>grid-column</code></a>&rsquo;
properties on each <i>grid item</i>.
<pre class=example>&lt;style type="text/css"&gt;
#grid {
display: grid;
/* Two columns: the first sized to content, the second receives the remaining space, */
/* but is never smaller than the minimum size of the board or the game controls, which */
/* occupy this column. */
grid-columns: auto minmax(min-content, 1fr);
/* Three rows: the first and last sized to content, the middle row receives the remaining */
/* space, but is never smaller than the minimum height of the board or stats areas. */
grid-rows: auto minmax(min-content, 1fr) auto
}
/* Each part of the game is positioned between grid lines by referencing the starting grid line and */
/* then specifying, if more than one, the number of rows or columns spanned to determine the ending */
/* grid line, which establishes bounds for the part. */
#title { grid-column: 1; grid-row: 1 }
#score { grid-column: 1; grid-row: 3 }
#stats { grid-column: 1; grid-row: 2; grid-row-align: start }
#board { grid-column: 2; grid-row: 1; grid-row-span: 2 }
#controls { grid-column: 2; grid-row: 3; grid-column-align: center }
&lt;/style&gt;
&lt;div id="grid"&gt;
&lt;div id="title"&gt;Game Title&lt;/div&gt;
&lt;div id="score"&gt;Score&lt;/div&gt;
&lt;div id="stats"&gt;Stats&lt;/div&gt;
&lt;div id="board"&gt;Board&lt;/div&gt;
&lt;div id="controls"&gt;Controls&lt;/div&gt;
&lt;/div&gt;</pre>
<h3 id=source-independence><span class=secno>1.4. </span> Source
Independence</h3>
<div class=sidefigure>
<p><img alt=FIXME src="images/game-portrait.png">
<p class=caption>An arrangement suitable for "portrait" orientation.</p>
</div>
<div class=sidefigure>
<p><img alt=FIXME src="images/game-landscape.png">
<p class=caption>An arrangement suitable for "landscape" orientation.</p>
</div>
<p>Continuing the prior example, the author also wants the game to adapt to
the space available on traditional computer monitors, handheld devices, or
tablet computers. Also, the game should optimize the placement of the
components when viewed either in landscape or portrait orientation
(Figures 4 and 5). By combining the CSS markup for the <a
href="#grid-element1"><i>grid element</i></a> with <a
href="http://www.w3.org/TR/css3-mediaqueries/">media queries</a> <a
href="#MEDIAQ" rel=biblioentry>[MEDIAQ]<!--{{MEDIAQ}}--></a>, the author
is able to use the same semantic markup, but rearranged independent of its
source order, to achieve the desired layout in both orientations.
<p>The following example leverages the <a
href="#grid-element">Grid</a>&lsquo;<code class=css>s ability to name the
space which will be occupied by a <i>grid item</i>. This allows the author
to avoid rewriting rules for <i>grid items</i> as the <a
href="#grid-element">Grid</a></code>&rsquo;s definition changes.
<pre class=example>&lt;style type="text/css"&gt;
@media (orientation: portrait) {
#grid {
display: grid;
/* The rows, columns and cells of the grid are defined visually using the grid-template property. */
/* Each string is a row, and each letter a cell. The max number of letters in any one string determines */
/* the number of columns. */
grid-template: "ta"
"sa"
"bb"
"cc";
/* Columns and rows created with the template property can be assigned a sizing function with the */
/* grid-columns and grid-rows properties. */
grid-columns: auto minmax(min-content, 1fr);
grid-rows: auto auto minmax(min-content, 1fr) auto
}
}
@media (orientation: landscape) {
#grid {
display: grid;
/* Again the template property defines cells of the same name, but this time positioned differently */
/* to better suit a landscape orientation. */
grid-template: "tb"
"ab"
"sc";
grid-columns: auto minmax(min-content, 1fr);
grid-rows: auto minmax(min-content, 1fr) auto
}
}
/* The grid-cell property places a grid item into named region (cell) of the grid. */
#title { grid-cell: "t" }
#score { grid-cell: "s" }
#stats { grid-cell: "a" }
#board { grid-cell: "b" }
#controls { grid-cell: "c" }
&lt;/style&gt;
&lt;div id="grid"&gt;
&lt;div id="title"&gt;Game Title&lt;/div&gt;
&lt;div id="score"&gt;Score&lt;/div&gt;
&lt;div id="stats"&gt;Stats&lt;/div&gt;
&lt;div id="board"&gt;Board&lt;/div&gt;
&lt;div id="controls"&gt;Controls&lt;/div&gt;
&lt;/div&gt;</pre>
<h3 id=accessibility><span class=secno>1.5. </span> A note on the
accessibility of content reordering</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)
</blockquote>
<blockquote>
<p><a
href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#navigation-mechanisms-focus-order"><strong>2.4.3
Focus Order:</strong></a> If a <a
href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#webpagedef">Web
page</a> can be <a
href="http://www.w3.org/TR/2008/REC-WCAG20-20081211/#nav-seqdef">navigated
sequentially</a> and the navigation sequences affect meaning or
operation, focusable components receive focus in an order that preserves
meaning and operability. (Level A)
</blockquote>
<h3 id=intro-layering><span class=secno>1.6. </span> Grid Layering of
Elements</h3>
<div class=sidefigure>
<p><img alt=FIXME src="images/control-layering-and-alignment.png">
<p class=caption>A control composed of layered HTML elements.</p>
</div>
<p>In the example shown in Figure 6, the author is creating a custom slider
control. The control has six parts. The lower and upper labels align to
the left and right edges of the control. The track of the slider spans the
area between the labels. The lower and upper fill parts touch beneath the
thumb, and the thumb is a fixed width and height that can be moved along
the track by updating the two fraction-sized columns.
<p>Prior to the <a href="#grid-element1"><i>grid element</i></a>, the
author would have likely used absolute positioning to control the top and
left coordinates, along with the width and height of each HTML element
that comprises the control. By leveraging the <a
href="#grid-element1"><i>grid element</i></a>, the author can instead
limit script usage to handling mouse events on the thumb, which snaps to
various positions along the track as the &lsquo;<a
href="#grid-columns"><code class=property>grid-columns</code></a>&rsquo;
property of the <a href="#grid-element1"><i>grid element</i></a> is
updated.
<pre class=example>&lt;style type="text/css"&gt;
#grid {
display: grid;
/* The grid-columns and rows properties also support naming grid lines which can then be used */
/* to position grid items. The line names are assigned on either side of a column or row */
/* sizing function where the line would logically exist. */
grid-columns:
"start" auto
"track-start" 0.5fr
"thumb-start" auto
"fill-split" auto
"thumb-end" 0.5fr
"track-end" auto
"end";
}
/* Grid-column and grid-row accept a starting and optional endling line. Below the lines are referred to by name. */
/* Beyond any semantic advantage, the names also allow the author to avoid renumbering the grid-row and column */
/* properties of the grid items. This is similar to the concept demonstrated in the prior example with the */
/* grid-template property during orientation changes, but grid lines can also work with layered grid items that */
/* have overlapping cells of different shapes like the thumb and track parts in this example. */
#lower-label { grid-column: "start" }
#track { grid-column: "track-start" "track-end"; grid-row-align: center }
#upper-label { grid-column: "track-end"; }
/* Fill parts are drawn above the track so set z-index to 5. */
#lower-fill { grid-column: "track-start" "fill-split"; grid-row-align: center; z-index: 5 }
#upper-fill { grid-column: "fill-split" "track-end"; grid-row-align: center; z-index: 5 }
/* Thumb is the topmost part; assign it the highest z-index value. */
#thumb { grid-column: "thumb-start" "thumb-end"; z-index: 10 }
&lt;/style&gt;
&lt;div id="grid"&gt;
&lt;div id="lower-label"&gt;Lower Label&lt;/div&gt;
&lt;div id="upper-label"&gt;Upper Label&lt;/div&gt;
&lt;div id="track"&gt;Track&lt;/div&gt;
&lt;div id="lower-fill"&gt;Lower Fill&lt;/div&gt;
&lt;div id="upper-fill"&gt;Upper Fill&lt;/div&gt;
&lt;div id="thumb"&gt;Thumb&lt;/div&gt;
&lt;/div&gt;</pre>
<h3 id=placement><span class=secno>1.7. </span> Module interactions</h3>
<p class=replaceme>Explain, normatively, how this module affects the
definition of CSS.
<p>This module replaces and extends the <var class=replaceme>SUMMARIZE
HERE</var> features defined in <a href="#CSS21"
rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> sections <var
class=replaceme>W.X and Y.Z</var>.
<p>See <a href="#CSS3PAGE"
rel=biblioentry>[CSS3PAGE]<!--{{!CSS3PAGE}}--></a> for the definition of
<a href="http://www.w3.org/TR/css3-multicol/#multi-column-element"><dfn
id=multi-column-element.>multi-column element.</dfn></a>
<p><a href="#CSS3-WRITING-MODES"
rel=biblioentry>[CSS3-WRITING-MODES]<!--{{!CSS3-WRITING-MODES}}--></a>
defines the <dfn id=writing-mode>writing-mode</dfn> property, which
defines when elements have 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>
<p><a href="#CSS3BOX" rel=biblioentry>[CSS3BOX]<!--{{!CSS3BOX}}--></a>
defines the intrinsic sizes of boxes.
<p>Following <a href="#CSS3-WRITING-MODES"
rel=biblioentry>[CSS3-WRITING-MODES]<!--{{!CSS3-WRITING-MODES}}--></a> and
<a href="#CSS3BOX" rel=biblioentry>[CSS3BOX]<!--{{!CSS3BOX}}--></a>, we
define the <dfn id=inline-dimension>inline dimension</dfn> of a box,
element or slot as meaning either its width or height, depending on
whether it is <a href="#horizontal-element."><em>horizontal</em></a> or <a
href="#vertical-element"><em>vertical,</em></a> respectively. And
likewise: the <dfn id=block-dimension>block dimension</dfn> of a box,
element or slot <em>at a given inline dimension</em> is its size in the
perpendicular dimension.
<p>&lsquo;&l 4E62 t;code class=property>Direction</code>&rsquo; is defined in <a
href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>.
<h3 id=values><span class=secno>1.8. </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.
<h2 id=terminology><span class=secno>2. </span> Core Concepts of the Grid</h2>
<div class=sidefigure> <img alt=FIXME class=figure
src="images/grid-concepts.png">
<p class=caption>A diagram illustrating the relationship between the <a
href="#grid-element1"><i>grid element</i></a> and its Tracks, Lines,
Cells and Items.</p>
View remainder of file in raw view