[css-ui-4] Add the 'appearance' property

Author: frivoal

css-ui-4/Overview.bs

@@ -10,7 +10,10 @@ Group: csswg
 Status: UD
 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
 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,
@@ -116,7 +119,7 @@ Abstract: This is a delta specification over CSS-UI Level 3.
 	except on <a>editable element</a>s
 	where the computed value is always ''user-select/element''
 	regardless of the specified value,
-	and when the specified value is ''auto'',
+	and when the specified value is ''user-select/auto'',
 	which computes one of the other values as defined below.
 
 	For the purpose of this specification,
@@ -128,20 +131,20 @@ Abstract: This is a delta specification over CSS-UI Level 3.
 
 	<dl dfn-type=value dfn-for=user-select>
 		<dt><dfn>auto</dfn>
-		<dd>The computed value of ''auto'' is determined as follow:
+		<dd>The computed value of ''user-select/auto'' is determined as follow:
 		<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 ''none'',
-			the computed value is ''none''
+			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 ''auto''
+		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
@@ -156,14 +159,14 @@ Abstract: This is a delta specification over CSS-UI Level 3.
 		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 ''auto'' into ''text'',
+		but sine webkit computes ''user-select/auto'' into ''text'',
 		this does not match reality.
 
 		<dt><dfn>none</dfn>
 		<dd>Users cannot select the content of the element.
 		No selection may be started in this element.
 
-		However, if this element has descendants on which the computed value of 'user-select' is not ''none'',
+		However, if this element has descendants on which the computed value of 'user-select' is not ''user-select/none'',
 		these descendants can be selected.
 
 		A selection started outside of this element may not end in this element.
@@ -184,15 +187,15 @@ Abstract: This is a delta specification over CSS-UI Level 3.
 		A selection may extend across this element.
 		In this case, browsers 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 ''none'',
+		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.
 
-		Note: ''none'' is not a copy protection mechanism,
+		Note: ''user-select/none'' is not a copy protection mechanism,
 		and using it as such is ineffective:
 		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, ''none'' is meant to
+		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.
@@ -232,6 +235,180 @@ Abstract: This is a delta specification over CSS-UI Level 3.
 	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 several browser vendors in experimental implementations.
+Experience as shown that such a list would be extremely long and not practical to maintain.
+Moreover, most values of such an enumeration are never used by authors.
+UAs cannot therefore use the 'appearance' in the UA stylesheet to give each control is native look and feel,
+and must use ''appearance:auto'' instead.
+Only values which are useful to authors or in a user stylesheet
+and for which interoperability can be achieved will be provided
+in addition to ''appearance/auto'' and ''appearance/none''.
+
+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 other 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.
+
+	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.
+</dl>
+
+On form elements when the computed value is ''appearance/auto''
+and on other elements when 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 should have something to say 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.
+However, 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.
+
+<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">