W3C home > Mailing lists > Public > public-css-commits@w3.org > January 2012

csswg/selectors4 Overview.html,1.63,1.64 Overview.src.html,1.65,1.66

From: Elika Etemad via cvs-syncmail <cvsmail@w3.org>
Date: Mon, 23 Jan 2012 22:31:34 +0000
To: public-css-commits@w3.org
Message-Id: <E1RpSQI-00029T-Ea@lionel-hutz.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 @@
   &lt;/body></pre>
   </div>
 
+  <div class=example>
+   <p>Another difference between <code>:lang(C)</code> and the &lsquo;<code
+    class=css>|=</code>&rsquo; operator is that <code>:lang(C)</code>
+    performs implicit wildcard matching. For example,
+    <code>:lang(de-DE)</code> will match all of &lsquo;<code
+    class=css>de-DE</code>&rsquo;, &lsquo;<code
+    class=css>de-DE-1996</code>&rsquo;, &lsquo;<code
+    class=css>de-Latn-DE</code>&rsquo;, &lsquo;<code
+    class=css>de-Latf-DE</code>&rsquo;, &lsquo;<code
+    class=css>de-Latn-DE-1996</code>&rsquo;, whereas of those
+    <code>[lang|=de-DE]</code> will only match &lsquo;<code
+    class=css>de-DE</code>&rsquo; and &lsquo;<code
+    class=css>de-DE-1996</code>&rsquo;.
+
+   <p>To perform wildcard matching on the first subtag (the primary
+    language), an asterisk must be used: <code>*-CH</code> will match all of
+    &lsquo;<code class=css>de-CH</code>&rsquo;, &lsquo;<code
+    class=css>it-CH</code>&rsquo;, &lsquo;<code
+    class=css>fr-CH</code>&rsquo;, and &lsquo;<code
+    class=css>rm-CH</code>&rsquo;.
+
+   <p>Note that asterisks are not allowed anywhere else in
+    <code>:lang()</code>&lsquo;<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 &lsquo;<code
-   class=css>:enabled</code>&rsquo; and &lsquo;<code
-   class=css>:disabled</code>&rsquo; pseudo-classes</h3>
+  <h3 id=enableddisabled><span class=secno>11.1. </span> The
+   &rsquo;&lsquo;<code class=css>:enabled</code>&rsquo;&lsquo;<code
+   class=css> and </code>&rsquo;&lsquo;<code
+   class=css>:disabled</code>&rsquo;&lsquo;<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 &lsquo;<code class=css>:checked</code>&rsquo;</h3>
+   pseudo-class &rsquo;&lsquo;<code
+   class=css>:checked</code>&rsquo;&lsquo;<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 &lsquo;<code
-   class=css>:indeterminate</code>&rsquo;</h3>
+   indeterminate-value pseudo-class &rsquo;&lsquo;<code
+   class=css>:indeterminate</code>&rsquo;&lsquo;<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 &lsquo;<code class=css>:default</code>&rsquo;</h3>
+   pseudo-class &rsquo;&lsquo;<code
+   class=css>:default</code>&rsquo;&lsquo;<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 &lsquo;<code class=css>:valid</code>&rsquo; and
-   &lsquo;<code class=css>:invalid</code>&rsquo;</h3>
+   pseudo-classes &rsquo;&lsquo;<code
+   class=css>:valid</code>&rsquo;&lsquo;<code class=css> and
+   </code>&rsquo;&lsquo;<code class=css>:invalid</code>&rsquo;&lsquo;<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 &lsquo;<code class=css>:in-range</code>&rsquo; and
-   &lsquo;<code class=css>:out-of-range</code>&rsquo;</h3>
+   pseudo-classes &rsquo;&lsquo;<code
+   class=css>:in-range</code>&rsquo;&lsquo;<code class=css> and
+   </code>&rsquo;&lsquo;<code
+   class=css>:out-of-range</code>&rsquo;&lsquo;<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 &lsquo;<code class=css>:required</code>&rsquo; and
-   &lsquo;<code class=css>:optional</code>&rsquo;</h3>
+   pseudo-classes &rsquo;&lsquo;<code
+   class=css>:required</code>&rsquo;&lsquo;<code class=css> and
+   </code>&rsquo;&lsquo;<code class=css>:optional</code>&rsquo;&lsquo;<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 &lsquo;<code class=css>:read-only</code>&rsquo; and
-   &lsquo;<code class=css>:read-write</code>&rsquo;</h3>
+   pseudo-classes &rsquo;&lsquo;<code
+   class=css>:read-only</code>&rsquo;&lsquo;<code class=css> and
+   </code>&rsquo;&lsquo;<code class=css>:read-write</code>&rsquo;&lsquo;<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> &lsquo;<code
-   class=css>:root</code>&rsquo; pseudo-class</h3>
+  <h3 id=root-pseudo><span class=secno>12.1. </span> &rsquo;&lsquo;<code
+   class=css>:root</code>&rsquo;&lsquo;<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> &lsquo;<code
-   class=css>:nth-child()</code>&rsquo; pseudo-class</h3>
+  <h3 id=nth-child-pseudo><span class=secno>12.2. </span> &rsquo;&lsquo;<code
+   class=css>:nth-child()</code>&rsquo;&lsquo;<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&rsquo;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 &lsquo;<code
    class=css><code>odd</code></code>&rsquo; and &lsquo;<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) &gt; 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 @@
   &lt;/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

This archive was generated by hypermail 2.4.0 : Friday, 17 January 2020 19:26:09 UTC