- From: Tantek Celik via cvs-syncmail <cvsmail@w3.org>
- Date: Tue, 13 Dec 2011 11:55:16 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-ui
In directory hutz:/tmp/cvs-serv10080
Modified Files:
Overview.html Overview.src.html
Log Message:
drop System Appearance feature, values, properties.
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-ui/Overview.html,v
retrieving revision 1.33
retrieving revision 1.34
diff -u -d -r1.33 -r1.34
--- Overview.html 12 Dec 2011 21:03:58 -0000 1.33
+++ Overview.html 13 Dec 2011 11:55:13 -0000 1.34
@@ -24,9 +24,6 @@
ol.objectives { list-style: decimal }
ol.issues { list-style: decimal }
.html4ss { font-size:90%}
-table.twod { border: solid 2px #777; font-family:sans-serif; font-size:9px }
-table.twod td { border: solid 1px #777; font-family:sans-serif; font-size:9px }
-table.twod th { font-size:10px; font-weight:bold }
h1 {font-size:200%; clear:both}
h2 {font-size:170%; clear:both}
h3 {font-size:150%; clear:both}
@@ -41,11 +38,6 @@
table.tprofile th { width:29%;padding:2px }
[...1587 lines suppressed...]
<tr>
- <th><a class=property href="#font">font</a>
-
- <td><appearance> | status-bar | message-box | caption |
- small-caption | inherit
-
- <td>see individual properties in CSS 2.1
-
- <td>all elements
-
- <td>yes
-
- <td>N/A for system values
-
- <td>visual
-
- <tr>
<th><a class=property href="#icon">icon</a>
<td>auto | <uri> [, <uri>]* | inherit
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-ui/Overview.src.html,v
retrieving revision 1.34
retrieving revision 1.35
diff -u -d -r1.34 -r1.35
--- Overview.src.html 12 Dec 2011 21:03:58 -0000 1.34
+++ Overview.src.html 13 Dec 2011 11:55:13 -0000 1.35
@@ -23,9 +23,6 @@
ol.objectives { list-style: decimal }
ol.issues { list-style: decimal }
.html4ss { font-size:90%}
-table.twod { border: solid 2px #777; font-family:sans-serif; font-size:9px }
-table.twod td { border: solid 1px #777; font-family:sans-serif; font-size:9px }
-table.twod th { font-size:10px; font-weight:bold }
h1 {font-size:200%; clear:both}
h2 {font-size:170%; clear:both}
h3 {font-size:150%; clear:both}
@@ -40,11 +37,6 @@
table.tprofile th { width:29%;padding:2px }
table.tprofile td { width:71%;padding:2px }
-table#egappearance td:first-child { text-align:center; line-height:1.5 }
-table#egappearance label { white-space:nowrap }
-table#egappearance fieldset { line-height:1.4 }
-table#egappearance legend { line-height:1.1 }
-
</style>
<link rel="stylesheet" type="text/css"
href="http://www.w3.org/StyleSheets/TR/W3C-ED">
@@ -191,23 +183,6 @@
At risk due to only one implementation, or obsolete dependency:
XForms is defunct on the web.
<li>XForms needs: :default :valid :invalid :in-range :out-of-range :required :optional :read-only :read-write ::value ::choices ::repeat-item ::repeat-index</li>
-
- <li>appearance: (no interop)
- Webkit implements: -webkit-appearance - unknown which values
- Moz implements: -moz-appearance
- checkbox tab tooltip window dialog menubar
- none(same as normal) button(same as push-buttom) radio(same as radio-button) menupopup(same as pop-up-menu) menuitem(same as menu-item)
- checkboxcontainer(same as checkbox-group?) radiocontainer(same as radio-group?)
- treeview(same as outline-tree?) textfield(same as field) menulist(same as list-menu?) slider(same as range?) menulist(same as pull-down-menu?)
- listbox? listitem?
- hyperlink (with a different mechanism?)
- XForms asked for and/or needs:
- combo-box signature password
- Required generic values:
- icon button menu
- Necessary to replace old CSS3 Color values, so they can be deprecated
- document workspace desktop
- </li>
<li>box-sizing: padding-box - only FF supports in prefixed version</li>
@@ -254,9 +229,6 @@
</li>
-->
<li>::value ::choices ::repeat-item ::repeat-index pseudo-elements</li>
- <li>'appearance' property and values</li>
- <li>'font' property values: window | document | workspace | desktop | tooltip | dialog | button | push-button | hyperlink | radio-button | checkbox | menu-item | tab | menubar | pull-down-menu | pop-up-menu | list-menu | radio-group | checkbox-group | outline-tree | range | field | combo-box | signature | password
- </li>
<li>'box-sizing' property value: padding-box</li>
<li>'content' property value: icon</li>
<li>'icon' property</li>
@@ -298,9 +270,6 @@
</li>
<li>Additions to the user interface features in
<a href="http://www.w3.org/TR/CSS21">CSS2.1</a>.</li>
-<li>The ability to style the appearance of various standard
-form elements in languages such as HTML/XHTML/XForms (and
- properties to augment or replace some of the remaining stylistic attributes in HTML4/XHTML1).</li>
<li>Directional focus navigation properties.</li>
<li>A mechanism to allow the styling of elements as icons for accessibility.</li>
</ul>
@@ -344,8 +313,6 @@
</p>
<ul>
<li>Extend the user interface features in CSS2.1.</li>
-<li>Provide additional CSS mechanisms to simulate the appearance
-of various standard form elements.</li>
<li>Provide additional CSS mechanisms to augment or replace other
dynamic presentation related features in HTML4/XHTML1.</li>
<li>Introduce directional navigation properties to assist in the construction of
@@ -354,55 +321,6 @@
elements to enhance accessibility.</li>
</ul>
-<h3 id="scope">Scope</h3>
-<p>This proposal specifies how to alter the look and feel of various elements,
-and specifically does not address the meaning behind what a specific look and feel may imply.
-For example, with the additions in the proposal, an author can make any element look and even feel like a submit button. Yet, that arbitrary element is not afforded any additional meaning,
-so pushing it does nothing by default, and certainly does not submit a form.
-</p>
-<p>
-Similarly, the HTML4 <code><SELECT></code> element for example, provides a list or menu of choices to the user.
-The meaning of the HTML4 <code><SELECT></code> element is that it allows the user to make a choice, to choose
-something among several alternatives. This says nothing about its look and feel, and
-in fact, the "concept" of a HTML4 <code><SELECT></code> could be visually implemented as a list-box,
-a popup-menu, or a group of radio-buttons.
-Or a group of HTML4 checkboxes (<code><INPUT type="checkbox"></code>) could be styled to appear as a group of radio-buttons, and yet, since those elements are still semantic checkboxes, they can still be individually checked or unchecked, rather than acquiring any kind of radio-button group semantic where only one can be checked.
-</p>
-<p>
-Each example of presentation has a different look and feel, but maintains its original meaning, a choice (or choices) among several alternatives.
-This proposal addresses only the former (look and feel), not the latter (meaning).
-</p>
-<p>
-Since this proposal serves to simulate the appearance of various user interface and forms elements in HTML4/XHTML, it is perhaps useful to call out what specifically is believed to be outside the scope of CSS, or better suited to document structure rather than style and therefore not addressed by this proposal:
-</p>
-<ul>
-<li>Form semantics, including, but not limited to, submission, resetting,
-naming, what determines a successful or valid form control,
-and how to process form data.
-</li>
-<li>Form contents, including, but not limited to initial value, current value, and form content types. The HTML4 '<code>maxlength</code>' attribute, for example, determines the maximum number of characters the user can enter into an <code><INPUT type="text"></code> or <code><INPUT type="password"></code> field, and as such is a content constraint rather than a presentational suggestion.
-</li>
-<li>Form control dependencies, including, but not limited to, whether only one option from a set of choices may be chosen, or whether multiple options may be chosen.
-</li>
-<li>The HTML4/XHTML1 <code><form></code> element and its unique attributes ('<code>action</code>', '<code>method</code>', '<code>enctype</code>', '<code>accept</code>', '<code>accept-charset</code>').
-</li>
-</ul>
-<p>In addition, this document does not attempt to solve all user interface
-related issues / features that can be found in modern user interfaces. Perhaps future versions may attempt to solve these. For example:
-</p>
-<ul><li>Complex or composite controls (e.g. the HTML4 <code><INPUT type="file"></code> and the <code><ISINDEX></code> elements).</li>
- <li>The appearance, styling and coloring of scrollbars.</li>
- <li>Window layering. There is no attempt made to distinguish the appearance
- of elements in the front-most window versus non-front-most windows.
- The semantics of window layering must be addressed
- before it is appropriate to attempt to style such concepts.</li>
- <li>Palettes and floating windows. Along with the concept of "frontmost" window, windows that float but do not receive focus are also not addressed.</li>
- <li>Browser window chrome and toolbars.</li>
- <li>The default styling of the HTML4/XHTML1 <code><fieldset></code>, <code><legend></code>, <code><frame></code> and <code><frameset></code> elements.</li>
- <li>Frame-resizing behavior. The behavior of <code><frame></code> and <code><frameset></code>, specifically the ability to "share" resizability when elements share a border, perhaps by leveraging the border-collapse property is also not addressed.
- </li>
-</ul>
-
<h2>Conformance</h2>
<p>This section is <em>normative</em>.</p>
@@ -506,46 +424,6 @@
<p>In addition, on systems with more than one mouse button, :active is clarified to apply only to the primary or primary activation button (typically the "left" mouse button), and any aliases thereof.</p>
-<div class="example"><p style="display:none">Example(s):</p>
-<h4 class="no-num no-toc">restyling a checkbox</h4>
-<p>
-Authors may wish to completely redo the styling of a form control, such as a checkbox. This can be achieved using several of the above pseudo-classes and the '<span class="value">normal</span>' value for the <span class="property">'appearance'</span> property which is explained later in this specification. In this example, checkboxes with a class of "redone" are styled with specific background images according to their respective user interface states using one or more pseudo-classes.
-</p>
-<pre><code class="css">
-input[type=checkbox] {
- appearance:checkbox; /* expected from UA defaults */
-}
-
-input[type=checkbox].redone {
- appearance:normal; /* resets various properties */
- display:inline-block;
- width:20px; height:20px;
- background:url(customuncheckedimage.png);
-}
-
-input[type=checkbox].redone:active {
- background:url(customuncheckedactiveimage.png);
-}
-
-input[type=checkbox].redone:checked {
- background:url(customcheckedimage.png);
-}
-
-input[type=checkbox].redone:checked:active {
- background:url(customcheckedactiveimage.png);
-}
-
-input[type=checkbox].redone:disabled {
- background:url(customdisableduncheckedimage.png);
-}
-
-input[type=checkbox].redone:disabled:checked {
- background:url(customdisabledcheckedimage.png);
-}
-</code></pre>
-</div>
-
-
<h4 class="no-num no-toc">New user interface state pseudo-classes</h4>
<p>In addition to the above-mentioned pseudo-classes, this specification introduces several new pseudo-classes to define additional user interface states.
@@ -774,349 +652,6 @@
</div>
-
-<h2>System Appearance</h2>
-
-<p>This section is <em>normative</em>.</p>
-
-<h3 id="appearance-val">Appearance values</h3>
-
-<p>
-CSS2 introduced the concept of system colors, which is a set of keywords that allows authors to specify colors in a manner that integrates them into the user's graphic environment. However, color is not the only property for which native form controls have a default.
-</p>
-
-<p>The properties defined and extended in this section refer to the <dfn><appearance></dfn> value type, which may take one of the following values which have been derived from the <a href="http://www.w3.org/TR/CSS21/ui.html#system-colors">list of CSS2.1 System Colors</a> ([[!CSS21]], section 18.2), the list of <a href="http://www.w3.org/TR/html401/interact/forms.html">HTML4 form controls</a> ([[HTML401]], section 17), and additional typical platform user interface (UI) controls (e.g. dialog window, icon):
-</p>
-
-
-<dl>
-<dt>icon</dt>
- <dd>a small picture representing an object, often with a name or label.</dd>
-<dt>window</dt>
-<dd>a viewport, a framed surface used to present objects and content for user viewing and interaction. There are several specific types of windows:
-<dl><dt>desktop</dt>
- <dd>a window used to represent a system as a whole that often contains other windows.</dd>
- <dt>workspace</dt>
- <dd>a window used to represent a project or application that may contain other windows, typically with a titlebar that shows the name of the project or application.</dd>
- <dt>document</dt>
- <dd>a window used to represent a user document, typically with a titlebar that shows its name. May also be used to represent folders or directories in a file system.</dd>
- <dt>tooltip</dt>
- <dd>a window that is used to temporarily display information or help about an object. Also called "info" in the CSS2 system colors.</dd>
- <dt>dialog</dt>
- <dd>a window used to present a notification or alternatives for the user to choose as part of an action taken by the user. Also called "message-box" in the CSS2 system fonts.</dd>
-</dl>
-</dd>
-<dt>button</dt>
-<dd>a small object usually labeled with text that represents a user choice
-<dl><dt>push-button</dt>
- <dd>a button that has a border surrounding it, often beveled to appear three dimensional, as if it is raised. Also called "caption" in CSS2 system fonts.</dd>
- <dt>hyperlink</dt>
- <dd>a button that represents a hypertext link, often as simple as normal text that is underlined and perhaps colored differently.</dd>
- <dt>radio-button</dt>
- <dd>a button that displays whether or not it is checked with a small circle next to the button label. There may be a disc inside the circle when the button is checked. An indeterminate (neither checked nor unchecked) state may be indicated with some other graphic in the circle.</dd>
- <dt>checkbox</dt>
- <dd>a button that displays whether or not it is checked with a small box next to the button label. There may be an 'x' or check mark inside the box when the button is checked. An indeterminate (neither checked nor unchecked) state may be indicated with a dash '-' or a square or some other graphic in the box.</dd>
- <dt>menu-item</dt>
- <dd>a choice within a menu, which may also act as a label for a nested (hierarchical) menu.</dd>
- <dt>tab</dt>
- <dd>a button representing the label for a pane in a tabbed interface.</dd>
-</dl>
-</dd>
-<dt>menu</dt>
-<dd>a set of options for the user to choose from, perhaps more than one at a time. There are several specific types of menus.
-<dl><dt>menubar</dt>
- <dd>a menu of menus, typically arranged linearly, in a horizontal bar.</dd>
- <dt>pull-down-menu</dt>
- <dd>a menu where the name of the menu is displayed and the options remain hidden until the user activates the menu. When the user releases or deactivates the menu, the options are hidden again.</dd>
- <dt>pop-up-menu</dt>
- <dd>a menu where all but the currently selected option remains hidden until the user activates the menu. When the user releases or deactivates the menu, all but the selected option are hidden again.</dd>
- <dt>list-menu</dt>
- <dd>a list of options for the user to choose from, perhaps more than one at a time.</dd>
- <dt>radio-group</dt>
- <dd>a menu where the options are displayed as radio-buttons.</dd>
- <dt>checkbox-group</dt>
- <dd>a menu where the options are displayed as checkboxes.</dd>
- <dt>outline-tree</dt>
- <dd>a menu where the options can be shown or hidden with small widgets, often represented by a small triangle or plus and minus signs.</dd>
- <dt>range</dt>
- <dd>a control that displays the current option, perhaps graphically and allows the user to select other options, perhaps by dragging a slider or turning a knob.</dd>
-</dl>
-</dd>
-<dt>field</dt>
-<dd>an area provided for a user to enter or edit a value, typically using a keyboard. There are several special fields.
-<dl><dt>combo-box</dt>
- <dd>a field which is accompanied by a menu of preset values that can be used to quickly enter common or typical values.</dd>
- <dt>signature</dt>
- <dd>a field for entering a signature.</dd>
- <dt>password</dt>
- <dd>a field for entering a password. Typically the text is rendered as a set of bullets or boxes to obscure the value.</dd>
-</dl>
-</dd>
-</dl>
-<p>
-Conforming user agents must support the five generic appearance values: '<span class="value" title="">icon</span>', '<span class="value">window</span>', '<span class="value">button</span>', '<span class="value">menu</span>' and '<span class="property">field</span>'. If a user agent or platform does not support a specific user interface element (e.g. '<span class="value">dialog</span>'), it may apply the values for the respective generic user interface element (e.g. '<span class="value">window</span>').
-</p>
-
-<p class="note"><em><strong>Note.</strong>
-This specification recommends that user agents allow users to override system appearance and font selections with their own choices or proportions, within the user agent. See the User Agent Accessibility Guidelines, specifically <a href="http://www.w3.org/TR/UAAG10/guidelines.html#gl-user-control-styles">Ensure user control of rendering</a> ([[UAAG10]], section 2 guideline 4).
-</em>
-</p>
-
-
-<h3 id="appearance"><span class="property">'appearance'</span> property</h3>
-
-<table class="propdef"><tbody>
-<tr><th>Name:</th><td><dfn>appearance</dfn></td></tr>
-<tr><th>Value: </th><td>normal | <a href="#appearance-val"><appearance></a> | inherit</td></tr>
-<tr><th>Initial:</th><td>normal</td></tr>
-<tr><th>Applies to:</th><td>all elements</td></tr>
-<tr><th>Inherited:</th><td>no</td></tr>
-<tr><th>Percentages:</th><td>N/A</td></tr>
-<tr><th>Media:</th><td>visual, interactive</td></tr>
-<tr><th>Computed value:</th><td>specified value</td></tr>
-</tbody></table>
-
-<p>This document introduces the <span class="property">'appearance'</span> property which can be used to make an element look like a standard user interface element on the platform.
-</p>
-
-<div class="example"><p style="display:none">Example(s):</p>
-<h4 class="no-num no-toc">A few <span class="property">'appearance'</span> values demonstrated using HTML4</h4>
-<table border="1" id="egappearance">
-<thead><tr><th style="width:10em"><span class="property">'appearance'</span></th><th>HTML4 demonstration</th></tr></thead>
-<tbody>
-<tr><td>normal</td><td><span>hello</span></td></tr>
-<tr><td>button</td><td><button>Search</button></td></tr>
-<tr><td>push-button</td><td><input type="button" value="Sign up"></td></tr>
-<tr><td>hyperlink</td><td><a href="http://www.w3.org/Style/CSS/">CSS home page</a></td></tr>
-<tr><td>radio-button</td><td><input type="radio" id="sticky"><label for="sticky">Sticky</label></td></tr>
-<tr><td>checkbox</td><td><input type="checkbox" id="giftwrap"><label for="giftwrap">Gift wrap</label></td></tr>
-<tr><td>pop-up-menu</td><td><label for="pophoney">Honey</label> <select id="pophoney" size="1">
-<option>Water White</option>
-<option>Extra White</option>
-<option>White</option>
-<option>Extra Light Amber</option>
-<option>Light Amber</option>
-<option selected>Amber</option>
-<option>Dark Amber</option>
-</select>
-</td></tr>
-<tr><td>list-menu</td><td>
-<label for="listhoney">Honey</label> <select id="listhoney" size="5">
-<option>Water White</option>
-<option>Extra White</option>
-<option>White</option>
-<option>Extra Light Amber</option>
-<option>Light Amber</option>
-<option selected>Amber</option>
-<option>Dark Amber</option>
-</select>
-</td>
-</tr>
-<tr><td>radio-group</td><td>
-<fieldset><legend>tea</legend>
-<input type="radio" name="teachoice" id="earl" checked><label for="earl">Earl Grey</label>
-<input type="radio" name="teachoice" id="lemon"><label for="lemon">lemon ginger</label>
-<input type="radio" name="teachoice" id="green"><label for="green">green tea</label>
-<input type="radio" name="teachoice" id="jasmine"><label for="jasmine">jasmine tea</label>
-</fieldset>
-</td>
-</tr>
-<tr><td>checkbox-group</td><td>
-<fieldset><legend>pizza toppings</legend>
-<input type="checkbox" id="freshbasil"><label for="freshbasil">fresh basil</label>
-<input type="checkbox" id="freshgarlic"><label for="freshgarlic">fresh garlic</label>
-<input type="checkbox" id="freshspinach"><label for="freshspinach">fresh spinach</label>
-<input type="checkbox" id="greenpeppers"><label for="greenpeppers">green peppers</label>
-<input type="checkbox" id="mushroom" checked><label for="mushroom">mushrooms</label>
-<input type="checkbox" id="olives"><label for="olives">olives</label>
-<input type="checkbox" id="onions" checked><label for="onions">onions</label>
-<input type="checkbox" id="pineapple"><label for="pineapple">pineapple</label>
-<input type="checkbox" id="tomatoes" checked><label for="tomatoes">tomatoes</label>
-</fieldset>
-</td>
-</tr>
-<tr><td>field</td><td><textarea rows="3" cols="20">Note to self.</textarea></td></tr>
-<tr><td>password</td><td><input type="password" value="secret"></td></tr>
-
-</tbody>
-</table>
-</div>
-
-<h4 class="no-num no-toc"><span class="property">'appearance'</span> property details</h4>
-
-<p>
- The <span class="property">'appearance'</span> property is a shorthand for <span class="property">'appearance</span>', <span class="property">'color</span>', <span class="property">'font</span>',
- and <span class="property">'cursor</span>'. It sets <span class="property">'appearance'</span> to the specified value and the other
- properties to their appropriate system value; '<span class="value">normal</span>' resets
- <span class="property">'appearance'</span> to '<span class="value">normal</span>' and the others to '<span class="value">inherit</span>'. The <span class="property">'appearance'</span> property does not affect the specified or computed values of any other
- properties.
-</p><p>
- If <span class="property">'appearance'</span> is not '<span class="value">normal</span>', the UA must render the element as if
- it was the specified user interface (UI) control from the platform. The UA should use the
- computed values of the <span class="property">'background-*'</span>, <span class="property">'border-*'</span>, <span class="property">'padding-*'</span>,
- <span class="property">'outline-*'</span>, and <span class="property">'text-decoration'</span> properties when they do not have
- their initial values and the computed values of <span class="property">'color'</span>, <span class="property">'font'</span>, and
- <span class="property">'cursor'</span> (whatever their values) to influence the rendering where
- possible. Any values from those properties that cannot be used to
- influence the rendering of the UI control must not affect the rendering at all.
-</p><p class="example">
- For example, the UA should not draw a second border around a
- UI control that already has a border.
-</p><p>
- If <span class="property">'background-color'</span> or <span class="property">'background-image'</span> have non-initial values
- and the UA is using their values for influencing the rendering of
- the UI control, then the UA must ensure that the <span class="property">'color'</span> property is
- also used to influence the rendering.
-<!--
-Similarly if <span class="property">'color'</span> is used to influence the rendering, then <span class="property">'background-color'</span> must be used to influence the rendering, and the other <span class="property">'background-*'</span> properties should be used to influence the rendering as well.
--->
-</p><p>
- Other properties must not affect the handling of <span class="property">'appearance'</span> and
- must instead be applied according to normal CSS rules. In particular
- <span class="property">'margin'</span>, <span class="property">'display'</span>, <span class="property">'float'</span>, <span class="property">'height'</span>, <span class="property">'width'</span>, and <span class="property">'line-height'</span>,
- are not ignored and affect the element as normal.
-</p><p>
- This specification does not define the term "platform".
-</p><p class="example">
- For example, it could be the native graphical rendering engine of
- the operating system, or it could be a user-agent-specific skin.
- In addition, which of several toolkits to use could also be
- decided on an element-by-element basis depending on the values of
- the <span class="property">'background-color'</span>, <span class="property">'background-image'</span>, <span class="property">'border-*-style'</span>, and
- <span class="property">'outline-style'</span> properties, so that the author styles could be
- honored while still honoring <span class="property">'appearance'</span> even though the UA is
- unable to influence the rendering of OS native UI controls.
-</p>
-<p class="note"><em><strong>Note.</strong>
-The exact list of properties set by, influencing, and not affected by
- <span class="property">'appearance'</span> given in the lists above
- may be adjusted based on UA implementor feedback.
-</em></p>
-
-<p>Appearance values take into account the user interface state (if any) of the element; thus there is no need for separate values for enabled vs. disabled checkboxes for example.
-</p>
-
-<div class="example"><p style="display:none">Example(s):</p>
-<h4 class="no-num no-toc">Influencing the color and background-color of a button</h4>
-<p>This example demonstrates setting the color and background-color of an element that is set to '<code class="css">appearance:push-button</code>'.
-</p>
-<h5 class="no-num no-toc">sample CSS:</h5>
-<pre><code class="css">
-input[type=button] {
- appearance:push-button; /* expected from UA defaults */
-}
-
-input[type=button].custom {
- color: #393;
- background-color: #9cf;
-}
-</code></pre>
-<h5 class="no-num no-toc">sample HTML fragment:</h5>
-<pre><code>
-<input type="button" value="Plain button" />
-<input type="button" value="With color" class="custom" />
-</code></pre>
-<h5 class="no-num no-toc">A graphical browser might render these buttons as follows:</h5>
-<p><object type="image/png" data="plainbutton.png">
-First, a rounded button with black text on a white background, with shades of gray being used near the edges to give the impression of depth.
-</object>
-<object type="image/png" data="colorbutton.png">
-Second, a similar rounded button but with blue text on a light blue background, and with shades of blue used to give the impression of depth.
-</object>
-</p>
-<h5 class="no-num no-toc">Your browser on your system:</h5>
-<p><input type="button" value="Plain button"> <input style="color:#339;background-color:#9cf" type="button" value="With color">
-</p>
-</div>
-
-
-
-
-<h3>System fonts</h3>
-
-<p>CSS2 introduced system font keywords as values for the shorthand <span class="property">'font'</span> property which have the effect of setting all the elemental <span class="property">'font-*'</span> properties.
-This specification adds the list of <a href="#appearance-val"><appearance></a> values to the set of system fonts to allow styling text the same as such system controls.
-</p>
-
-<table class="propdef"><tbody>
-<tr><th>Name:</th><td><dfn>font</dfn></td></tr>
-<tr><th>System values: </th><td>
-<a href="#appearance-val"><appearance></a> |
-status-bar | message-box | caption | small-caption | inherit
-</td></tr>
-<tr><th>Initial:</th><td>see individual properties in CSS 2.1</td></tr>
-<tr><th>Applies to:</th><td>all elements</td></tr>
-<tr><th>Inherited:</th><td>yes</td></tr>
-<tr><th>Percentages:</th><td>N/A for system values</td></tr>
-<tr><th>Media:</th><td>visual</td></tr>
-<tr><th>Computed value:</th><td>
-see individual properties.</td></tr>
-</tbody></table>
-
-<dl>
-<dt>icon</dt>
-<dd>The font used to label icons.</dd>
-<dt>window</dt>
-<dd>The font used in the content of a window.</dd>
-<dt>desktop</dt>
-<dd>The font used on the desktop.</dd>
-<dt>workspace</dt>
-<dd>The font used in a workspace window.</dd>
-<dt>document</dt>
-<dd>The font used for the content of a document window.</dd>
-<dt>tooltip</dt>
-<dd>The font used in a tooltip window.</dd>
-<dt>status-bar</dt>
-<dd>The font used in window status bars.</dd>
-<dt>dialog</dt>
-<dt>message-box</dt>
-<dd>The font used in dialog boxes.</dd>
-<dt>button</dt>
-<dt>caption</dt>
-<dd>The font used for buttons (captioned controls etc.).</dd>
-<dt>small-caption</dt>
-<dd>The font used for labeling small controls.</dd>
-<dt>push-button</dt>
-<dd>The specific font used for push-buttons.</dd>
-<dt>hyperlink</dt>
-<dd>The specific font used for hyperlinks.</dd>
-<dt>radio-button</dt>
-<dd>The specific font used for radio-button labels.</dd>
-<dt>checkbox</dt>
-<dd>The font used for checkbox button labels.</dd>
-<dt>menu-item</dt>
-<dd>The font used for menu-item labels.</dd>
-<dt>tab</dt>
-<dd>The font used for tab labels in a tabbed panel interface.</dd>
-<dt>menu</dt>
-<dd>The font used in menus (e.g., dropdown menus and menu lists).</dd>
-<dt>menubar</dt>
-<dd>The specific font used in a menubar.</dd>
-<dt>pull-down-menu</dt>
-<dd>The specific font used in pull-down menus.</dd>
-<dt>pop-up-menu</dt>
-<dd>The specific font used in popup menus.</dd>
-<dt>list-menu</dt>
-<dd>The specific font used in menu lists.</dd>
-<dt>radio-group</dt>
-<dd>The specific font used in radio button groups.</dd>
-<dt>checkbox-group</dt>
-<dd>The specific font used in checkbox button groups.</dd>
-<dt>outline-tree</dt>
-<dd>The specific font used in outline tree views.</dd>
-<dt>range</dt>
-<dd>The specific font used in range controls.</dd>
-<dt>field</dt>
-<dd>The specific font used in form text fields (input or output).</dd>
-<dt>combo-box</dt>
-<dd>The specific font used in a combo-box field.</dd>
-<dt>signature</dt>
-<dd>The specific font used in a signature field.</dd>
-<dt>password</dt>
-<dd>The specific font used in a password field.</dd>
-</dl>
-
-
<h2>Element icons</h2>
<p>This section is <em>normative</em>.</p>
@@ -2372,10 +1907,6 @@
<pre class="html4ss">
-:link,:visited {
- appearance: hyperlink; /* set color, font, background, padding, border, etc.*/
-}
-
:enabled:focus {
outline: 2px inset;
}
@@ -2393,20 +1924,10 @@
input[type=password],
input[type=image]
{
- appearance: button;
display: inline-block;
white-space: nowrap;
}
-button,
-input[type=button],
-input[type=reset][value],
-input[type=submit][value]
-{
-/* appearance of HTML4/XHTML1 push buttons */
- appearance: push-button;
-}
-
button
{
/* white space handling of BUTTON tags in particular */
@@ -2433,36 +1954,12 @@
content: attr(value);
}
-input[type=checkbox]
-{
- appearance:checkbox;
-}
-
-input[type=radio]
-{
- appearance:radio-button;
-}
-
-textarea,
-input,
-input[type=text],
-input[type=hidden],
-input[type=password]
-{
- appearance: field;
-}
-
textarea
{
/* white space handling of TEXTAREA tags in particular */
white-space:pre-wrap;
}
-input[type=password]
-{
- appearance: password;
-}
-
input[type=hidden]
{
/* appearance of the HTML4/XHTML1 hidden text field in particular */
@@ -2479,7 +1976,6 @@
select[size]
{
/* HTML4/XHTML1 <select> w/ size more than 1 - appearance of list */
- appearance: list-menu;
display: inline-block;
height: attr(size,em);
}
@@ -2487,17 +1983,11 @@
select,select[size=1]
{
/* HTML4/XHTML1 <select> without size, or size=1 - popup-menu */
- appearance: popup-menu;
display: inline-block;
height: 1em;
overflow: hidden;
}
-option
-{
- appearance:menu-item;
-}
-
select[size]:active
{
/* active HTML4/XHTML <select> w/ size more than 1 - appearance of active list */
@@ -2575,8 +2065,6 @@
:hover, :active on non-hyperlinks, :focus, :enabled, :disabled, :checked, :indeterminate pseudo-classes<br>
:default, :valid, :invalid, :in-range, :out-of-range, :required, :optional, :read-only, :read-write pseudo-classes<br>
::selection, ::value, ::choices, ::repeat-item, ::repeat-index pseudo-elements<br>
- 'appearance' property<br>
- 'font' property keyword additions<br>
'icon' keyword value for 'content' property<br>
'box-sizing' property<br>
'outline', 'outline-width', 'outline-style', 'outline-color', 'outline-offset' properties<br>
@@ -2614,8 +2102,6 @@
:enabled, :disabled, :checked, :indeterminate pseudo-classes<br>
:default, :valid, :invalid, :in-range, :out-of-range, :required, :optional, :read-only, :read-write pseudo-classes<br>
::selection, ::value, ::choices, ::repeat-item, ::repeat-index pseudo-elements<br>
- 'appearance' property<br>
- 'font' property keyword additions<br>
'icon' keyword value for 'content' property<br>
'box-sizing' property<br>
'outline-offset' property<br>
@@ -2649,10 +2135,8 @@
<th>Excludes</th>
<td>
::selection pseudo-element<br>
- 'appearance' property<br>
'outline', 'outline-width', 'outline-style', 'outline-color' properties.<br>
'cursor' property<br>
- 'font' property keyword additions<br>
'icon' keyword value for 'content' property<br>
'box-sizing' property<br>
'outline-offset' property<br>
@@ -2681,10 +2165,8 @@
:hover, :active, :focus, :enabled, :disabled, :checked, :indeterminate pseudo-classes<br>
:default, :valid, :invalid, :in-range, :out-of-range, :required, :optional, :read-only, :read-write pseudo-classes<br>
::selection, ::value, ::choices, ::repeat-item, ::repeat-index pseudo-elements<br>
- 'appearance' property<br>
'outline', 'outline-width', 'outline-style', 'outline-color' properties.<br>
'cursor' property<br>
- 'font' property keyword additions<br>
'icon' keyword value for 'content' property<br>
'box-sizing' property<br>
'outline-offset' property<br>
Received on Tuesday, 13 December 2011 11:57:24 UTC