10BC0 csswg-drafts/css-template/Overview.src.html at 1a8deb0e7fc8f65b1c956dff0a36d6f1c06f7210 · xfq/csswg-drafts · GitHub
Skip to content

Overview.src.html

Latest commit

 

History

History
4680 lines (3756 loc) · 159 KB

Overview.src.html

File metadata and controls

4680 lines (3756 loc) · 159 KB
::slot(running-header) {
content: "My Magazine - page " counter(page) " - February 2013";
text-align: center;
<span class=index>vertical-align</span>: middle;
border: solid;
margin: 1em 0;
}
</pre>
<div class=figure>
<p><img src="page.png" alt="Image: Example rendering" longdesc="page.desc">
<p class=caption>An example of a page rendered with the above page
template. It has the “running header” with the page number right in
the middle of the page.
</div>
</div>
<!--=================================================================-->
<h3 id=dependencies>Dependencies on other modules</h3>
<p>This CSS3 module depends on the following other CSS3 modules:
<ul>
<li><cite>CSS 2.1</cite> [[!CSS21]]
&ndash; <a href="http://www.w3.org/TR/CSS21/visuren.html#block-boxes"
><dfn>block container,</dfn></a> the property <dfn>content,</dfn> and
the concept of <dfn>stacking context.</dfn>
<li><cite>CSS syntax module</cite> [[!CSS3SYN]] &ndash;
<dfn>interactive</dfn> vs <dfn>non-interactive</dfn> media.
<li><cite>CSS values and Units module</cite> [[!CSS3VAL]] &ndash; <a
href="/TR/css3-values#strings">
<dfn><var>&lt;string&gt;</var></dfn></a> and <a
href="/TR/css3-values#length-value">
<dfn><var>&lt;length&gt;</var></dfn></a>.
<li><cite>CSS box module</cite> [[!CSS3BOX]] &ndash; properties
<dfn>margin</dfn>, <dfn>margin-right</dfn>, <dfn>margin-left</dfn>,
<dfn>width</dfn>, <dfn>height</dfn>, <dfn>float</dfn>,
<dfn>display</dfn> and <dfn>overflow</dfn>; definitions of the terms
<dfn>intrinsic minimum</dfn> and <dfn>intrinsic preferred</dfn> (as in
the phrases “intrinsic preferred width” and “intrinsic minimum width,”
referring roughly to the width of the content without breaking any
lines and the width with as many line breaks as possible.)
<li><cite>CSS text layout</cite> [[!CSS3-WRITING-MODES]] &ndash;
defines <dfn>block flow direction</dfn> and the
properties <dfn>direction</dfn> and <dfn>writing-mode</dfn>. The
latter defines when an element has a <dfn>vertical writing mode</dfn>
(text lines are vertical) or a <dfn>horizontal writing mode</dfn>
(text lines are horizontal). For brevity, we refer to the former as
a <dfn title="vertical|vertical element" >vertical element</dfn> and
to the latter as a <dfn title="horizontal|horizontal element"
>horizontal element.</dfn>
<li><cite>CSS positioning</cite> [[!CSS3POS]] &ndash; properties
<dfn>z-index</dfn>, <dfn>position</dfn>, <dfn>top</dfn>,
<dfn>right</dfn>, <dfn>bottom</dfn>, <dfn>left</dfn>.
<li><cite>CSS fragmentation</cite> [[CSS3-BREAK]] &ndash; properties
<dfn>break-before</dfn>, <dfn>break-after</dfn> and
<dfn>break-inside</dfn>; the definition of <dfn>fragmenter</dfn>.
<li><cite>CSS paged media</cite> [[CSS3PAGE]] &ndash; definition of
<dfn>page area</dfn> (in particular its width &amp; height).
<li><cite>CSS background and borders</cite> [[CSS3BG]] &ndash;
properties <dfn>background</dfn>, <dfn>background-image</dfn>,
<dfn>background-size</dfn>, <dfn>box-decoration-break</dfn>
<span class=issue>and <dfn>box-shadow</dfn>?</span>
<li><cite>CSS tables</cite> [[!CSS3TBL]] &ndash; property
<dfn>vertical-align</dfn>. <span class=issue>[or Box Module?]</span>
<li><cite>CSS Multi-column Layout Module</cite> [[CSS3COL]] &ndash;
property <dfn>columns</dfn>.
<li><cite>CSS Generated and replaced content module level 3</cite>
[[!CSS3GENCON]] &ndash; property <dfn>content</dfn>.
<li><cite>CSS regions</cite> [[!CSS3-REGIONS]] &ndash; at-rule
<dfn>@region</dfn> and the term <dfn>region.</dfn>
</ul>
<p class=issue>Add to the above all the properties that are allowed on
slots (see <a href="#slot-pseudo">“Styling slots: the ''::slot()''
pseudo-element”</a>).
<p>It has non-normative (informative) references to the following other
CSS3 modules:
<ul>
<li><cite>Selectors</cite> [[SELECT]]
</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> [[CSS21]] for the grammar and other notations
that this specification uses in property definitions.
<!--=================================================================-->
<h3 id=values>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 [[!CSS21]]. Value types not
defined in this specification are defined in CSS Level 2 Revision 1
[[!CSS21]]. Other CSS modules may expand the definitions of these
value types: for example [[CSS3COLOR]], when combined with this
module, expands the definition of the &lt;color&gt; value type as used
in this specification.</p>
<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>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 [[CSS3UI]] 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 [[WCAG20]] 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>
<!--=================================================================-->
<h2>Declaring templates</h2>
<p>Grid templates are declared with the 'grid-template', 'grid-rows',
'grid-columns' and 'grid' properties, defined below.
<p>An element that has a grid template is called a <dfn>grid
element.</dfn> More precisely: an element is a grid element if (1) it
generates a <span>block container</span> box [[!CSS21]] and (2) at
least one of 'grid-template', 'grid-rows' or 'grid-columns' has a
value other than the initial value.
<p class=note>Block containers are, informally, elements that can have
block elements as children, such as blocks, inline blocks or table
cells, but not inline elements or replaced elements.
<p>An element's <dfn>grid ancestor</dfn> is the nearest ancestor that
is a <span>grid element.</span>
<p class=note>Note that not all elements have a grid ancestor. E.g.,
the root element has none.
<p>The <dfn>number of columns</dfn> of a grid element is the number
of <var>&lt;col-width&gt;</var> values in 'grid-columns' or the number
of columns in 'grid-template', whichever is larger.
<p>The <dfn>number of rows</dfn> is the number
of <var>&lt;row-height&gt;</var> values in 'grid-rows' or the number
of rows in 'grid-template', whichever is larger.
<p class=note>Note that a grid element always has at least one row and one
column. Those may, however, have zero size.
<!--=================================================================-->
<h3 id=grid-template >Declaring a template: 'grid-template'</h3>
<p>The 'grid-template' property implicitly assigns a grid to an
element and defines named slots in the grid. It can also designate a
slot as the <em>default slot</em> for content without an explicit
flow.
<table class=propdef>
<tbody>
<tr><th>Name: <td><dfn>grid-template</dfn>
<tr><th><a href="#values" >Value</a>: <td>none | <var>&lt;string&gt;</var>+
<tr><th>Initial: <td>none
<tr><th>Applies to: <td><span>block container</span> elements [[!CSS21]]
<tr><th>Inherited: <td>no
<tr><th>Animatable: <td>no
<tr><th>Percentages: <td>N/A
<tr><th>Media: <td>visual
<tr><th>Computed&nbsp;value: <td>specified value
<tr><th>Canonical order: <td><abbr title="follows order of property
value definition">per grammar</abbr>
</table>
<p>Each string consist of one or more asterisks (“*”), identifiers,
periods (“.”), spaces and tabs. Each string represents one row in the
template, each symbol other than a space or tab represents one column
in that row. Spaces and tabs have no meaning. They separate
identifiers and may also be added for readability.
<p>The symbols in the template have the following meaning
<dl>
<dt>&lt;identifier&gt;
<dd>
Named slot for content.
<!--
<p class=issue>Unicode normalization is not yet
defined in css3-values nor anywhere else. E.g., we want é to match é,
no matter if the author typed U+0301 U+0065 or U+00C9.)
-->
<dt>*
<dd>
(Asterisk.) Default slot for conte 6B40 nt (explained below).
<dt>.
<dd>
(Period.) Blank space.
</dl>
<p>Multiple identical identifiers in adjacent rows or columns form a
single <dfn>slot</dfn> that spans those rows and columns. Ditto for
multiple “*”s. Slot names are case-sensitive, so uppercase and
lowercase letters are considered to be different letters.
<p class=issue>Case-sensitivity should instead be defined by reference
to the definition of identifiers, probably in css3-values.
<p>Non-rectangular slots and multiple slots with the same name are
illegal. A template without any slot name or “*” is illegal. A template
with more than one “*” slot is illegal. Strings with different numbers
of columns (<em>before</em> padding with “.”, see the next paragraph) are
illegal. These errors cause the declaration to be ignored.
<p class=note>Note: <span class=index
title="region!!non-rectangular|region!!disconnected" >non-rectangular
and disconnected regions</span> may be
permitted in a future update of CSS.
<p>If there are fewer symbols in a string than the <span>number of
columns</span> in the element, the string is implicitly padded with
“.” (period) symbols. Likewise, if there are fewer strings than the
<span>number of rows</span> in the element, additional strings
consisting of “.” (period) symbols are implicitly added.
<p>Each slot (identifier or “*”) acts as a block element for its contents.
<p>If the value is ''none'', then no explicit slots are defined. If
the element is a <em>grid element,</em> then the element instead has
an <dfn>implicit template</dfn> consisting of a single '*' slot.
<p class=note>Note that an element is a grid element in this case if
'grid-columns' and 'grid-rows' are not both ''auto''.
<div class=example>
<p>For example, the following two sets of style rules are equivalent:
<pre>DIV {
grid-template: none;
grid-rows: 10em 10em 10em;
grid-columns: * * * * }
</pre>
<p>and
<pre>DIV {
grid-template: "****" "****" "****";
grid-rows: 10em 10em 10em;
grid=columns: * * * * }
</pre>
</div>
<p class=note>Authors should be aware that naming slots with Hebrew or
Arabic letters may cause some text editors to display the CSS rule
with the slot name of the string on the right. However, the first
symbol in each string corresponds to the first value in 'grid-columns'
and thus represents the leftmost column in the rendering of the
document.
<div class=example>
<p>Only a <span>block container</span> element can be a <span>grid
element.</span> E.g., in the following document, the elements with ID
“one,” “three” and “five” are grid elements, but the 'grid' property
on “two” and “four” has no effect.
<pre>
&lt;html>
&lt;style>
#one {grid: "a b c"}
#two {grid: "a" "b"}
#three {display: inline-block; grid: "a b" "c d"}
#four {grid: "a @"}
#five {grid: "a b"}
&lt;/style>
&lt;table>
&lt;tr id=four>&lt;td>... &lt;td id=five>...
&lt;/table>
&lt;ol>
&lt;li id=one>
... &lt;span id=three>... &lt;/span>...
&lt;li>
... &lt;em id=two>... &lt;/em>...
&lt;/ol>
</pre>
</div>
View remainder of file in raw view