- From: Elika Etemad via cvs-syncmail <cvsmail@w3.org>
- Date: Wed, 10 Aug 2011 19:31:07 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/selectors4 In directory hutz:/tmp/cvs-serv2573 Modified Files: Overview.html Overview.src.html Log Message: Paste in definitions of UI pseudo-classes from css3-ui. Fix errors pointed out in <http://lists.w3.org/Archives/Public/www-style/2011Aug/0255.html> Index: Overview.html =================================================================== RCS file: /sources/public/csswg/selectors4/Overview.html,v retrieving revision 1.43 retrieving revision 1.44 diff -u -d -r1.43 -r1.44 --- Overview.html 6 Aug 2011 18:06:35 -0000 1.43 +++ Overview.html 10 Aug 2011 19:31:04 -0000 1.44 @@ -15,13 +15,13 @@ <h1 id=title>Selectors Level 4</h1> - <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 6 August 2011</h2> + <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 10 August 2011</h2> <dl> <dt>This version: - <dd> <!-- <a href="http://www.w3.org/TR/2011/ED-selectors4-20110806/"> - http://www.w3.org/TR/2011/WD-selectors4-20110806</a> --> + <dd> <!-- <a href="http://www.w3.org/TR/2011/ED-selectors4-20110810/"> + http://www.w3.org/TR/2011/WD-selectors4-20110810</a> --> <a href="http://dev.w3.org/csswg/selectors4"> http://dev.w3.org/csswg/selectors4</a> @@ -282,11 +282,30 @@ <li><a href="#enableddisabled"><span class=secno>11.1. </span> The :enabled and :disabled pseudo-classes</a> - <li><a href="#checked"><span class=secno>11.2. </span> The :checked - pseudo-class</a> + <li><a href="#checked"><span class=secno>11.2. </span> The + selected-option pseudo-class <code>:checked</code></a> <li><a href="#indeterminate"><span class=secno>11.3. </span> The - :indeterminate pseudo-class</a> + indeterminate-value pseudo-class <code>:indeterminate</code></a> + + <li><a href="#pseudo-default"><span class=secno>11.4. </span> The + default option pseudo-class <code>:default</code></a> + + <li><a href="#pseudo-validity"><span class=secno>11.5. </span> The + validity pseudo-classes <code>:valid</code> and + <code>:invalid</code></a> + + <li><a href="#pseudo-range"><span class=secno>11.6. </span> The range + pseudo-classes <code>:in-range</code> and + <code>:out-of-range</code></a> + <ul class=toc> + <li><a href="#pseudo-required-value"><span class=secno>11.6.1. + </span><span>:required</span> and <span>:optional</span></a> + + <li><a href="#pseudo-ro-rw"><span class=secno>11.6.2. </span> The + mutability pseudo-classes <code>:read-only</code> and + <code>:read-write</code></a> + </ul> </ul> <li><a href="#structural-pseudos"><span class=secno>12. </span> @@ -767,12 +786,21 @@ <td class=origin>3 <tr> - <td class=pattern>E:checked<!--<br>E:indeterminate--> + <td class=pattern>E:checked - <td class=meaning>a user interface element E which is - checked<!-- or in an - indeterminate state--> (for instance a - radio-button or checkbox) + <td class=meaning>a user interface element E which is checked/selected + (for instance a radio-button or checkbox) + + <td class=described><a href="#UIstates">The UI element states + pseudo-classes</a> + + <td class=origin>3 + + <tr> + <td class=pattern>E:indeterminate + + <td class=meaning>a user interface element E which is in an + indeterminate state (neither checked nor unchecked) <td class=described><a href="#UIstates">The UI element states pseudo-classes</a> @@ -1546,11 +1574,9 @@ (<code>|</code>). In keeping with the Namespaces in the XML recommendation, default namespaces do not apply to attributes, therefore attribute selectors without a namespace component apply only to attributes - that have no namespace (equivalent to "<code>|attr</code>"; these - attributes are said to be in the "per-element-type namespace partition"). - An asterisk may be used for the namespace prefix indicating that the - selector is to match all attribute names without regard to the attribute's - namespace. + that have no namespace (equivalent to "<code>|attr</code>"). An asterisk + may be used for the namespace prefix indicating that the selector is to + match all attribute names without regard to the attribute's namespace. <p>An attribute selector with an attribute name containing a namespace prefix that has not been previously <a href="#nsdecl">declared</a> is an @@ -1983,10 +2009,10 @@ For example, a visual user agent could apply this pseudo-class when the cursor (mouse pointer) hovers over a box generated by the element. User agents not that do not support <a - href="http://www.w3.org/TR/REC-CSS2/media.html#interactive-media-group">interactive + href="http://www.w3.org/TR/CSS21/media.html#interactive-media-group">interactive media</a> do not have to support this pseudo-class. Some conforming user agents that support <a - href="http://www.w3.org/TR/REC-CSS2/media.html#interactive-media-group">interactive + href="http://www.w3.org/TR/CSS21/media.html#interactive-media-group">interactive media</a> may not be able to support this pseudo-class (e.g., a pen device that does not detect hovering). @@ -2210,7 +2236,8 @@ e.g., the <code>display</code> and <code>visibility</code> properties have no effect on the enabled/disabled state of an element. - <h3 id=checked><span class=secno>11.2. </span> The :checked pseudo-class</h3> + <h3 id=checked><span class=secno>11.2. </span> The selected-option + pseudo-class <code>:checked</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 @@ -2227,14 +2254,14 @@ apply. <div class=example> - <p>An unchecked checkbox can be selected by using the <code>:not()</code> + <p>An unchecked checkbox can be selected by using the negation pseudo-class: <pre>:not(:checked)</pre> </div> - <h3 id=indeterminate><span class=secno>11.3. </span> The :indeterminate - pseudo-class</h3> + <h3 id=indeterminate><span class=secno>11.3. </span> The + indeterminate-value pseudo-class <code>:indeterminate</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 @@ -2243,9 +2270,76 @@ Similarly a progress meter can be in an indeterminate state when the percent completion is unknown. - <p>Like the <code>:checked</code> pseudo-class, :indeterminate applies to - all media. Components of a radio-group initialized with no pre-selected - choice, for example, would be :indeterminate even in a static display. + <p>Like the <code>:checked</code> pseudo-class, <code>:indeterminate</code> + applies to all media. Components of a radio-group initialized with no + pre-selected choice, for example, would be <code>:indeterminate</code> + even in a static display. + + <h3 id=pseudo-default><span class=secno>11.4. </span> The default option + pseudo-class <code>:default</code></h3> + + <p>The <code>:default selector</code> applies to the one or more UI + elements that are the default among a set of similar elements. Typically + applies to context menu items, buttons and select lists/menus. + + <p>One example is the default submit button among a set of buttons. Another + example is the default option from a popup menu. Multiple elements in a + select-many group could have multiple <code>:default</code> elements, like + a selection of pizza toppings for example. + + <h3 id=pseudo-validity><span class=secno>11.5. </span> The validity + pseudo-classes <code id=pseudo-valid>:valid</code> and <code + id=pseudo-invalid>:invalid</code></h3> + + <p>An element is <code>:valid</code> or :invalid when its contents or value + is, respectively, valid or invalid with respect to data validity semantics + defined by the document language (e.g. <a href="#XFORMS10" + rel=biblioentry>[XFORMS10]<!--{{XFORMS10}}--></a> or <a href="#HTML5" + rel=biblioentry>[HTML5]<!--{{HTML5}}--></a>). An element which lacks data + validity semantics is neither <code>:valid</code> nor + <code>:invalid</code>. This is different from an element which otherwise + has no constraints. Such an element would always be <code>:valid</code>. + For example, a text input field with no constraints would always be + <code>:valid</code>. + + <h3 id=pseudo-range><span class=secno>11.6. </span> The range + pseudo-classes <code id=pseudo-in-range>:in-range</code> and <code + id=pseudo-out-of-range>:out-of-range</code></h3> + + <p>The <code>:in-range</code> and <code>:out-of-range</code> pseudo-classes + apply only to elements that have range limitations. An element is + <code>:in-range</code> or <code>:out-of-range</code> when the value that + the element is bound to is in range or out of range with respect to its + range limits as defined by the document language. An element that lacks + data range limits or is not a form control is neither + <code>:in-range</code> nor <code>:out-of-range</code>. E.g. a slider + element with a value of 11 presented as a slider control that only + represents the values from 1-10 is :out-of-range. Another example is a + menu element with a value of "E" that happens to be presented as a popup + menu that only has choices "A", "B" and "C". + + <h4 id=pseudo-required-value><span class=secno>11.6.1. </span><span + id=pseudo-required>:required</span> and <span + id=pseudo-optional>:optional</span></h4> + + <p>A form element is <code>:required</code> or <code>:optional<code> if a + value for it is, respectively, required or optional before the form it + belongs to can be validly submitted. Elements that are not form elements + are neither required nor optional. </code></code> + + <h4 id=pseudo-ro-rw><span class=secno>11.6.2. </span> The mutability + pseudo-classes <code id=pseudo-read-only>:read-only</code> and <code + id=pseudo-read-write>:read-write</code></h4> + + <p>An element whose contents are not user-alterable is + <code>:read-only</code>. However, elements whose contents are + user-alterable (such as text input fields) are considered to be in a + :read-write state. In typical documents, most elements are + <code>:read-only</code>. However it may be possible (e.g. in the context + of an editor) for any element to become <code>:read-write</code>. + + <p class=issue>I don't think it makes sense for an editor to match + selectors differently because it is an editor rather than a renderer. <h2 id=structural-pseudos><span class=secno>12. </span> Tree-Structural pseudo-classes</h2> @@ -3487,6 +3581,15 @@ </dd> <!----> + <dt id=XFORMS10>[XFORMS10] + + <dd>John M. Boyer. <a + href="http://www.w3.org/TR/2009/REC-xforms-20091020/"><cite>XForms + 1.1.</cite></a> 20 October 2009. W3C Recommendation. URL: <a + href="http://www.w3.org/TR/2009/REC-xforms-20091020/">http://www.w3.org/TR/2009/REC-xforms-20091020/</a> + </dd> + <!----> + <dt id=XML-NAMES>[XML-NAMES] <dd>Tim Bray; et al. <a Index: Overview.src.html =================================================================== RCS file: /sources/public/csswg/selectors4/Overview.src.html,v retrieving revision 1.45 retrieving revision 1.46 diff -u -d -r1.45 -r1.46 --- Overview.src.html 6 Aug 2011 18:06:35 -0000 1.45 +++ Overview.src.html 10 Aug 2011 19:31:04 -0000 1.46 @@ -355,9 +355,17 @@ pseudo-classes</a></td> <td class="origin">3</td></tr> <tr> - <td class="pattern">E:checked<!--<br>E:indeterminate--></td> - <td class="meaning">a user interface element E which is checked<!-- or in an - indeterminate state--> (for instance a radio-button or checkbox)</td> + <td class="pattern">E:checked</td> + <td class="meaning">a user interface element E which is checked/selected + (for instance a radio-button or checkbox)</td> + <td class="described"><a + href="#UIstates">The UI element states + pseudo-classes</a></td> + <td class="origin">3</td></tr> + <tr> + <td class="pattern">E:indeterminate</td> + <td class="meaning">a user interface element E which is in an + indeterminate state (neither checked nor unchecked)</td> <td class="described"><a href="#UIstates">The UI element states pseudo-classes</a></td> @@ -1058,8 +1066,7 @@ the Namespaces in the XML recommendation, default namespaces do not apply to attributes, therefore attribute selectors without a namespace component apply only to attributes that have no namespace (equivalent - to "<code>|attr</code>"; these attributes are said to be in the - "per-element-type namespace partition"). An asterisk may be used for + to "<code>|attr</code>"). An asterisk may be used for the namespace prefix indicating that the selector is to match all attribute names without regard to the attribute's namespace. @@ -1464,10 +1471,10 @@ it. For example, a visual user agent could apply this pseudo-class when the cursor (mouse pointer) hovers over a box generated by the element. User agents not that do not support <a - href="http://www.w3.org/TR/REC-CSS2/media.html#interactive-media-group">interactive + href="http://www.w3.org/TR/CSS21/media.html#interactive-media-group">interactive media</a> do not have to support this pseudo-class. Some conforming user agents that support <a - href="http://www.w3.org/TR/REC-CSS2/media.html#interactive-media-group">interactive + href="http://www.w3.org/TR/CSS21/media.html#interactive-media-group">interactive media</a> may not be able to support this pseudo-class (e.g., a pen device that does not detect hovering).</li> @@ -1681,7 +1688,7 @@ on the enabled/disabled state of an element.</p> <h3 id=checked> -The :checked pseudo-class</h3> +The selected-option pseudo-class <code>:checked</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 @@ -1698,13 +1705,13 @@ longer apply. <div class="example"> - <p>An unchecked checkbox can be selected by using the <code>:not()</code> + <p>An unchecked checkbox can be selected by using the negation pseudo-class: <pre>:not(:checked)</pre> </div> <h3 id=indeterminate> -The :indeterminate pseudo-class</h3> +The indeterminate-value pseudo-class <code>:indeterminate</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 elements @@ -1712,9 +1719,73 @@ an indeterminate state, neither checked nor unchecked. Similarly a progress meter can be in an indeterminate state when the percent completion is unknown. - <p>Like the <code>:checked</code> pseudo-class, :indeterminate applies to - all media. Components of a radio-group initialized with no pre-selected - choice, for example, would be :indeterminate even in a static display.</p> + <p>Like the <code>:checked</code> pseudo-class, <code>:indeterminate</code> + applies to all media. Components of a radio-group initialized with no + pre-selected choice, for example, would be <code>:indeterminate</code> + even in a static display.</p> + +<h3 id="pseudo-default"> +The default option pseudo-class <code>:default</code></h3> + <p>The <code>:default selector</code> applies to the one or more UI elements + that are the default among a set of similar elements. Typically applies to + context menu items, buttons and select lists/menus. + + <p>One example is the default submit button among a set of buttons. + Another example is the default option from a popup menu. Multiple elements + in a select-many group could have multiple <code>:default</code> elements, + like a selection of pizza toppings for example. + +<h3 id="pseudo-validity"> +The validity pseudo-classes <code id="pseudo-valid">:valid</code> +and <code id="pseudo-invalid">:invalid</code></h3> + + <p>An element is <code>:valid</code> or :invalid when its contents or + value is, respectively, valid or invalid with respect to data validity + semantics defined by the document language (e.g. [[XFORMS10]] or [[HTML5]]). + An element which lacks data validity semantics is neither <code>:valid</code> + nor <code>:invalid</code>. This is different from an element which + otherwise has no constraints. Such an element would always be + <code>:valid</code>. For example, a text input field with no constraints + would always be <code>:valid</code>. + +<h3 id="pseudo-range"> +The range pseudo-classes <code id="pseudo-in-range">:in-range</code> and +<code id="pseudo-out-of-range">:out-of-range</code></h3> + + <p>The <code>:in-range</code> and <code>:out-of-range</code> pseudo-classes + apply only to elements that have range limitations. An element is + <code>:in-range</code> or <code>:out-of-range</code> when the value + that the element is bound to is in range or out of range with respect + to its range limits as defined by the document language. An element + that lacks data range limits or is not a form control is neither + <code>:in-range</code> nor <code>:out-of-range</code>. + E.g. a slider element with a value of 11 presented as a slider control + that only represents the values from 1-10 is :out-of-range. Another + example is a menu element with a value of "E" that happens to be + presented as a popup menu that only has choices "A", "B" and "C". + +<h4 id="pseudo-required-value"><span id="pseudo-required">:required</span> +and <span id="pseudo-optional">:optional</span></h4> + + <p>A form element is <code>:required</code> or <code>:optional<code> + if a value for it is, respectively, required or optional before the + form it belongs to can be validly submitted. Elements that are not + form elements are neither required nor optional. + +<h4 id="pseudo-ro-rw"> +The mutability pseudo-classes <code id="pseudo-read-only">:read-only</code> +and <code id="pseudo-read-write">:read-write</code></h4> + + <p>An element whose contents are not user-alterable is + <code>:read-only</code>. However, elements whose contents are + user-alterable (such as text input fields) are considered to be + in a :read-write state. In typical documents, most elements are + <code>:read-only</code>. However it may be possible (e.g. in the + context of an editor) for any element to become <code>:read-write</code>.</p> + + <p class="issue">I don't think it makes sense for an editor to + match selectors differently because it is an editor rather than + a renderer. <h2 id=structural-pseudos> Tree-Structural pseudo-classes</h2>
Received on Wednesday, 10 August 2011 19:31:08 UTC