WD-css3-ui-20120117-icon

From W3C Wiki

This is an archive page for the 'icon' property and related aspects. Spec source markup is included here (direct cut/paste) from the CSS3-UI editor's draft that was last published in http://www.w3.org/TR/2012/WD-css3-ui-20120117/

Spec Markup

from class='metadata' section:

At Risk: 'content' property value: icon
At Risk: 'icon' property

from Purpose section:

<li>Introduce properties and values to specify icon presentations for
elements to enhance accessibility.

from level 2 section Element Icons:

<nowiki>
<h2 id="icons">Element icons</h2>

<h3 id="content-addition">'content' property addition</h3>

<table class="propdef"><tbody>
<tr><th>Name:</th><td><dfn>content</dfn></td></tr>
<tr><th>New Value(s):</th><td title="">icon</td></tr>

<tr><th>Initial:</th><td>same as CSS 2.1</td></tr>
<tr><th>Applies to:</th><td>same as CSS 2.1</td></tr>
<tr><th>Inherited:</th><td>same as CSS 2.1</td></tr>
<tr><th>Percentages:</th><td>same as CSS 2.1</td></tr>
<tr><th>Media:</th><td>same as CSS 2.1</td></tr>
<tr><th>Computed value:</th><td>the keyword ''icon'' if specified as such, otherwise same as CSS 2.1</td></tr>
<tr><th>Animatable:</th><td>no</td></tr>
</tbody></table>

<dl>
<dt>icon</dt>
<dd>The (pseudo-)element is replaced in its entirety by the resource referenced by its 'icon' property, and treated as a replaced element.
</dd>
</dl>

Note: It is expected that the next draft of the CSS3 Generated Content module [[CSS3GENCON]]
will include and superset this functionality.

Note: The ''icon'' value is at risk.

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

<table class="propdef"><tbody>
<tr><th>Name:</th><td><dfn>icon</dfn></td></tr>
<tr><th>Value:</th><td>auto | <uri> [, <uri>]* | inherit</td></tr>
<tr><th>Initial:</th><td>auto</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>all</td></tr>
<tr><th>Computed value:</th><td>as specified, except with any relative URLs converted to absolute</td></tr>
<tr><th>Animatable:</th><td>no</td></tr>
</tbody></table>

<dl>
<dt>auto</dt>
<dd>Use a default generic icon provided by the user agent.</dd>
<dt><uri></dt>
<dd>URIs (see [[!URI]], [[!RFC1738]] and [[!RFC1808]]) provide a way of identifying resources.
The <uri> value(s) in this property refer to one or more icons in a comma delimited list.
The user agent loads the referenced icons one by one until it finds one that it is able to render.
This permits the usage of multiple different icon formats for various platforms,
and various media for that matter.</dd>
</dl>

The 'icon' property provides the author
the ability to style any arbitrary element with an iconic equivalent.
An element's icon is not used/rendered
unless the 'content' property is set
to the value ''icon''(see above).
Documents whose elements have icons assigned to them
can be more easily viewed by users who find too much text distracting.

<div class="example"><p style="display:none">Example(s):
<h4 id="icon-example" class="no-num no-toc">Representing elements with icons</h4>

This example uses the above icon features to display icons in place of images and objects.
<pre><code class="lang-css">
img,object { content:icon }
  /* note that the CSS3 Generated Content module [[CSS3GENCON]]
     expands the 'content'property to apply to all elements. */

img { icon:url(imgicon.png); }
  /* provide a custom icon for images */

object { icon:url(objicon.png); }
  /* provide a different custom icon for objects */
</code>

Note: The 'icon' property is at risk.

</nowiki>


See Also