8000 csswg-drafts/css-ui-4/Overview.bs at 250fda01b88c8a26436763d140a2297450421936 · w3c/csswg-drafts · GitHub
Skip to content

Overview.bs

Latest commit

 

History

History
1122 lines (926 loc) · 42.6 KB

Overview.bs

File metadata and controls

1122 lines (926 loc) · 42.6 KB
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''
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:
If we did that,
to be consistent,
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 only provides
''appearance/auto'', ''appearance/none''.
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 and button values.
Presumably this was done due to compatibility problems,
so we may need 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.
Form 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.
</dl>
On form control elements where the computed value is ''appearance/auto''
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: revert'' 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 new semantics, pseudo classes, event handlers, etc
that it did not initially have.
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>.
This specification builds upon [[CSS3-UI]],
which was edited and written for the most part
by Tantek Çelik from 1999 to the present,
first while representing Microsoft, then as an Invited Expert,
and most recently while representing Mozilla.
Thanks to feedback and contributions from
<span class="h-card">Rossen Atanassov</span>,
<span class="h-card">Tab Atkins</span>,
<span class="h-card">L. David Baron</span>,
<span class="h-card">Bert Bos</span>,
<span class="h-card">Matthew Brealey</span>,
<span class="h-card">Rick Byers</span>,
<span class="h-card">Ada Chan</span>,
<span class="h-card">James Craig</span>,
<span class="h-card">Michael Cooper</span>,
<span class="h-card">Axel Dahmen</span>,
<span class="h-card">Michael Day</span>,
<span class="h-card">Micah Dubinko</span>,
<span class="h-card">Elika E.</span>,
<span class="h-card">Steve Falkenburg</span>,
<span class="h-card">Andrew Fedoniouk</span>,
<span class="h-card">Al Gilman</span>,
<span class="h-card">Ian Hickson</span>,
<span class="h-card">Bjoern Hoehrmann</span>,
<span class="h-card">Alan Hogan</span>,
<span class="h-card">David Hyatt</span>,
<span class="h-card">Richard Ishida</span>,
View remainder of file in raw view