Skip to content

Commit

Permalink
[css-ui-4] Provide hooks for HTML to define rendering for widgets
Browse files Browse the repository at this point in the history 
Relates to w3c#3526

This is part of an editorial rewrite of the prior work by Bocoup
(@zcorpan and @howard-e):
* whatwg/html#7004
* w3c#6537

Co-authored-by: fantasai <[email protected]>
Co-authored-by: Simon Pieters <[email protected]>
Co-authored-by: Howard Edwards <[email protected]>
  • Loading branch information
@frivoal @fantasai
@zcorpan @howard-e
4 people committed Apr 20, 2022
1 parent aad71de commit d37a191
Showing 1 changed file with 111 additions and 31 deletions.
142 changes: 111 additions & 31 deletions css-ui-4/Overview.bs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1999,7 +1999,7 @@ to match the control to platform conventions for the use of the accent color.

<pre class="propdef">
Name: appearance
Value: ''appearance/none'' | ''auto'' | ''textfield'' | ''menulist-button'' | <<compat-auto>>
Value: ''appearance/none'' | ''auto'' | <<compat-auto>> | <<compat-special>>
Initial: none
Applies To: all elements
Inherited: no
Expand All @@ -2020,7 +2020,8 @@ This specification introduces the 'appearance' property
to provide some control over this behavior.
In particular, using ''appearance: none'' allows authors
to suppress the <a>native appearance</a> of <a>widgets</a>,
so that CSS can be used to restyle them.
giving them a <dfn export>primitive appearance</dfn>
where CSS can be used to restyle them.

<details class=note>
<summary>Note on the history of this feature</summary>
Expand Down Expand Up @@ -2071,35 +2072,23 @@ so that CSS can be used to restyle them.
The element is rendered following the usual rules of CSS.
Replaced elements other than <a>widgets</a> are not affected by this
and remain replaced elements.
<a>Widgets</a> must not have their <a>native appearance</a>.
<a>Widgets</a> must not have their <a>native appearance</a>,
and instead must have their <a>primitive appearance</a>.
See [[#appearance-decorative]] and [[#appearance-semantics]] for details.

<dt><dfn>auto</dfn>
<dd>
<a>Widgets</a> may have their <a>native appearance</a>.
Elements representing <a>widgets</a> should have the <a>native appearance</a> of that widget,
if the <a>properties that disable native appearance for widgets</a> are not in effect.
See [[#appearance-disabling-properties]].

Elements other than <a>widgets</a> must be rendered as if ''appearance/none'' had been specified.
The host language is responsible for defining
which elements represent which <a>widgets</a>.

<dt><dfn>textfield</dfn>
<dd>
For <{input}> elements where the <{input/type}> attribute is in the Search state,
the element is rendered as a "normal" text entry widget,
similar to an <{input}> element where the <{input/type}> attribute is in the Text state.

For all other elements, this value has the same effect as ''appearance/auto''.

<dt><dfn>menulist-button</dfn>
<dd>
For <a spec="html">drop-down box</a> <{select}> elements,
the element is rendered as a drop-down box, including a "drop-down button",
but not necessarily using a native control of the host operating system.
For such elements, CSS properties such as 'color', 'background-color', and 'border'
(that can be disregarded for ''appearance/auto'') should not be disregarded.
Elements other than <a>widgets</a> must be rendered as for ''appearance/none''.

For all other elements, this value has the same effect as ''appearance/auto''.

<dt><dfn type="">&lt;compat-auto></dfn>
<dd>
<dt><dfn type="">&lt;compat-auto></dfn>
<dd>
These values exist for compatibility of content developed
for earlier non-standard versions of this property.
They all have the same effect as ''appearance/auto''.
Expand All @@ -2119,6 +2108,27 @@ so that CSS can be used to restyle them.
or that
some of these values need to have some side effects on some <a>widgets</a>.

<dt><dfn type="">&lt;compat-special></dfn>
<dd>
These values exist for compatibility of content developed
for earlier non-standard versions of this property.
For the purpose of this specification,
they all have the same effect as ''appearance/auto''.
However, the host language may also take these values into account
when defining the <a>native appearance</a> of the element.

<pre class=prod style="white-space: normal"><<compat-special>> = <dfn>textfield</dfn> | <dfn>menulist-button</dfn> </pre>

<div class=example>
For instance, in [[HTML]]:
* The native appearance of <{input}> elements with a <code>"search"</code> <{input/type}> attribute changes
to match the appearance of <{input}> elements with a <code>"text"</code> <{input/type}> attribute
when 'appearance' is ''textfield''.
* The native appearance of drop-down box <{select}> elements changes
to match that of its <a>devolved</a> state
when 'appearance' is ''menulist-button''.
</div>

</dl>

<div class=issue>
Expand Down Expand Up @@ -2156,11 +2166,8 @@ so that CSS can be used to restyle them.
and activating (for example by clicking) the element would toggle the state as usual.
</div>

On <a>widgets</a> where the computed value is ''appearance/auto'',
''appearance/textfield'',
''appearance/menulist-button'',
or one of the <<compat-auto>> values,
UAs may disregard some CSS properties
User agents may disregard some CSS properties
on [=widgets=] rendered with their [=native appearance=]
to ensure that the intended appearance is preserved,
or because these properties may not be meaningful for the chosen appearance.
However, the following properties must not be disregarded:
Expand Down Expand Up @@ -2193,11 +2200,82 @@ so this specification needs to say something about this.
For compatibility with legacy content, UAs must also support <dfn property export>-webkit-appearance</dfn>
as a [=legacy name alias=] of 'appearance'.


<h4 id="appearance-disabling-properties">
Properties Disabling Native Appearance</h4>

Certain properties, when declared in the [=Author Origin=] or [=Animation Origin=],
will disable the [=native appearance=] of certain [=widgets=].
Specifically,
if all the declarations of the [=Author Origin=] and [=Animation Origin=]
pertaining to such a [=widget=] are cascaded
and a [=cascaded value=] exists--
and is not ''revert'' or ''revert-layer''--
for any <a>property that disables native appearance for widgets</a>,
then that [=widget=] is rendered as a <a>devolved widget</a>.
The rendering of a <dfn export lt="devolved|devolved widget">devolved widget</dfn>
is identical to that of the [=widget=] in its [=primitive appearance=],
except when specified otherwise by the host language.

The host language defines
which elements represent <dfn export lt="devolvable|devolvable widget">devolvable widgets</dfn>.
Widgets whose appearance remains native
regardless of any <a>properties that disable native appearance for widgets</a>
are called <dfn export lt="non-devolvable|non-devolvable widget">non-devolvable widgets</dfn>.

The <dfn lt="property that disables native appearance for widgets|properties that disable native appearance for widgets">properties that disable native appearance for widgets</dfn> are:
<ul>
<li>'background-color'
<li>'border-top-color'
<li>'border-top-style'
<li>'border-top-width'
<li>'border-right-color'
<li>'border-right-style'
<li>'border-right-width'
<li>'border-bottom-color'
<li>'border-bottom-style'
<li>'border-bottom-width'
<li>'border-left-color'
<li>'border-left-style'
<li>'border-left-width'
<li>'border-block-start-color'
<li>'border-block-end-color'
<li>'border-inline-start-color'
<li>'border-inline-end-color'
<li>'border-block-start-style'
<li>'border-block-end-style'
<li>'border-inline-start-style'
<li>'border-inline-end-style'
<li>'border-block-start-width'
<li>'border-block-end-width'
<li>'border-inline-start-width'
<li>'border-inline-end-width'
<li>'background-image'
<li>'background-attachment'
<li>'background-position'
<li>'background-clip'
<li>'background-origin'
<li>'background-size'
<li>'border-image-source'
<li>'border-image-slice'
<li>'border-image-width'
<li>'border-image-outset'
<li>'border-image-repeat'
<li>'border-top-left-radius'
<li>'border-top-right-radius'
<li>'border-bottom-right-radius'
<li>'border-bottom-left-radius'
<li>'border-start-start-radius'
<li>'border-start-end-radius'
<li>'border-end-start-radius'
<li>'border-end-end-radius'
</ul>

<h4 id=appearance-decorative>
Effects of 'appearance' on Decorative Aspects of Elements</h4>

All decorative visual aspects of a <a>widget</a> which are not caused by a CSS style rule
must be suppressed when the appearance is changed using 'appearance',
must be suppressed when the appearance is changed from [=native appearance|native=] to [=primitive appearance|primitive=] using 'appearance',
even if the UA's internal representation for this element
was composed of multiple elements or pseudo-elements combined together.

Expand Down Expand Up @@ -2227,7 +2305,9 @@ they intended.
<h4 id=appearance-semantics>
Effects of 'appearance' on Semantic Aspects of Elements</h4>

UAs must preserve aspects of the <a>widget</a>
When showing the [=primitive appearance=] of a [=widget=]
or its [=devolved=] state,
user agents must preserve aspects of the <a>widget</a>
which are necessary to operate the <a>widget</a> with its original semantics.
The UA may however give them a different look and feel
as long as it remains possible to operate the <a>widget</a>.
Expand Down

0 comments on commit d37a191

Please sign in to comment.