[css3-ui] pending edits applied for numerous resolved and editorial issues.

Author: tantek

css-ui/Overview.bs

@@ -22,12 +22,14 @@ Abstract: This specification describes user interface related selectors,
 Deadline: 2012-02-14
 Link Defaults: css-color-3 (property) color
 Link Defaults: selectors-4 (selector) :indeterminate
+Ignored Terms: style
+Ignored Terms: text
+Ignored Terms: default
 Ignored Terms: outline-top
 Ignored Terms: outline-left
 Ignored Terms: nav-index
 Ignored Terms: ime-mode
 Ignored Terms: icon
-At Risk: ::value ::choices pseudo-elements
 At Risk: 'box-sizing' property value: padding-box
 At Risk: 'caret-color' property
 At Risk: 'text-overflow' property value: <<string>>
@@ -41,10 +43,6 @@ At risk due to only one implementation:
 <li>box-sizing: padding-box - only FF supports in prefixed version
 
 Not at risk:
-<li>CSS2.1:  		:hover :active :focus
-<li>Selectors:		:enabled :disabled :checked
-<li>:indeterminate implemented by FF3.6, IE9, Opera 10.6, Saf3
-
 <li>box-sizing implemented by IE5/Mac, Opera
 	-moz-box-sizing implemented by Mozilla
 
@@ -75,19 +73,15 @@ implemented by Opera/Presto desktop with "shift+arrow", and Blink, as well as Sa
 
 <h2 id="intro">Introduction</h2>
 
-This module describes selectors and CSS properties which enable authors
-to style user interface related states, element fragments, properties
-and values.
+This module describes CSS properties which enable authors
+to style user interface related properties and values.
 
 <a href="http://www.w3.org/TR/REC-CSS1#anchor-pseudo-classes">Section 2.1 of CSS1</a> [[CSS1]]
 and <a href="http://www.w3.org/TR/CSS2/ui.html">Chapter 18 of CSS2</a> [[CSS2]]
-introduced several user interface related pseudo-classes, properties and values.
-<a href="http://www.w3.org/TR/css3-selectors/#UIstates">Section 6.6.4 of Selectors</a> [[!SELECT]] also describes several additional user interface related pseudo-classes (and one pseudo-element). <a href="http://www.w3.org/TR/2000/WD-css3-userint-20000216">User Interface for CSS3 (16 February 2000)</a> introduced several new user interface related features.
+introduced several user interface related properties and values.
+<a href="http://www.w3.org/TR/2000/WD-css3-userint-20000216">User Interface for CSS3 (16 February 2000)</a> introduced several new user interface related features.
 
-This Working Draft incorporates and extends them to provide the ability, through CSS,
-to style elements based upon additional user interface states,
-to style fragments of user interface elements, and to alter the
-dynamic presentation of elements in ways previously only available through specific HTML elements and attributes.
+This Working Draft incorporates, extends, and supersedes them.
 
 <h3 id="purpose">Purpose</h3>
 
@@ -114,49 +108,6 @@ of Cascading Style Sheets, level 2, revision 1 [[CSS21]]
 <li><a href="http://www.w3.org/TR/2000/WD-css3-userint-20000216">User Interface for CSS3 (16 February 2000)</a> [[CSSUI]]
 </ul>
 
-<h2 id="selectors">User Interface Selectors</h2>
-
-<h3 id="pseudo-elements">User interface element fragments: pseudo-elements</h3>
-
-This specification introduces two new pseudo-elements
-to provide access to additional user interface element fragments.
-<ul>
-  <li>::value
-  <li>::choices
-</ul>
-
-Note: The ::value and ::choices
-pseudo-elements are at risk.
-
-<h4 id="pseudo-value">::value</h4>
-
-A form element may contain both a label for its data value,
-and the data value itself.
-For such elements, the ::value pseudo-element
-selects the representation of just the data value itself,
-in order to style its appearance.
-
-The ''::value'' pseudo-element is similar to an inline-level element,
-but with certain restrictions.
-The following properties apply to ''::value''
-pseudo-element: font properties, color property, background properties,
-'word-spacing', 'letter-spacing', 'text-decoration', 'vertical-align',
-'text-transform', 'line-height'.  UAs may apply other properties as well.
-
-
-<h4 id="pseudo-choices">::choices</h4>
-
-Similarly, a form element which represents a list of options
-may contain both a label for the list,
-and the list of choices itself.
-For such elements,
-the ''::choices'' pseudo-element selects
-the representation of just the list of choices themselves,
-in order to style their appearance.
-
-A list of radio buttons can also be selected with the ''::choices'' pseudo-element,
-and the currently chosen radio button can be selected with the ''::value'' pseudo-element.
-
 <h2 id="box-model">Box Model addition</h2>
 
 <h3 id="box-sizing">'box-sizing' property</h3>
@@ -206,7 +157,7 @@ That is, any padding or border specified on the element
 is laid out and drawn inside this specified width and height.
 The content width and height are calculated
 by subtracting the border and padding widths of the respective sides
-from the specified 'width'
+from the specified 'width' 
 and 'height' properties.
 As the content width and height
 <a href="http://www.w3.org/TR/CSS21/visudet.html#the-width-property">cannot be negative</a> ([[!CSS21]], section 10.2),
@@ -272,12 +223,11 @@ ways:
 
 The outline properties control the style of these dynamic outlines.
 
-Keyboard users depend on outline on elements in the :focus state for interaction with the page, thus authors must not make the outline invisible on such elements without making sure an alternative highlighting mechanism is provided.
+The stacking of the rendering of these outlines is explicitly left up to implementations to provide a better user experience per platform. This supersedes the stacking of outlines as defined in CSS 2.1.
 
-Issue: <a href="https://wiki.csswg.org/spec/css3-ui#issue-51">51</a> Applying transforms to outlines behaves strangely in current implementations (See <a href="
-http://florian.rivoal.net/csswg/outline.html">transformed outline test case</a>). Proposed resolution: leave transformed outline rendering undefined in CSS3-UI.
+Keyboard users depend on outline on elements in the :focus state for interaction with the page, thus authors must not make the outline invisible on such elements without making sure an alternative highlighting mechanism is provided.
 
-Issue: <a href="https://wiki.csswg.org/spec/css3-ui#issue-55">55</a> Outline rendering is under-specified, and details are not interoperable (See <a href="https://lists.w3.org/Archives/Public/www-style/2014Dec/0134.html">a few outline rendering test cases</a>). Tentative proposal: leave non-interop details unspecified in CSS3-UI, attempt to converge in level 4.
+The rendering of applying transforms to outlines is left explicitly undefined in CSS3-UI.
 
 
 <h3 id="outline">'outline' property</h3>
@@ -558,36 +508,20 @@ The 'resize' property applies to elements
 whose computed 'overflow' value
 is something other than ''visible''.
 
-Issue: <a href="https://wiki.csswg.org/spec/css3-ui#issue-52">52</a> Implementation handling of 'resize' on ::before generated content is buggy and not interoperable (See: <a href="http://dabblet.com/gist/ab432c3f6a8f672cd077">resize on :before test case</a>). A few possible resolutions: explicitly specify :resize does not apply to generated content (result undefined), (result no effect - would be at risk) or that it does apply (not interop, would be at risk).
+The 'resize' property does not apply to generated content, the result is undefined.
+
+Note: the 'resize' property may apply in the future if there is implementation of <a href="http://dev.w3.org/csswg/css-pseudo/#CSSPseudoElement-interface">Interface CSSPseudoElement</a>.
 
 When an element is resized by the user,
-the user agent uses a resize function
-based on the unresized computed width and height
-as part of determining the used width and height.
-The element's contents (and surroundings) are reformatted as necessary.
-
-The resize function introduces a step in width/height calculations and formatting
-as described in <a href="http://www.w3.org/TR/CSS21/visudet.html">chapter 10 of CSS2.1</a>.
-Specifically the following step is inserted between steps 1 and 2
-of the algorithm in <a href="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths">section 10.4</a>
-and <a href="http://www.w3.org/TR/CSS21/visudet.html#min-max-heights">10.7</a> in CSS2.1 [[!CSS21]],
-where [dimension] is 'width' for 10.4 and 'height' for 10.7.
-<blockquote><p style="text-indent:-2em">
-1b. If the resize [dimension] function is in use,
- then the tentative used [dimension] is computed with that function,
- and the rules above are applied again,
- but this time using the result of that function as the computed value for '[dimension]'.
-</blockquote>
-
-Issue: <a href="https://wiki.csswg.org/spec/css3-ui#issue-47">47</a> There is evidence that implementations support resize by setting inline style width and height on the element, and there is <a href="http://lists.w3.org/Archives/Public/www-style/2014Dec/0177.html">a proposal to specify that behavior explicitly</a> (<a href="https://lists.w3.org/Archives/Public/www-style/2014Dec/0063.html">previous proposal</a>).
-
-With regard to interactivity and the Document Object Model (DOM),
-the resize function on an element lasts the lifetime of the element,
-however, if the computed 'resize' property itself is altered
-(e.g. via pseudo-class change or via DOM manipulation),
-then the resize function is reset to 
-using the element's unresized computed width and height.
+the user agent sets 
+the 'width' and 'height' properties 
+to px unit length values of the size indicated by the user, 
+in the element’s 'style' attribute DOM,
+replacing existing property declaration(s) if any, 
+without ''!important'' if any.
 
+If an element is resized in only one dimension,
+only the corresponding property is set, not both.
 
 The precise direction of resizing
 (i.e. altering the top left of the element or altering the bottom right)
@@ -598,15 +532,25 @@ and 'bottom' properties,
 whether the language of the element is right-to-left etc.
 The precise direction of resizing is left to the UA to properly determine for the platform.
 
-The user agent should allow the user to resize the element with no other constraints than what is imposed by min-width and max-width.
-(at risk due since <a href="http://lists.w3.org/Archives/Public/www-style/2014Dec/0063.html">only Firefox currently supports this</a>). 
-
-Issue: <a href="https://wiki.csswg.org/spec/css3-ui#issue-53">53</a> is related to the resize constraints being at risk.
+The user agent should allow the user to resize the element 
+with no other constraints than what is imposed by 
+'min-width', 'max-width', 'min-height', and 'max-height'.
+(<a href="https://wiki.csswg.org/spec/css3-ui#issue-53">at risk</a> 
+since 
+<a href="http://lists.w3.org/Archives/Public/www-style/2014Dec/0063.html">only Firefox currently supports this</a>).
 
 The user agent may restrict the resizing range to something suitable,
 such as between the original formatted size of the element,
 and large enough to encompass all the element's contents.
 
+Note: There may be situations where user attempts to resize an element 
+to appear to be overriden or ignored, e.g. because of ''!important'' cascading declarations that supersede 
+that element’s 'style' attribute 
+'width' and 'height' properties in the DOM.
+
+Changes to the computed value of an element's 'resize' property 
+do not reset changes to the 'style' attribute made due to 
+user resizing of that element.
 
 <div class="example"><p style="display:none">Example(s):
 
@@ -671,17 +615,14 @@ in the inline progression direction of its block container element ("the block")
 that has 'overflow'
 other than ''visible''.
 
-Issue: <a href="https://wiki.csswg.org/spec/css3-ui#issue-68">68</a> Should text-overflow apply even when overflow is visible? Possible resolutions: Apply text-overflow regardless of overflow, or consider reverting 
-<a href="https://www.w3.org/wiki/CSS3-UI#Issue_32">resolved issue 32</a>.
-
 Text can overflow for example when it is prevented from wrapping
 (e.g. due to '<code class="lang-css">white-space: nowrap</code>'
 or a single word is too long to fit).
 Values have the following meanings:
 
 <dl data-dfn-for="overflow" class="valuedef">
   <dt><dfn>clip</dfn></dt>
-    <dd>Clip inline content that overflows. Characters may be only partially rendered.</dd>
+    <dd>Clip inline content that overflows its block container element. Characters may be only partially rendered.</dd>
 
   <dt><dfn>ellipsis</dfn></dt>
     <dd>
@@ -699,6 +640,8 @@ for bidi purposes.
 </dd>
 </dl>
 
+Note: The "[...] its block container element" detail of the "clip" value definition is at risk pending implementation and potentially web compatibility feedback.
+
 Note: The <<string>> value, and the 2-value syntax "{1,2}"
 and functionality are all at risk.
 
@@ -732,8 +675,6 @@ atomic inline-level element</a>
 on a line
 must be clipped rather than ellipsed.
 
-Implementations may ellipse at a text wrap opportunity that occurs before a character boundary where an ellipsis is required.
-
 <h4 id="ellipsing-details" class="no-num no-toc">ellipsing details</h4>
 <ul>
 <li>
@@ -990,6 +931,9 @@ then only the end ellipsis/string should be rendered.
 <!-- got this far reformatting lines -->
 This property specifies the type of cursor to be displayed for the pointing device
 when within the element's border-box.
+
+The cursor property does not apply over native user-agent controls such as scrollbars, resizers, or other native UI widgets e.g. those that may be used inside some user agent specific implementations of form elements.
+
 Values have the following meanings:
 
 image cursors
@@ -1043,7 +987,7 @@ general purpose cursors
 <dl>
 <dt style="cursor:auto">auto</dt>
 <dd>The UA determines the cursor to display based on the current
-context.
+context, specifically: auto behaves as 'text' over text, and 'default' otherwise.
 
 <div>
 Issue: <a href="https://wiki.csswg.org/spec/css3-ui#issue-48">48</a> There are reports that this description of cursor: auto is insufficient and not interoperable. Current plan: restrict the auto value to handling things that cannot be described by the UA stylesheet, pending detailed proposal, likely based on <a href="https://lists.w3.org/Archives/Public/www-style/2013Jan/0275.html">David Baron's proposal</a>.
@@ -1288,6 +1232,16 @@ there is no need to refocus the same element.
 
 If no element matches the selector,
 the user agent automatically determines which element to navigate the focus to.
+
+If the focus is navigated to an element 
+that was not otherwise focusable, 
+it becomes focusable 
+only as the result of this directional navigation, 
+and the <css>:focus</css> pseudo-class matches the element 
+while it is focused as such.
+
+Note: there were other options under consideration for such "not otherwise focusable" elements, including focus to the next otherwise focusable element in the document tree (including descendants of such a not otherwise focusable element). Input on such other options is welcome and explicitly solicited, especially from implementation experiences and author experience using the directional navigation properties in their content.
+
 </dd>
 <dt>&lt;target-name&gt;</dt>
 <dd>
@@ -1372,11 +1326,9 @@ There is documentation of
 <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/ime-mode">non-interoperability of these implementations.
 </a>
 
-Implementations must not add support for the ime-mode property.
-
-Implementations should drop support for it as soon as possible.
+User agents should not support the <css>ime-mode</css> property.
 
-Authors must not use the ime-mode property
+Authors must not use the ime-mode property.
 
 Users may use the ime-mode property only for repair use-cases where they have to work around bad sites and legacy implementations, e.g. with a user style sheet rule like:
 <div class="example">
@@ -1391,6 +1343,15 @@ This example CSS may be placed into a user style sheet file to force password in
 
 This specification deliberately does not attempt to document the functionality of legacy ime-mode implementations nor what they specifically support because it does not make sense to pursue or recommend any such path.
 
+<div class="note">
+Note: there are several [[HTML5]] features which authors should use to provide information to user agents that allow them to provide a better input user experience:
+
+<ul>
+<li>The global <code>lang</code> attribute
+<li>The <code>inputmode</code>, <code>pattern</code>, 
+and <code>type</code> attributes of the input element
+</ul>
+</div>
 
 
 <hr title="Separator from footer">
@@ -1429,7 +1390,9 @@ Thanks to feedback and contributions from
 <span class="h-card">Peter Linss</span>,
 <span class="h-card">Kang-Hao Lu</span>,
 <span class="h-card">Masayuki Nakano</span>,
+<span class="h-card">Mats Palmgren</span>, 
 <span class="h-card">Brad Pettit</span>,
+<span class="h-card">François Remy</span>,
 <span class="h-card">Florian Rivoal</span>,
 <span class="h-card">Andrey Rybka</span>,
 <span class="h-card">Simon Sapin</span>,
@@ -1474,29 +1437,7 @@ implemented features.
 <h3 class="no-num" id="changes-list">List of substantial changes</h3>
 
 <ul>
-<li><css>::value</css> pseudo-element. Added detail about which properties apply to the ::value pseudo-element.
-
-<li>'text-overflow' property - added <<string>> value and 2 values option, both explicitly at risk.
-
-<li>'nav-up', 'nav-right', 'nav-down', and 'nav-left' properties removed from the "at risk" list.
-
-<li>'nav-index' dropped due to lack of implementation interest.
-
-<li>'cursor' values "grab" and "grabbing" added per multiple interoperable implementations.
-
-<li>Numerous UI selectors moved to Selectors4 and CSS Pseudo module.
-
-<li>add 'caret-color' property, but at risk.
-
-<li>'ime-mode' explicitly obsoleted.
-
-<li>'outline-offset' define negative values.
-
-<li>'icon' property dropped.
-
-<li>'content' property 'icon' value dropped.
-
-<li>XForms-only pseudo-elements dropped.
+<li><css>::value</css> and <css>::choices</css> pseudo-elements have been dropped due to insufficient implementer interest. As they were published in a previous CR draft, they may be re-added in a future level if implementers show interest and intent to implement.
 
 </ul>