- From: Elika Etemad via cvs-syncmail <cvsmail@w3.org>
- Date: Mon, 23 Jan 2012 22:31:34 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/selectors4
In directory hutz:/tmp/cvs-serv8256
Modified Files:
Overview.html Overview.src.html
Log Message:
Add language variant handling per RFC4647
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/selectors4/Overview.html,v
retrieving revision 1.63
retrieving revision 1.64
diff -u -d -r1.63 -r1.64
--- Overview.html 3 Jan 2012 20:41:25 -0000 1.63
+++ Overview.html 23 Jan 2012 22:31:32 -0000 1.64
@@ -19,12 +19,13 @@
<h1 id=title>Selectors Level 4</h1>
- <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 3 January 2012</h2>
+ <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 23 January
+ 2012</h2>
<dl>
<dt>This version: <!--
- <dd><a href="http://www.w3.org/TR/2012/ED-selectors4-20120103/">
- http://www.w3.org/TR/2012/WD-selectors4-20120103/</a>
+ <dd><a href="http://www.w3.org/TR/2012/ED-selectors4-20120123/">
+ http://www.w3.org/TR/2012/WD-selectors4-20120123/</a>
<dt>Editor's draft:
-->
@@ -688,10 +689,11 @@
<td>4
<tr>
- <td><code>E:lang(fr, en)</code>
+ <td><code>E:lang(zh, *-hant)</code>
- <td>an element of type E in either language "fr" or language "en" (the
- document language specifies how language is determined)
+ <td>an element of type E tagged as being either in Chinese (any dialect
+ or writing system) or othewise written with traditional Chinese
+ characters
<td><a href="#lang-pseudo">The :lang() pseudo-class</a>
@@ -2428,33 +2430,36 @@
is determined, it is possible to write selectors that represent an element
based on its language. The <code>:lang()</code> pseudo-class represents an
element that is in one of the languages listed in its argument. It accepts
- a comma-separated list of one or more language identifiers as its
- argument. Each language identifier in <code>:lang()</code> must be a valid
- CSS <a
+ a comma-separated list of one or more <i>language ranges</i> as its
+ argument. Each <dfn id=language-identifier>language identifier</dfn> in
+ <code>:lang()</code> must be a valid CSS <a
href="http://www.w3.org/TR/CSS21/syndata.html#value-def-identifier">identifier</a>
- for the selector to be valid. <a href="#CSS21"
- rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>
+ <a href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> or consist
+ of an asterisk (* U+002A) immediately followed by an identifier beginning
+ with an ASCII hyphen (U+002D) for the selector to be valid.
- <p>The language of an element is defined by the document language. For
- example, in HTML <a href="#HTML401"
- rel=biblioentry>[HTML401]<!--{{HTML401}}--></a>, the language is
- determined by a combination of the <code>lang</code> attribute,
- information from <code>meta</code> elements, and possibly also the
- protocol (e.g. from HTTP headers). XML languages can use the
- <code>xml:lang</code> attribute to indicate language information for an
- element.
+ <p>The <dfn id=language>language</dfn> of an element is defined by the
+ document language. For example, in HTML <a href="#HTML401"
+ rel=biblioentry>[HTML401]<!--{{HTML401}}--></a>, the <a
+ href="#language"><i>language</i></a> is determined by a combination of the
+ <code>lang</code> attribute, information from <code>meta</code> elements,
+ and possibly also the protocol (e.g. from HTTP headers). XML languages can
+ use the <code>xml:lang</code> attribute to indicate language information
+ for an element.
- <p>The element's language matches a language identifier if the element's
- language value (normalized to BCP 47 syntax if necessary) either is equal
- to the language identifier or begins with the identifier and is
- immediately followed by "-" (U+002D). The matching is performed
- case-insensitively within the ASCII range. The language identifier does
- not need to be a valid language code to perform this comparison.
+ <p>The element's <i>language matches</i> a <i>language range</i> if the
+ element's <a href="#language"><i>language</i></a> (normalized to BCP 47
+ syntax if necessary) matches the given <i>language range</i> in an
+ <i>extended filtering</i> operation per <a href="#RFC4647"
+ rel=biblioentry>[RFC4647]<!--{{RFC4647}}--></a> <cite>Matching of Language
+ Tags</cite> (section 3.3.2). The matching is performed case-insensitively
+ within the ASCII range. The language identifier does not need to be a
+ valid language code to perform this comparison.
<p class=note><strong>Note:</strong> It is recommended that documents and
protocols indicate language using codes from BCP 47 <a href="#BCP47"
rel=biblioentry>[BCP47]<!--{{BCP47}}--></a> or its successor, and by means
- of "xml:lang" attributes in the case of XML-based documents <a
+ of <code>xml:lang</code> attributes in the case of XML-based documents <a
href="#XML10" rel=biblioentry>[XML10]<!--{{XML10}}--></a>. See <a
href="http://www.w3.org/International/questions/qa-lang-2or3.html"> "FAQ:
Two-letter or three-letter language codes."</a>
@@ -2490,12 +2495,43 @@
</body></pre>
</div>
+ <div class=example>
+ <p>Another difference between <code>:lang(C)</code> and the ‘<code
+ class=css>|=</code>’ operator is that <code>:lang(C)</code>
+ performs implicit wildcard matching. For example,
+ <code>:lang(de-DE)</code> will match all of ‘<code
+ class=css>de-DE</code>’, ‘<code
+ class=css>de-DE-1996</code>’, ‘<code
+ class=css>de-Latn-DE</code>’, ‘<code
+ class=css>de-Latf-DE</code>’, ‘<code
+ class=css>de-Latn-DE-1996</code>’, whereas of those
+ <code>[lang|=de-DE]</code> will only match ‘<code
+ class=css>de-DE</code>’ and ‘<code
+ class=css>de-DE-1996</code>’.
+
+ <p>To perform wildcard matching on the first subtag (the primary
+ language), an asterisk must be used: <code>*-CH</code> will match all of
+ ‘<code class=css>de-CH</code>’, ‘<code
+ class=css>it-CH</code>’, ‘<code
+ class=css>fr-CH</code>’, and ‘<code
+ class=css>rm-CH</code>’.
+
+ <p>Note that asterisks are not allowed anywhere else in
+ <code>:lang()</code>‘<code class=css>s language range syntax: they
+ only have meaning, and are therefore only allowed, at the beginning.
+ </code>
+ </div>
+
+ <p class=note>Wildcard language matching is new in Level 4.
+
<h2 id=ui-states-pseudos><span class=secno>11. </span> The UI states
pseudo-classes</h2>
- <h3 id=enableddisabled><span class=secno>11.1. </span> The ‘<code
- class=css>:enabled</code>’ and ‘<code
- class=css>:disabled</code>’ pseudo-classes</h3>
+ <h3 id=enableddisabled><span class=secno>11.1. </span> The
+ ’‘<code class=css>:enabled</code>’‘<code
+ class=css> and </code>’‘<code
+ class=css>:disabled</code>’‘<code class=css>
+ pseudo-classes</code></h3>
<p>The <code>:enabled</code> pseudo-class represents user interface
elements that are in an enabled state; such elements have a corresponding
@@ -2516,7 +2552,8 @@
no effect on the enabled/disabled state of an element.
<h3 id=checked><span class=secno>11.2. </span> The selected-option
- pseudo-class ‘<code class=css>:checked</code>’</h3>
+ pseudo-class ’‘<code
+ class=css>:checked</code>’‘<code class=css></code></h3>
<p>Radio and checkbox elements can be toggled by the user. Some menu items
are "checked" when the user selects them. When such elements are toggled
@@ -2540,8 +2577,8 @@
</div>
<h3 id=indeterminate><span class=secno>11.3. </span> The
- indeterminate-value pseudo-class ‘<code
- class=css>:indeterminate</code>’</h3>
+ indeterminate-value pseudo-class ’‘<code
+ class=css>:indeterminate</code>’‘<code class=css></code></h3>
<p>The <code>:indeterminate</code> pseudo-class applies to UI elements
whose value is in an indeterminate state. For example, radio and checkbox
@@ -2556,7 +2593,8 @@
even in a static display.
<h3 id=default-pseudo><span class=secno>11.4. </span> The default option
- pseudo-class ‘<code class=css>:default</code>’</h3>
+ pseudo-class ’‘<code
+ class=css>:default</code>’‘<code class=css></code></h3>
<p>The <dfn id=default-pseudo-class><code>:default</code>
pseudo-class</dfn> applies to the one or more UI elements that are the
@@ -2569,8 +2607,10 @@
a selection of pizza toppings for example.
<h3 id=validity-pseudos><span class=secno>11.5. </span> The validity
- pseudo-classes ‘<code class=css>:valid</code>’ and
- ‘<code class=css>:invalid</code>’</h3>
+ pseudo-classes ’‘<code
+ class=css>:valid</code>’‘<code class=css> and
+ </code>’‘<code class=css>:invalid</code>’‘<code
+ class=css></code></h3>
<p>An element is <code id=valid-pseudo>:valid</code> or <code
id=invalid-pseudo>:invalid</code> when its contents or value is,
@@ -2585,8 +2625,10 @@
<code>:valid</code>.
<h3 id=range-pseudos><span class=secno>11.6. </span> The range
- pseudo-classes ‘<code class=css>:in-range</code>’ and
- ‘<code class=css>:out-of-range</code>’</h3>
+ pseudo-classes ’‘<code
+ class=css>:in-range</code>’‘<code class=css> and
+ </code>’‘<code
+ class=css>:out-of-range</code>’‘<code class=css></code></h3>
<p>The <code id=in-range-psuedo>:in-range</code> and <code
id=out-of-range-pseudo>:out-of-range</code> pseudo-classes apply only to
@@ -2602,8 +2644,10 @@
"C".
<h3 id=opt-pseudos><span class=secno>11.7. </span> The optionality
- pseudo-classes ‘<code class=css>:required</code>’ and
- ‘<code class=css>:optional</code>’</h3>
+ pseudo-classes ’‘<code
+ class=css>:required</code>’‘<code class=css> and
+ </code>’‘<code class=css>:optional</code>’‘<code
+ class=css></code></h3>
<p>A form element is <code id=required-pseudo>:required</code> or <code
id=optional-pseudo>:optional</code> if a value for it is, respectively,
@@ -2612,8 +2656,10 @@
optional.
<h3 id=rw-pseudos><span class=secno>11.8. </span> The mutability
- pseudo-classes ‘<code class=css>:read-only</code>’ and
- ‘<code class=css>:read-write</code>’</h3>
+ pseudo-classes ’‘<code
+ class=css>:read-only</code>’‘<code class=css> and
+ </code>’‘<code class=css>:read-write</code>’‘<code
+ class=css></code></h3>
<p>An element whose contents are not user-alterable is <code
id=read-only-pseudo>:read-only</code>. However, elements whose contents
@@ -2639,28 +2685,30 @@
parent. When calculating the position of an element in the list of
children of its parent, the index numbering starts at 1.
- <h3 id=root-pseudo><span class=secno>12.1. </span> ‘<code
- class=css>:root</code>’ pseudo-class</h3>
+ <h3 id=root-pseudo><span class=secno>12.1. </span> ’‘<code
+ class=css>:root</code>’‘<code class=css> pseudo-class</code></h3>
<p>The <code>:root</code> pseudo-class represents an element that is the
root of the document. In HTML 4, this is always the <code>HTML</code>
element.
- <h3 id=nth-child-pseudo><span class=secno>12.2. </span> ‘<code
- class=css>:nth-child()</code>’ pseudo-class</h3>
+ <h3 id=nth-child-pseudo><span class=secno>12.2. </span> ’‘<code
+ class=css>:nth-child()</code>’‘<code class=css>
+ pseudo-class</code></h3>
<p>The <code>:nth-child(<var>a</var><code>n</code>+<var>b</var>)</code>
pseudo-class notation represents an element that has
<var>a</var><code>n</code>+<var>b</var>-1 siblings <strong>before</strong>
it in the document tree, for any positive integer or zero value of
<code>n</code>, and has a parent element. For values of <var>a</var> and
- <var>b</var> greater than zero, this effectively divides the element's
- children into groups of <var>a</var> elements (the last group taking the
- remainder), and selecting the <var>b</var>th element of each group. For
- example, this allows the selectors to address every other row in a table,
- and could be used to alternate the color of paragraph text in a cycle of
- four. The <var>a</var> and <var>b</var> values must be integers (positive,
- negative, or zero). The index of the first child of an element is 1.
+ <var>b</var> greater than zero, this effectively divides the
+ element’s children into groups of <var>a</var> elements (the last
+ group taking the remainder), and selecting the <var>b</var>th element of
+ each group. For example, this allows the selectors to address every other
+ row in a table, and could be used to alternate the color of paragraph text
+ in a cycle of four. The <var>a</var> and <var>b</var> values must be
+ integers (positive, negative, or zero). The index of the first child of an
+ element is 1.
<p>In addition to this, <code>:nth-child()</code> can take ‘<code
class=css><code>odd</code></code>’ and ‘<code
@@ -3885,6 +3933,15 @@
</dd>
<!---->
+ <dt id=RFC4647>[RFC4647]
+
+ <dd>A. Phillips; M. Davis. <a
+ href="http://www.ietf.org/rfc/rfc4647.txt"><cite>Matching of Language
+ Tags.</cite></a> September 2006. Internet RFC 4647. URL: <a
+ href="http://www.ietf.org/rfc/rfc4647.txt">http://www.ietf.org/rfc/rfc4647.txt</a>
+ </dd>
+ <!---->
+
<dt id=SELECTORS-API2>[SELECTORS-API2]
<dd>Lachlan Hunt. <a
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/selectors4/Overview.src.html,v
retrieving revision 1.65
retrieving revision 1.66
diff -u -d -r1.65 -r1.66
--- Overview.src.html 3 Jan 2012 20:41:25 -0000 1.65
+++ Overview.src.html 23 Jan 2012 22:31:32 -0000 1.66
@@ -246,9 +246,10 @@
<td><a href="#dir-pseudo">The :dir() pseudo-class</a>
<td>4
<tr>
- <td><code>E:lang(fr, en)</code>
- <td>an element of type E in either language "fr" or language "en"
- (the document language specifies how language is determined)
+ <td><code>E:lang(zh, *-hant)</code>
+ <td>an element of type E tagged as being either in Chinese
+ (any dialect or writing system)
+ or othewise written with traditional Chinese characters
<td><a href="#lang-pseudo">The :lang() pseudo-class</a>
<td>2/4
<tbody>
@@ -1704,29 +1705,32 @@
represent an element based on its language.
The <code>:lang()</code> pseudo-class represents an element that
is in one of the languages listed in its argument. It accepts
- a comma-separated list of one or more language identifiers as its
- argument. Each language identifier in <code>:lang()</code> must be
- a valid CSS <a href="http://www.w3.org/TR/CSS21/syndata.html#value-def-identifier">identifier</a>
- for the selector to be valid. [[!CSS21]]
+ a comma-separated list of one or more <i>language ranges</i> as its
+ argument. Each <dfn>language identifier</dfn> in <code>:lang()</code>
+ must be a valid CSS <a href="http://www.w3.org/TR/CSS21/syndata.html#value-def-identifier">identifier</a>
+ [[!CSS21]]
+ or consist of an asterisk (* U+002A) immediately followed by an identifier
+ beginning with an ASCII hyphen (U+002D) for the selector to be valid.
- <p>The language of an element is defined by the document language.
- For example, in HTML [[HTML401]], the language is determined by a
+ <p>The <dfn>language</dfn> of an element is defined by the document language.
+ For example, in HTML [[HTML401]], the <i>language</i> is determined by a
combination of the <code>lang</code> attribute, information from
<code>meta</code> elements, and possibly also the protocol (e.g.
from HTTP headers). XML languages can use the <code>xml:lang</code>
attribute to indicate language information for an element.
- <p>The element's language matches a language identifier if the element's
- language value (normalized to BCP 47 syntax if necessary) either is equal
- to the language identifier or begins with the identifier and is
- immediately followed by "-" (U+002D).
+ <p>The element's <i>language matches</i> a <i>language range</i> if
+ the element's <i>language</i> (normalized to BCP 47 syntax if necessary)
+ matches the given <i>language range</i> in an <i>extended filtering</i>
+ operation per [[RFC4647]] <cite>Matching of Language Tags</cite> (section 3.3.2).
The matching is performed case-insensitively within the ASCII range.
The language identifier does not need to be a valid language code to
perform this comparison.</p>
<p class="note"><strong>Note:</strong> It is recommended that
- documents and protocols indicate language using codes from BCP 47 [[BCP47]] or its successor, and by means of
- "xml:lang" attributes in the case of XML-based documents [[XML10]]. See <a
+ documents and protocols indicate language using codes from BCP 47 [[BCP47]]
+ or its successor, and by means of <code>xml:lang</code> attributes in the
+ case of XML-based documents [[XML10]]. See <a
href="http://www.w3.org/International/questions/qa-lang-2or3.html">
"FAQ: Two-letter or three-letter language codes."</a></p>
@@ -1742,8 +1746,8 @@
:lang(de) > q</pre>
</div>
- <p class="note">One difference between <code>:lang(C)</code> and the '|=' operator
- is that the '|=' operator only performs a comparison against a given
+ <p class="note">One difference between <code>:lang(C)</code> and the ''|='' operator
+ is that the ''|='' operator only performs a comparison against a given
attribute on the element, while the <code>:lang(C)</code> pseudo-class
uses the UAs knowledge of the document's semantics to perform the
comparison.</p>
@@ -1760,6 +1764,23 @@
</body></pre>
</div>
+ <div class=example>
+ <p>Another difference between <code>:lang(C)</code> and the ''|='' operator
+ is that <code>:lang(C)</code> performs implicit wildcard matching.
+ For example, <code>:lang(de-DE)</code> will match all of ''de-DE'',
+ ''de-DE-1996'', ''de-Latn-DE'', ''de-Latf-DE'', ''de-Latn-DE-1996'',
+ whereas of those <code>[lang|=de-DE]</code> will only match ''de-DE'' and
+ ''de-DE-1996''.
+ <p>To perform wildcard matching on the first subtag (the primary language),
+ an asterisk must be used: <code>*-CH</code> will match all of ''de-CH'',
+ ''it-CH'', ''fr-CH'', and ''rm-CH''.
+ <p>Note that asterisks are not allowed anywhere else in <code>:lang()</code>'s
+ language range syntax: they only have meaning, and are therefore only allowed,
+ at the beginning.
+ </div>
+
+ <p class="note">Wildcard language matching is new in Level 4.</p>
+
<h2 id=ui-states-pseudos>
The UI states pseudo-classes</h2>
Received on Monday, 23 January 2012 22:31:37 UTC