- From: Tantek Celik via cvs-syncmail <cvsmail@w3.org>
- Date: Fri, 08 Jul 2011 02:39:38 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-ui
In directory hutz:/tmp/cvs-serv27304
Modified Files:
Overview.html Overview.src.html
Log Message:
add ime-mode property, box-sizing:padding-box value, and text-overflow string and 2 value syntax+definition.
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-ui/Overview.html,v
retrieving revision 1.25
retrieving revision 1.26
diff -u -d -r1.25 -r1.26
--- Overview.html 1 Jul 2011 04:25:10 -0000 1.25
+++ Overview.html 8 Jul 2011 02:39:36 -0000 1.26
@@ -55,11 +55,11 @@
src="http://www.w3.org/Icons/w3c_home" width=72> </a>
<h1>CSS Basic User Interface Module Level 3</h1>
- <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 1 July 2011</h2>
+ <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 8 July 2011</h2>
<dl>
<dt>This version:</dt>
- <!-- <dd><a href="http://www.w3.org/TR/2011/ED-css3-ui-20110701">http://www.w3.org/TR/2011/ED-css3-ui-20110701</a></dd> -->
+ <!-- <dd><a href="http://www.w3.org/TR/2011/ED-css3-ui-20110708">http://www.w3.org/TR/2011/ED-css3-ui-20110708</a></dd> -->
[...1080 lines suppressed...]
+
+ <td>no
+
+ <td>N/A
+
+ <td>interactive
+
+ <tr>
<td><a class=property href="#nav-index0">nav-index</a>
<td>auto | <number> | inherit
@@ -4972,7 +5160,7 @@
<tr>
<td><a class=property href="#text-overflow0">text-overflow</a>
- <td>clip | ellipsis
+ <td>( clip | ellipsis | <string> ){1,2} | inherit
<td>clip
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-ui/Overview.src.html,v
retrieving revision 1.26
retrieving revision 1.27
diff -u -d -r1.26 -r1.27
--- Overview.src.html 1 Jul 2011 04:25:10 -0000 1.26
+++ Overview.src.html 8 Jul 2011 02:39:36 -0000 1.27
@@ -209,6 +209,11 @@
document workspace desktop
</li>
+ <li>box-sizing: padding-box - only FF supports in prefixed version</li>
+
+ <li>ime-mode: new - not sure about IE5+ vs FF3+ interop
+ </li>
+
Not at risk:
<li>CSS2.1: :hover :active :focus</li>
<li>Selectors: :enabled :disabled :checked :indeterminate ::selection</li>
@@ -247,8 +252,10 @@
<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>
+ <li>'ime-mode' property</li>
</ul>
@@ -775,65 +782,65 @@
<dl>
-<dt><strong title="">icon</strong></dt>
+<dt>icon</dt>
<dd>a small picture representing an object, often with a name or label.</dd>
-<dt><strong>window</strong></dt>
+<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><strong>desktop</strong></dt>
+<dl><dt>desktop</dt>
<dd>a window used to represent a system as a whole that often contains other windows.</dd>
- <dt><strong>workspace</strong></dt>
+ <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><strong>document</strong></dt>
+ <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><strong>tooltip</strong></dt>
+ <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><strong>dialog</strong></dt>
+ <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><strong>button</strong></dt>
+<dt>button</dt>
<dd>a small object usually labeled with text that represents a user choice
-<dl><dt><strong>push-button</strong></dt>
+<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><strong>hyperlink</strong></dt>
+ <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><strong>radio-button</strong></dt>
+ <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><strong>checkbox</strong></dt>
+ <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><strong>menu-item</strong></dt>
+ <dt>menu-item</dt>
<dd>a choice within a menu, which may also act as a label for a nested (hierarchical) menu.</dd>
- <dt><strong>tab</strong></dt>
+ <dt>tab</dt>
<dd>a button representing the label for a pane in a tabbed interface.</dd>
</dl>
</dd>
-<dt><strong>menu</strong></dt>
+<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><strong>menubar</strong></dt>
+<dl><dt>menubar</dt>
<dd>a menu of menus, typically arranged linearly, in a horizontal bar.</dd>
- <dt><strong>pull-down-menu</strong></dt>
+ <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><strong>pop-up-menu</strong></dt>
+ <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><strong>list-menu</strong></dt>
+ <dt>list-menu</dt>
<dd>a list of options for the user to choose from, perhaps more than one at a time.</dd>
- <dt><strong>radio-group</strong></dt>
+ <dt>radio-group</dt>
<dd>a menu where the options are displayed as radio-buttons.</dd>
- <dt><strong>checkbox-group</strong></dt>
+ <dt>checkbox-group</dt>
<dd>a menu where the options are displayed as checkboxes.</dd>
- <dt><strong>outline-tree</strong></dt>
+ <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><strong>range</strong></dt>
+ <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><strong>field</strong></dt>
+<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><strong>combo-box</strong></dt>
+<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><strong>signature</strong></dt>
+ <dt>signature</dt>
<dd>a field for entering a signature.</dd>
- <dt><strong>password</strong></dt>
+ <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>
@@ -1039,65 +1046,65 @@
</tbody></table>
<dl>
-<dt><strong title="">icon</strong></dt>
+<dt>icon</dt>
<dd>The font used to label icons.</dd>
-<dt><strong>window</strong></dt>
+<dt>window</dt>
<dd>The font used in the content of a window.</dd>
-<dt><strong>desktop</strong></dt>
+<dt>desktop</dt>
<dd>The font used on the desktop.</dd>
-<dt><strong>workspace</strong></dt>
+<dt>workspace</dt>
<dd>The font used in a workspace window.</dd>
-<dt><strong>document</strong></dt>
+<dt>document</dt>
<dd>The font used for the content of a document window.</dd>
-<dt><strong>tooltip</strong></dt>
+<dt>tooltip</dt>
<dd>The font used in a tooltip window.</dd>
-<dt><strong>status-bar</strong></dt>
+<dt>status-bar</dt>
<dd>The font used in window status bars.</dd>
-<dt><strong>dialog</strong></dt>
-<dt><strong>message-box</strong></dt>
+<dt>dialog</dt>
+<dt>message-box</dt>
<dd>The font used in dialog boxes.</dd>
-<dt><strong>button</strong></dt>
-<dt><strong>caption</strong></dt>
+<dt>button</dt>
+<dt>caption</dt>
<dd>The font used for buttons (captioned controls etc.).</dd>
-<dt><strong>small-caption</strong></dt>
+<dt>small-caption</dt>
<dd>The font used for labeling small controls.</dd>
-<dt><strong>push-button</strong></dt>
+<dt>push-button</dt>
<dd>The specific font used for push-buttons.</dd>
-<dt><strong>hyperlink</strong></dt>
+<dt>hyperlink</dt>
<dd>The specific font used for hyperlinks.</dd>
-<dt><strong>radio-button</strong></dt>
+<dt>radio-button</dt>
<dd>The specific font used for radio-button labels.</dd>
-<dt><strong>checkbox</strong></dt>
+<dt>checkbox</dt>
<dd>The font used for checkbox button labels.</dd>
-<dt><strong>menu-item</strong></dt>
+<dt>menu-item</dt>
<dd>The font used for menu-item labels.</dd>
-<dt><strong>tab</strong></dt>
+<dt>tab</dt>
<dd>The font used for tab labels in a tabbed panel interface.</dd>
-<dt><strong>menu</strong></dt>
+<dt>menu</dt>
<dd>The font used in menus (e.g., dropdown menus and menu lists).</dd>
-<dt><strong>menubar</strong></dt>
+<dt>menubar</dt>
<dd>The specific font used in a menubar.</dd>
-<dt><strong>pull-down-menu</strong></dt>
+<dt>pull-down-menu</dt>
<dd>The specific font used in pull-down menus.</dd>
-<dt><strong>pop-up-menu</strong></dt>
+<dt>pop-up-menu</dt>
<dd>The specific font used in popup menus.</dd>
-<dt><strong>list-menu</strong></dt>
+<dt>list-menu</dt>
<dd>The specific font used in menu lists.</dd>
-<dt><strong>radio-group</strong></dt>
+<dt>radio-group</dt>
<dd>The specific font used in radio button groups.</dd>
-<dt><strong>checkbox-group</strong></dt>
+<dt>checkbox-group</dt>
<dd>The specific font used in checkbox button groups.</dd>
-<dt><strong>outline-tree</strong></dt>
+<dt>outline-tree</dt>
<dd>The specific font used in outline tree views.</dd>
-<dt><strong>range</strong></dt>
+<dt>range</dt>
<dd>The specific font used in range controls.</dd>
-<dt><strong>field</strong></dt>
+<dt>field</dt>
<dd>The specific font used in form text fields (input or output).</dd>
-<dt><strong>combo-box</strong></dt>
+<dt>combo-box</dt>
<dd>The specific font used in a combo-box field.</dd>
-<dt><strong>signature</strong></dt>
+<dt>signature</dt>
<dd>The specific font used in a signature field.</dd>
-<dt><strong>password</strong></dt>
+<dt>password</dt>
<dd>The specific font used in a password field.</dd>
</dl>
@@ -1121,7 +1128,7 @@
</tbody></table>
<dl>
-<dt><strong title="">icon</strong></dt>
+<dt>icon</dt>
<dd>The (pseudo-)element is replaced in its entirety by the resource referenced by its <span class="property">'icon'</span> property, and treated as a replaced element.
</dd>
</dl>
@@ -1146,9 +1153,9 @@
</tbody></table>
<dl>
-<dt><strong>auto</strong></dt>
+<dt>auto</dt>
<dd>Use a default generic icon provided by the user agent.</dd>
-<dt><strong><uri></strong></dt>
+<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>
@@ -1180,7 +1187,11 @@
<table class="propdef"><tbody>
<tr><th>Name:</th><td><dfn>box-sizing</dfn></td></tr>
-<tr><th>Value:</th><td>content-box | border-box | inherit</td></tr>
+<tr><th>Value:</th><td>
+content-box |
+padding-box |
+border-box |
+inherit</td></tr>
<tr><th>Initial:</th><td>content-box</td></tr>
<tr><th>Applies to:</th><td>all elements that accept width or height</td></tr>
<tr><th>Inherited:</th><td>no</td></tr>
@@ -1190,13 +1201,28 @@
</tbody></table>
<dl>
-<dt><strong>content-box</strong></dt>
+<dt>content-box</dt>
<dd>This is the behavior of width and height as specified by CSS2.1.
The specified width and height (and respective min/max properties) apply to the width and height respectively of the content box of the element. The padding
and border of the element are laid out and drawn outside the
specified width and height.</dd>
-<dt><strong>border-box</strong></dt>
-<dd>The specified width and height (and respective min/max properties) on this element determine the border box of the element. That is, any padding or border
+<dt>padding-box</dt>
+<dd>
+The specified width and height (and respective min/max properties)
+on this element determine the padding box of the element.
+That is, any padding specified on the element is laid out and
+drawn inside this specified width and height.
+The content width and height are calculated by
+subtracting the padding widths of the respective sides
+from the specified <span class="property">'width'</span> and
+<span class="property">'height'</span> properties.
+As the content width and height
+<a href="http://www.w3.org/TR/CSS21/visudet.html#the-width-property">
+cannot be negative</a> ([[!CSS21]], section 10.2),
+this computation is floored at 0.
+</dd>
+<dt>border-box</dt>
+<dd>The specified width and height (and respective min/max properties) on this element determine the border box of the element. That is, any padding or border
specified on the element is laid out and drawn inside this specified
width and height. The content width and height are calculated by
subtracting the border and padding widths of the respective sides
@@ -1457,14 +1483,14 @@
</tbody></table>
<dl>
-<dt><strong>none</strong></dt>
+<dt>none</dt>
<dd>The UA does not present a resizing mechanism on the element, and the user is given no direct manipulation mechanism to resize the element.</dd>
-<dt><strong>both</strong></dt>
+<dt>both</dt>
<dd>The UA presents a bidirectional resizing mechanism to
allow the user to adjust both the height and the width of the element.</dd>
-<dt><strong>horizontal</strong></dt>
+<dt>horizontal</dt>
<dd>The UA presents a unidirectional horizontal resizing mechanism to allow the user to adjust only the width of the element.</dd>
-<dt><strong>vertical</strong></dt>
+<dt>vertical</dt>
<dd>The UA presents a unidirectional vertical resizing mechanism to allow the user to adjust only the height of the element.</dd>
</dl>
@@ -1529,7 +1555,14 @@
<tr><th>Name:</th>
<td><dfn>text-overflow</dfn></td></tr>
<tr><th>Value:</th>
- <td>clip | ellipsis</td></tr>
+ <td> (
+clip |
+ellipsis |
+<a class="noxref" href="http://www.w3.org/TR/CSS21/syndata.html#value-def-string">
+ <span class="value-inst-string"><string></span></a>
+){1,2} |
+inherit
+</td></tr>
<tr><th>Initial:</th>
<td>clip</td></tr>
<tr><th>Applies to:</th>
@@ -1546,6 +1579,7 @@
<p>This property specifies rendering when inline content overflows
its block container element ("the block")
+in its inline progression direction
that has <span class="property">'overflow'</span>
other than <span class="value">'visible'</span>.
Text can overflow for example when it is prevented from wrapping
@@ -1560,24 +1594,43 @@
<dt><dfn title="text-overflow:ellipsis"><code>ellipsis</code></dfn></dt>
<dd>
Render an ellipsis character (U+2026)
-to represent clipped inline content.
-Hide characters and
-<a href="http://www.w3.org/TR/CSS21/visuren.html#inline-boxes">
-atomic inline-level elements</a>
-at the end edge of the line as necessary to fit the ellipsis.
-Place the ellipsis immediately adjacent to the end edge
-(per the block's 'direction')
-of the remaining inline content.
+to represent clipped inline content.
Implementations may substitute a more language/script-appropriate
ellipsis character,
or three dots "..." if the ellipsis character is unavailable.
</dd>
+ <dt><dfn title="text-overflow:<string>">
+ <var><string></var></dfn></dt>
+ <dd>
+Render the given string to represent clipped inline content.
+The given string is treated as an independent paragraph
+for bidi purposes.
+</dd>
</dl>
<p>
The term "character" is used in this property definition for better readability and means "grapheme cluster" [[!UAX29]] for implementation purposes.
</p>
+<p>
+If there is one value,
+it applies to both the left and right line edges.
+If there are two values,
+the first value applies to the right edge,
+and the second value applies to the left edge.
+</p>
+
+<p>
+For the ellipsis
+and string values,
+implementations must hide characters and
+<a href="http://www.w3.org/TR/CSS21/visuren.html#inline-boxes">
+atomic inline-level elements</a>
+at the applicable edge(s) of the line as necessary to fit the ellipsis/string.
+Place the ellipsis/string immediately adjacent
+to the applicable edge(s) of the remaining inline content.
+</p>
+
<h4 class="no-num no-toc">ellipsing details</h4>
<ul>
<li>
@@ -1594,7 +1647,7 @@
<li>
If there is insufficient space for the ellipsis, then clip the rendering of the ellipsis itself (on the same side that neutral characters on the line would have otherwise been clipped with the ''clip'' value).
</li>
-<li>When the user is interacting with content (e.g. editing, selecting, scrolling), the user agent may treat text-overflow ''ellipsis'' as ''clip''.
+<li>When the user is interacting with content (e.g. editing, selecting, scrolling), the user agent may treat text-overflow ''ellipsis'' or string values as ''clip''.
</li>
</ul>
@@ -1696,12 +1749,13 @@
<h4 class="no-num no-toc">ellipsis interaction with scrolling interfaces</h4>
<p>
-This section applies to elements with text-overflow:ellipsis
+This section applies to elements with text-overflow other than 'clip'
+(non-clip text-overflow)
and overflow:scroll.
</p>
<p>
-When an element with text-overflow:ellipsis has overflow of scroll
+When an element with non-clip text-overflow has overflow of scroll
in the inline progression dimension of the text, and the browser
provides a mechanism for scrolling (e.g. a scrollbar on the element,
or a touch interface to swipe-scroll, etc.), there are
@@ -1712,33 +1766,37 @@
When an element is scrolled (e.g. by the user or DOM manipulation),
more of the element's content is shown.
The value of text-overflow should not affect whether more of
-the element's content is shown or not. If text-overflow:ellipsis
+the element's content is shown or not. If a non-clip text-overflow
is set, then as more content is scrolled into view,
implementations should show whatever
additional content fits, only truncating content which would
-otherwise be clipped (or is necessary to make room for the ellipsis),
+otherwise be clipped
+(or is necessary to make room for the ellipsis/string),
until the element is scrolled far enough to
display the edge of the content
at which point that content should be displayed
-rather than an ellipsis.
+rather than an ellipsis/string.
</p>
<p>
As some content is scrolled into view, it is likely that
other content may scroll out of view on the other side.
If that content's block container element is the same
that's doing the scrolling,
-then implementations should render an ellipsis in place of
+then implementations should render an ellipsis/string in place of
the clipped content,
with the same details as described in the value definition above,
-except that the ellipsis is drawn in the start (rather than end) of
+except that the ellipsis/string is drawn in the start
+(rather than end) of
the block's direction (per the direction property).
</p>
<p>
-While the content is being scrolled, implementations may adjust their rendering of ellipses (e.g. align to the box edges rather than line edges).
+While the content is being scrolled, implementations may adjust their rendering of ellipses/strings
+(e.g. align to the box edges rather than line edges).
</p>
<p>
-If there is insufficient space for both start and end ellipses,
-then only the end ellipsis should be rendered.
+If there is insufficient space for both start
+and end ellipses/strings,
+then only the end ellipsis/string should be rendered.
</p>
@@ -1777,7 +1835,7 @@
<h5 class="no-num no-toc">image cursors</h5>
<dl>
-<dt><strong><uri></strong></dt>
+<dt><uri></dt>
<dd>The user agent retrieves the cursor from the resource
designated by the URI. If the user agent cannot handle
the first cursor of a list of cursors, it must attempt
@@ -1786,8 +1844,8 @@
at the end of the list. The optional <x> and <y> coordinates
identify the exact position within the image which is the pointer position (i.e., the hotspot).
</dd>
-<dt><strong><x></strong></dt>
-<dt><strong><y></strong></dt>
+<dt><x></dt>
+<dt><y></dt>
<dd>
Each is a <number>. The x-coordinate and y-coordinate of the position in the cursor's coordinate system (left/top relative) which represents the precise position that is being pointed to.
If the values are unspecified, then the intrinsic hotspot defined inside the image resource itself is used. If both the values are unspecific and the referenced cursor has no defined hotspot, the effect is as if a value of "0 0" were specified.
@@ -1796,34 +1854,34 @@
<h5 class="no-num no-toc">general purpose cursors</h5>
<dl>
-<dt style="cursor:auto"><strong>auto</strong></dt>
+<dt style="cursor:auto">auto</dt>
<dd>The UA determines the cursor to display based on the current
context.
</dd>
-<dt style="cursor:default"><strong>default</strong></dt>
+<dt style="cursor:default">default</dt>
<dd>The platform-dependent default cursor. Often rendered as an arrow.
</dd>
-<dt style="cursor:none"><strong>none</strong></dt>
+<dt style="cursor:none">none</dt>
<dd>No cursor is rendered for the element.</dd>
</dl>
<h5 class="no-num no-toc">links and status cursors</h5>
<dl>
-<dt style="cursor:context-menu"><strong>context-menu</strong></dt>
+<dt style="cursor:context-menu">context-menu</dt>
<dd>A context menu is available for the object under the cursor. Often rendered as an arrow with a small menu-like graphic next to it.</dd>
-<dt style="cursor:help"><strong>help</strong></dt>
+<dt style="cursor:help">help</dt>
<dd>Help is available for the object under the cursor. Often rendered
as a question mark or a balloon.
</dd>
-<dt style="cursor:pointer"><strong>pointer</strong></dt>
+<dt style="cursor:pointer">pointer</dt>
<dd>The cursor is a pointer that indicates a link.
</dd>
-<dt style="cursor:progress"><strong>progress</strong></dt>
+<dt style="cursor:progress">progress</dt>
<dd>A progress indicator. The program is performing some processing,
but is different from '<span class="value">wait</span>' in that the user may still interact
with the program. Often rendered as a spinning beach ball,
or an arrow with a watch or hourglass.</dd>
-<dt style="cursor:wait"><strong>wait</strong></dt>
+<dt style="cursor:wait">wait</dt>
<dd>Indicates that the program is busy and the user should
wait. Often rendered as a watch or hourglass.
</dd>
@@ -1831,35 +1889,35 @@
<h5 class="no-num no-toc">selection cursors</h5>
<dl>
-<dt style="cursor:cell"><strong>cell</strong></dt>
+<dt style="cursor:cell">cell</dt>
<dd>Indicates that a cell or set of cells may be selected. Often rendered as a thick plus-sign with a dot in the middle.</dd>
-<dt style="cursor:crosshair"><strong>crosshair</strong></dt>
+<dt style="cursor:crosshair">crosshair</dt>
<dd>A simple crosshair (e.g., short line segments resembling a "+" sign). Often used to indicate a two dimensional bitmap selection mode.
</dd>
-<dt style="cursor:text"><strong>text</strong></dt>
+<dt style="cursor:text">text</dt>
<dd>Indicates text that may be selected. Often rendered as a vertical I-beam.
User agents may automatically display a horizontal I-beam/cursor (e.g. same as the '<span class="value">vertical-text</span>' keyword) for vertical text, or for that matter, any angle of I-beam/cursor for text that is rendered at any particular angle.
</dd>
-<dt style="cursor:vertical-text"><strong>vertical-text</strong></dt>
+<dt style="cursor:vertical-text">vertical-text</dt>
<dd>Indicates vertical-text that may be selected. Often rendered as a horizontal I-beam.</dd>
</dl>
<h5 class="no-num no-toc">drag and drop cursors</h5>
<dl>
-<dt style="cursor:alias"><strong>alias</strong></dt>
+<dt style="cursor:alias">alias</dt>
<dd>Indicates an alias of/shortcut to something is to be created. Often rendered as an arrow with a small curved arrow next to it.</dd>
-<dt style="cursor:copy"><strong>copy</strong></dt>
+<dt style="cursor:copy">copy</dt>
<dd>Indicates something is to be copied. Often rendered as an arrow with a small plus sign next to it.</dd>
-<dt style="cursor:move"><strong>move</strong></dt>
+<dt style="cursor:move">move</dt>
<dd>Indicates something is to be moved.
</dd>
-<dt style="cursor:no-drop"><strong>no-drop</strong></dt>
+<dt style="cursor:no-drop">no-drop</dt>
<dd>
Indicates that the dragged item cannot be dropped at the current cursor location. Often rendered as a hand or pointer with a small circle with a line through it.
</dd>
-<dt style="cursor:not-allowed"><strong>not-allowed</strong></dt>
+<dt style="cursor:not-allowed">not-allowed</dt>
<dd>Indicates that the requested action will not be carried out.
Often rendered as a circle with a line through it.
</dd>
@@ -1867,7 +1925,7 @@
<h5 class="no-num no-toc">resizing and scrolling cursors</h5>
<dl>
-<dt><strong>
+<dt>
<span style="cursor:e-resize">e-resize</span>,
<span style="cursor:n-resize">n-resize</span>,
<span style="cursor:ne-resize">ne-resize</span>,
@@ -1876,26 +1934,25 @@
<span style="cursor:se-resize">se-resize</span>,
<span style="cursor:sw-resize">sw-resize</span>,
<span style="cursor:w-resize">w-resize</span>
-</strong>
</dt>
<dd>Indicates that some edge is to be moved. For example, the
'se-resize' cursor is used when the movement starts from the
south-east corner of the box.
</dd>
-<dt><strong>
+<dt>
<span style="cursor:ew-resize">ew-resize</span>,
<span style="cursor:ns-resize">ns-resize</span>,
<span style="cursor:nesw-resize">nesw-resize</span>,
<span style="cursor:nwse-resize">nwse-resize</span>
-</strong></dt>
+</dt>
<dd>Indicates a bidirectional resize cursor.</dd>
-<dt style="cursor:col-resize"><strong>col-resize</strong></dt>
+<dt style="cursor:col-resize">col-resize</dt>
<dd>Indicates that the item/column can be resized horizontally.
Often rendered as arrows pointing left and right with a vertical bar separating them.</dd>
-<dt style="cursor:row-resize"><strong>row-resize</strong></dt>
+<dt style="cursor:row-resize">row-resize</dt>
<dd>Indicates that the item/row can be resized vertically. Often rendered as arrows pointing up and down with a horizontal bar separating them.
</dd>
-<dt style="cursor:all-scroll"><strong>all-scroll</strong></dt>
+<dt style="cursor:all-scroll">all-scroll</dt>
<dd>Indicates that the something can be scrolled in any direction.
Often rendered as arrows pointing up, down, left, and right with a dot in the middle.
</dd>
@@ -1903,10 +1960,9 @@
<h5 class="no-num no-toc">zooming cursors</h5>
<dl>
-<dt><strong>
+<dt>
<span style="cursor:-moz-zoom-in; cursor:-o-zoom-in; cursor:zoom-in"> zoom-in</span>,
<span style="cursor:-moz-zoom-out; cursor:-o-zoom-out; cursor:zoom-out"> zoom-out</span>
-</strong>
</dt>
<dd>
Indicates that something can be zoomed (magnified) in or out, and
@@ -1965,13 +2021,13 @@
<p>Values have the following meanings (values defined as "SVG only" behave as '<span class="value">auto</span> ' in other XHTML and HTML content).</p>
<dl>
-<dt><strong>auto</strong></dt>
+<dt>auto</dt>
<dd>
In SVG content, behave as <span class="value">visiblePainted</span>. Otherwise, behave as <span class="value">all</span>.
</dd>
-<dt><strong>none</strong></dt>
+<dt>none</dt>
<dd>
The element is never the target of pointer events, although pointer events may target its descendant elements if those descendants have '<span class="property">pointer-events</span>' set to some other value, in which case pointer events will trigger event listeners on this element as appropriate on their way to/from the descendant during the event capture/bubble phases.
@@ -1984,49 +2040,49 @@
</dd>
-<dt><strong>all</strong></dt>
+<dt>all</dt>
<dd>
The element may be the target element for pointer events whenever the pointer is inside the CSS border edge of the element (or in SVG, over either the interior (i.e., fill) or the perimeter (i.e., stroke) of the element). The value of the '<span class="property">visibility</span>' property does not effect event processing.
</dd>
-<dt><strong>visible</strong></dt>
+<dt>visible</dt>
<dd>
The element may be the target of pointer events when the '<span class="property">visibility</span>' property is set to <span class="value">visible</span>, and the pointer is over the contents, background, or border of the element (or in SVG, over either the interior (i.e., fill) or the perimeter (i.e., stroke) of the element). In SVG, the values of the '<span class="property">fill</span>' and '<span class="property">stroke</span>' do not effect event processing.
</dd>
-<dt><strong>visiblePainted</strong></dt>
+<dt>visiblePainted</dt>
<dd>
SVG only. The element can only be the target of a pointer event when the '<span class="property">visibility</span>' property is set to <span class="value">visible</span> and when the pointer is over the interior (i.e., 'fill') of the element and the '<span class="property">fill</span>' property is set to a value other than <span class="value">none</span>, or when the pointer is over the perimeter (i.e., 'stroke') of the element and the '<span class="property">stroke</span>' property is set to a value other than <span class="value">none</span>.
</dd>
-<dt><strong>visibleFill</strong></dt>
+<dt>visibleFill</dt>
<dd>
SVG only. The element can only be the target of a pointer event when the '<span class="property">visibility</span>' property is set to <span class="value">visible</span> and when the pointer is over the interior (i.e., fill) of the element. The value of the '<span class="property">fill</span>' property does not effect event processing.
</dd>
-<dt><strong>visibleStroke</strong></dt>
+<dt>visibleStroke</dt>
<dd>
SVG only. The element can only be the target of a pointer event when the '<span class="property">visibility</span>' property is set to <span class="value">visible</span> and when the pointer is over the perimeter (i.e., stroke) of the element. The value of the '<span class="property">stroke</span>' property does not effect event processing.
</dd>
-<dt><strong>painted</strong></dt>
+<dt>painted</dt>
<dd>
SVG only. The element can only be the target of a pointer event when the pointer is over the interior (i.e., 'fill') of the element and the '<span class="property">fill</span>' property is set to a value other than none, or when the mouse cursor is over the perimeter (i.e., 'stroke') of the element and the stroke property is set to a value other than <span class="value">none</span>. The value of the '<span class="property">visibility</span>' property does not effect event processing.
</dd>
-<dt><strong>fill</strong></dt>
+<dt>fill</dt>
<dd>
SVG only. The element can only be the target of a pointer event when the pointer is over the interior (i.e., fill) of the element. The values of the '<span class="property">fill</span>' and '<span class="property">visibility</span>' properties do not effect event processing.
</dd>
-<dt><strong>stroke</strong></dt>
+<dt>stroke</dt>
<dd>
SVG only. The element can only be the target of a pointer event when the pointer is over the perimeter (i.e., stroke) of the element. The values of the '<span class="property">stroke</span>' and '<span class="property">visibility</span>' properties do not effect event processing.
</dd>
@@ -2127,7 +2183,7 @@
</div>
<div class="example">
-<h4 class="no-num no-toc">Example: positioned buttons</h4>
+<h5 class="no-num no-toc">Example: positioned buttons</h5>
<p>Here is an example of buttons positioned in a diamond shape whose navigation order and directional focus navigation is set in such a way to navigate the focus clockwise (or counter-clockwise) around the diamond shape when the user chooses to navigate sequentially or directionally.</p>
<pre><code class="css">
button { position:absolute }
@@ -2163,6 +2219,73 @@
<p>Whatever markup sequence the buttons may have (which is not specified in this example) is irrelevant in this case because they are positioned, and yet, it is still important to ensure focus navigation behaviors which relate reasonably to the specified layout.</p>
</div>
+<h4 id="input-method-editor">Input method editor: the <span class="property">'ime-mode'</span> property</h4>
+
+<table class="propdef"><tbody>
+<tr><th>Name: </th><td><dfn>ime-mode</dfn></td></tr>
+<tr><th>Value: </th><td>auto | normal | active | inactive | disabled | inherit</td></tr>
+<tr><th>Initial:</th><td>auto</td></tr>
+<tr><th>Applies to:</th><td>text fields</td></tr>
+<tr><th>Inherited:</th><td>no</td></tr>
+<tr><th>Percentages:</th><td>N/A</td></tr>
+<tr><th>Media:</th><td>interactive</td></tr>
+<tr><th>Computed value:</th><td><id> as specified</td></tr>
+</tbody></table>
+
+<p>
+The 'ime-mode' CSS property controls
+the state of the input method editor for text fields.
+</p>
+
+<dl>
+<dt>auto</dt>
+<dd>
+No change is made to the current input method editor state. This is the default.
+</dd>
+<dt>normal</dt>
+<dd>
+The IME state should be normal; this value can be used in a user style sheet to override the page setting.
+</dd>
+<dt>active</dt>
+<dd>
+The input method editor is initially active; text entry is performed using it unless the user specifically dismisses it.
+</dd>
+<dt>inactive</dt>
+<dd>
+The input method editor is initially inactive, but the user may activate it if they wish.
+</dd>
+<dt>disabled</dt>
+<dd>
+The input method editor is disabled and may not be activated by the user.
+</dd>
+</dl>
+
+<div class="example">
+<h5 class="no-num no-toc">Example: disabling input method support</h5>
+<pre><code class="html"><input type="text" name="name" value="initial value" style="ime-mode: disabled">
+</code></pre>
+<p>
+This example disables input method support for a field;
+this might be necessary for fields that enter data
+into a database that doesn't support extended character sets,
+for example.
+</p>
+</div>
+
+<div class="example">
+<h5 class="no-num no-toc">Example: user preference</h5>
+<pre><code class="css">input[type=password] {
+ ime-mode: auto !important;
+}
+</code></pre>
+<p>
+This example CSS may be placed into a user style sheet file to force password input fields to behave in a default manner.
+</p>
+</div>
+
+<p class="note">
+Note: In general, it's not appropriate for a public web site to manipulate the IME mode setting. This property should be used for web applications and the like. Authors should not rely on disabling IME to prevent extended characters from passing through a form. Even with IME disabled, users can still paste extended characters into a form's fields.
+</p>
<hr title="Separator from footer">
@@ -2212,10 +2335,16 @@
<h3 class="no-num" id="changes-list">List of specific changes</h3>
<ul>
+<li>'<span class="property">box-sizing</span>' property. Added 'padding-box' value.</li>
+
<li>'<span class="property">cursor</span>' property. Added detail about applying to the border, padding, and content areas of the element.</li>
+<li>'<span class="property">ime-mode</span>' property - new!</li>
+
<li>'<span class="property">pointer-events</span>' property - new!</li>
+<li>'<span class="property">text-overflow</span>' property - new!</li>
+
</ul>
Received on Friday, 8 July 2011 02:39:46 UTC