Overview.bs

<h1>CSS Basic User Interface Module Level 4</h1>

<pre class='metadata'>
ED: http://dev.w3.org/csswg/css-ui-4/
Previous Version: http://www.w3.org/TR/css3-ui/
Shortname: css-ui
Level: 4
Group: csswg
!Issue Tracking: https://wiki.csswg.org/spec/css4-ui#css4-ui-issues-list
Status: ED
Editor: Florian Rivoal, Invited Expert, florian@rivoal.net, http://florian.rivoal.net
Ignored Terms: box-sizing, resize, text-overflow, caret-color, nav-up, nav-down, nav-left, nav-right
Link Defaults: css-position-3 (property) position
Link Defaults: css21 (property) float
Link Defaults: css21 (property) clear
Link Defaults: selectors-4 (selector) :checked
Link Defaults: selectors-4 (selector) :enabled
Link Defaults: selectors-4 (selector) :disabled
Abstract: This is a delta specification over CSS-UI Level 3.
          Once the level 3 specification is final,
          its content will be integrated into this specification,
          which will then replace it.
          Until then, CSS-UI Level 4 only contains additions and extensions to level 3.
</pre>

<h2 id="intro">Introduction</h2>

	Issue: Add final level 3 content

<h2 id="interaction">Module Interactions</h2>

	Issue: Add final level 3 content

<h2 id="box-model">Box Model addition</h2>

<h3 id="box-sizing">'box-sizing' property</h3>

	Issue: Add final level 3 content

<h2 id="outline-props">Outline properties</h2>

	Issue: Add final level 3 content

<h3 id="outline">'outline' property</h3>

	Issue: Add final level 3 content

<h3 id="outline-width">'outline-width' property</h3>

	Issue: Add final level 3 content

<h3 id="outline-style">'outline-style' property</h3>

	Issue: Add final level 3 content

<h3 id="outline-color">'outline-color' property</h3>

	Issue: Add final level 3 content

<h2 id="resizing-and-overflow">Resizing &amp; Overflow</h2>

	Issue: Add final level 3 content

<h3 id="resize">'resize' property</h3>

	Issue: Add final level 3 content

<h3 id="text-overflow"> Overflow Ellipsis: the 'text-overflow' property</h3>

	Issue: Add final level 3 content

<h2 id="pointing-keyboard">Pointing Devices and Keyboards</h2>

<h3 id="pointer-interaction">Pointer interaction</h3>

<h4 id="cursor">'cursor' property</h4>

	Issue: Add final level 3 content

	Issue: Amend the definition of ''cursor/auto''
	to show ''cursor/pointer'' rather than ''cursor/text''
	over text when 'user-select' is ''user-select/none''.

<h3 id="insertion-caret">Insertion caret</h3>

<h4 id="caret-color">Coloring the insertion caret: 'caret-color'</h4>

	Issue: Add final level 3 content

<h3 id="keyboard">Keyboard control</h3>

<h4 id="nav-dir">Directional focus navigation: the 'nav-up', 'nav-right', 'nav-down', 'nav-left' properties</h4>

	Issue: Add final level 3 content

<h4 id="input-method-editor">Obsolete: the ime-mode property</h4>

	Issue: Add final level 3 content

<h2 id="user-interaction">User Interaction</h2>

<h3 id="content-selection">Controlling content selection</h3>

	The 'user-select' property enables authors to specify
	which elements in the document can be selected by the user and how.
	This allows for easier interactions when not
	all elements are equally useful to select,
	avoiding accidental selections of neighbouring content.

	<pre class='propdef'>
		Name: user-select
		Value: auto | text | none | element | all
		Initial: auto
		Inherited: no
		Applies to: all elements
		Media: interactive
		Computed value: See below
	</pre>

	The computed value is the specified value,
	except:
	<ol>
		<li>on <a>editable element</a>s
		where the computed value is always ''user-select/element''
		regardless of the specified value
		<li>when the specified value is ''user-select/auto'',
		which computes one of the other values as defined below
	</ol>

	For the purpose of this specification,
	an <dfn>editable element</dfn> is either
	an <a href="https://dvcs.w3.org/hg/editing/raw-file/tip/editing.html#editing-host">editing host</a>
	or a <a href="http://www.w3.org/TR/html/forms.html#mutability">mutable</a> form control with textual content,
	such as <{textarea}>.


	<dl dfn-type=value dfn-for=user-select>
		<dt><dfn>auto</dfn>
		<dd>The computed value of ''user-select/auto'' is determined as follows:
		<ul>
			<li>If the element is an <a>editable element</a>,
			the computed value is ''element''
			<li>Otherwise, if the element is not absolutely positioned
			and the computed value of 'user-select' on the parent of this element is ''all'',
			the computed value is ''all''
			<li>Otherwise, if the element is not absolutely positioned
			and the computed value of 'user-select' on the parent of this element is ''user-select/none'',
			the computed value is ''user-select/none''
			<li>Otherwise, the computed value is ''text''
		</ul>

		Note: This unusual combination of a non inherited property with an initial value of ''user-select/auto''
		whose computed value depends on the parent element
		makes it possible to create what is effectively selective inheritance.
		This was initially proposed by Microsoft in IE to introduce a behavior similar to inheritance
		except that the ''element'' value does not inherit.
		This also enables the behavior introduced by Mozilla in Firefox where absolutely positioned
		children do not inherit from their parent.

		<dt><dfn>text</dfn>
		<dd>The element imposes no constraint on the selection.

		Issue: Shouldn't we call this "normal" instead? The selection
		is not restricted to textual elements, and may contain tables, images...
		The webkit documentation claims their implementation of text only selects text,
		while auto selects anything,
		but sine webkit computes ''user-select/auto'' into ''text'',
		this does not match reality.

		<dt><dfn>none</dfn>
		<dd>
		The UA must not allow selections to be started in this element.

		A selection started outside of this element must not end in this element.
		If the user attempts to create such a selection,
		the UA must instead end the selection range at the element boundary.

		Issue: As of the time of writing, experimental implementations do not all behave like this.
		Firefox does.
		Chrome and Safari almost do: for a selection started after the element
		and trying to go backwards into the element
		they behave as specified here,
		but for a selection started before the element
		and trying to go into the element
		they behave as if the element has ''all'' and select it entirely.
		IE does not restrict selections started outside of the element
		from going into it at all.

		However, if this element has descendants on which the computed value of 'user-select' is not ''user-select/none'',
		selections that start and end within these descendants are allowed.

		The UA must allow selections to extend across this element.
		In this case, UAs which support multiple ranges per selection
		may exclude this element from the selection.
		If the element has descendants on which 'user-select' does not compute to ''user-select/none'',
		these descendants must be included in a selection extending across the element.

		As 'user-select' is a UI convenience mechanism,
		not a copy protection mechanism,
		the UA may provide an alternative way for the user
		to explicitly select the text even when 'user-select' is ''user-select/none''.

		Note: ''user-select/none'' is not a copy protection mechanism,
		and using it as such is ineffective:
		User Agents are allowed to provide ways to bypass it,
		it will have no effect on legacy User Agents that do not support it,
		and the user can disable it through the user style sheet or equivalent mechanisms
		on UAs that do anyway.
		Instead, ''user-select/none'' is meant to
		make it easier for the user to select the content they want,
		by letting the author disable selection on UI elements
		that are not useful to select.

		<dt><dfn>element</dfn>
		<dd>UAs must not allow a selection which is started in this element
		to be extended outside of this element.

		A selection started outside of this element must not end in this element.
		If the user attempts to create such a selection,
		the UA must instead end the selection range at the element boundary.

		The UA must allow selections to extend across this element,
		and such selections must include the content of the element.

		Issue: At the time of writing, browsers behave differently from eachother
		about selections started outside and selections going across the element.
		The behavior can be observed even on browsers that do not explicitly support ''element''
		by trying to select into / across a <{textarea}> or a contenteditable element.

		Issue: Not sure the name ''user-select:element'' is particularly clear
		about what this means.
		How about something like "contain" or "inside" instead?

		<dt><dfn>all</dfn>
		<dd>The content of the element must be selected atomically:
		If a selection would contain part of the element,
		then the selection must contain the entire element including all its descendants.
		If the element is selected
		and the computed value of 'user-select' on its parent is ''all'',
		then the parent must be included in the selection, recursively.

		If this element has descendants on which the computed value of 'user-select' is not ''all''
		and if a selection is entirely contained in these descendants,
		then the selection is not extended to include this whole element.
	</dl>

	Note: Selections can include more than just text and extend over images, tables, videos, etc.
	The behavior when copying and pasting a such selections is out of scope for this specification.

	The following additions are made to the UA stylesheet for HTML:
	<pre><code class="lang-css">
	button, meter, progress, select { user-select: none; }
	</code></pre>

	Issue: the list above is incomplete, and needs to include
	at least the various button-like variants of <{input}>.

<h2 id="form-styling">Form Control Styling</h2>

<h3 id="appearance-switching">Switching appearance</h3>

While the way most elements in a document look can be fully controlled by CSS,
form controls are typically rendered by UAs using native UI controls of the host operating system,
which can neither be replicated nor styled using CSS.

This specification introduces the 'appearance' property
to provide some control over this behavior.
In particular, using ''appearance: none'' allows authors
to suppress the native style of form controls,
so that CSS can be used to fully restyle them.

<pre class="propdef">
Name: appearance
Value: ''auto'' | ''none'' | ''button''
Initial: auto
Applies To: all elements
Inherited: no
Computed value: As specified
Media: all
</pre>

Issue: Should ''appearance/auto'' compute to ''appearance/none'' on regular elements?
I would say no:
to be consistent, we should then have ''appearance/auto'' compute to ''button'' on buttons, etc.
If we did that,
every time we introduced a new value,
we would change what ''appearance/auto'' computes to on some elements,
which doesn't sounds desirable.

Note: This specification intentionally refrains from making the appearance
of all possible form controls and sub-controls available as values,
as had previously been attempted by earlier proposals for this property
and by several UA vendors in experimental implementations.
Experience has shown that such a list would be very long and not practical to maintain,
and UAs would need to add non-standard values
to account for the behavior of non-standard pseudo-elements
sometimes used to implement form controls.
Moreover, many values of such an enumeration only make sense
on a single element or pseudo-element,
and are never used outside of the UA stylesheet.
Instead, this specification will only provide
''appearance/auto'', ''appearance/none'', and
values which are useful in an author or user stylesheet
and for which interoperability can be achieved.
UAs cannot therefore use the 'appearance' property
in the UA stylesheet to give each control is native look and feel,
and must use ''appearance:auto'' instead.

Issue: IE supports -webkit-appearance, and also includes the textfield value.
Presumably this was done due to compatibility problems,
so we may want to include it as well.

<dl dfn-type=value dfn-for=appearance>
	<dt><dfn>auto</dfn>
	<dd>UAs may render form controls using native controls of the host operating system
	or with a look and feel not otherwise expressible in CSS.

	Elements other than form controls must be rendered as if ''appearance/none'' had been specified.
	<dt><dfn>none</dfn>
	<dd> The element is rendered following the usual rules of CSS.
	Replaced elements other than form controls are not affected by this,
	and remain replaced elements.
	From controls are <em>not</em> made to look like native controls of the host operating system.
	See below for details.

	Issue: Shouldn't this be called "normal" instead?
	''appearance/none'' makes it sound like the targeted element will disappear.
	<dt><dfn>button</dfn>
	<dd>The element is rendered with the look and feel of a push button,
	similar to the rendering of the HTML <{button}> element.

	Issue: There are strong concerns as to whether this property should have any value
	other than ''appearance/auto'' and  ''appearance/none''.
	The ''appearance/button'' value may be necessary due to backward compatibility concerns,
	but if it is not, there is a strong possibility that it will be dropped.
</dl>

On form control elements where the computed value is ''appearance/auto''
and on other elements where the computed value is neither ''appearance/auto'' nor ''appearance/none'',
UAs may disregard some CSS properties
to ensure that the intended appearance is preserved,
or because these property may not be meaningful for the chosen appearance.
However, the following properties must not be disregarded:
<ul>
	<li>'appearance'
	<li>'display'
	<li>'visibility'
	<li>'position'
	<li>'top'
	<li>'right'
	<li>'bottom'
	<li>'left'
	<li>'float'
	<li>'clear'
</ul>

Issue: Are there more properties should include in this list?
Should we remove some?
Should whitelist the properties that are ok to ignore instead of
blacklisting those that are not?
Either way, UAs do ignore some properties when rendering form controls,
so this specification needs to say something about this.

All decorative visual aspects of a form control which are not caused by a CSS style rule
must be suppressed when the appearance is changed using 'appearance',
even if the UA's internal representation for this element
was composed of multiple elements or pseudo elements combined together.
For example, <{select}> is often rendered with an arrow on the right side
indicating that the list will be expanded if the element is clicked,
If the computed value of 'appearance' is ''appearance/none'', this
must disappear.

However, the UA must preserve aspects of the form control
which are necessary to operate the control with its original semantics.
This does not include aspects of a control which are merely needed to observe the state the control is in,
only those that are needed for the user to be able to modify the state of the control.
The UA may however give them a different look and feel
as long as it remains possible to operate the control.
For example,
the slider of an <code class="lang-markup">&lt;input type=range></code> is preserved
(or replaced by an equivalent mechanism)
even if 'appearance' is ''appearance/none''
as it would otherwise not be possible to change the value of the range with the mouse or touchscreen.
On the other hand,
the check mark in an <code class="lang-markup">&lt;input type=checkbox checked></code>
must be suppressed,
as it merely indicates the state the element is in,
which can be styled in different ways using the '':checked'' selector.

Issue: UAs are inconsistent about the preceding two paragraphs.
What is specified here attempts to give some logic
to what is preserved and what is not,
based on the use-cases for 'appearance'.

UAs should include in their User Agent stylesheet style rules
to give form controls a recognizable shape when 'appearance' is ''appearance/none''.

Note: Authors may therefore need to override these UA style rules to get the styling
they intended, possibly by using ''all: unset''.

Issue: This usage of the 'all' property would remove focus indicators
created by the 'outline' property,
which seems undesirable.
Using ''all: default'' would not solve it, as it would fail to remove
the UA styles as intended.
How can we mitigate this?

The behavior and semantics of elements remain defined by the host language,
and are not influenced by this property.
For example, regardless of the computed value of 'appearance':
<ul>
	<li>Elements which can be in different states keep this ability,
	and the relevant pseudo-classes match as usual.
	<li>If a <{select}> element is activated,
	the UI to choose one of the associated <{option}> elements is shown
	(although it may look different).
	<li>Event handlers attached to the element trigger as usual.
</ul>
Conversely, changing the appearance of an element must not cause it
to acquire the semantics, pseudo classes, event handlers, etc
that are typical of the element whose appearance it acquires.
For example, neither '':enabled'' nor '':disabled'' match on
a <{div}> styled with ''appearance: button''.
The ability for an element to be focused
is also not changed by the 'appearance' property.

<div class=example>
	An author wanting to customize the look and feel of check boxes in HTML could use the following:
	<pre><code class="lang-css">
input[type=checkbox] {
	appearance: none;
	all: unset;
	width: 1em;
	height: 1em;
	display: inline-block;
	background: red;
}
input[type=checkbox]:checked {
	border-radius: 50%;
	background: green;
}
	</code></pre>

	<code class="lang-markup">&lt;input type="checkbox"></code> would be rendered as
	<span style="display: inline-block; width: 1em; height: 1em; background: red;"></span>,
	while <code class="lang-markup">&lt;input type="checkbox" checked></code> would be rendered as
	<span style="display: inline-block; width: 1em; height: 1em; background: green; border-radius: 50%;"></span>,
	and activating (for example by clicking) the element would toggle the state as usual.
</div>

<hr title="Separator from footer">


<h2 class="no-num" id="acknowledgments">Appendix A. Acknowledgments</h2>

This appendix is <em>informative</em>.

	Issue: Add final level 3 content

<h2 class="no-num" id="changes">Appendix B. Changes</h2>

This appendix is <em>informative</em>.

	Issue: List changes sinces Level 3

<h2 class="no-num" id="default-style-sheet">Appendix C. Default style sheet additions for HTML</h2>

	Issue: Add final level 3 content