Skip to content

Commit b48dc45

Browse files
ianbjacobsianbjacobs
committed
[css2] Added Chris Wilson focus-outline proposal
--HG-- extra : convert_revision : svn%3A73dc7c4b-06e6-40f3-b4f7-9ed1dbc14bfc/trunk%401215
1 parent f285637 commit b48dc45

1 file changed

Lines changed: 96 additions & 3 deletions

File tree

‎css2/ui.src‎

Lines changed: 96 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
22
<html lang="en">
3-
<!-- $Id: ui.src,v 2.6 1998-03-15 22:57:59 bbos Exp $ -->
3+
<!-- $Id: ui.src,v 2.7 1998-03-16 14:38:39 ijacobs Exp $ -->
44
<HEAD>
55
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
66
<TITLE>User interface</TITLE>
@@ -50,7 +50,7 @@ context.
5050
<dd>Help is available for the object under the cursor. Often rendered
5151
as a question mark or a balloon.
5252

53-
<dt><strong><span class="value-inst-uri">&lt;uri&gt;</span></strong>
53+
<dt><span class="value-inst-uri"><strong>&lt;uri&gt;</strong></span>
5454

5555
<dd>The user agent retrieves the cursor from the resource
5656
designated by the URI. If the user agent cannot handle
@@ -66,7 +66,100 @@ at the end of the list.
6666
</PRE>
6767
</div>
6868

69-
<!-- Animated cursors? -IJ -->
69+
<H2><a name="focus-outline">Representing the focus</a></H2>
70+
71+
<P>Most computer-human interfaces have the concept of user <span
72+
class="index-def" title="focus"><dfn>focus</dfn></span>, the subject
73+
of user interaction in a document (e.g., for entering text, selecting
74+
a button, etc.). User agents supporting the <a
75+
href="media.html#interactive-media-group">interactive media group</a>
76+
must keep track of where the focus lies and must also represent
77+
the focus. Visual user agents often represent the focus by outlining
78+
the relevant control or element.
79+
80+
<P>Focus outlines are functionally distinct from normal CSS borders
81+
for several reasons:</p>
82+
83+
<ul>
84+
85+
<li>The focus outline does not change the layout of the page - it is
86+
drawn "over" the element, but do not change the position or layout
87+
of a box.
88+
89+
<li>The focus outline may be drawn around regular CSS borders - e.g., a
90+
three-dimensional button (a common user-interface element) may
91+
be seen as a text element with an outset border, and when the element has
92+
the focus, an additional border is drawn around the outset border.
93+
94+
<li>The focus outline does not have to be rectangular. Most of
95+
today's user agents are capable of showing the focus around image map
96+
areas, which may not be rectangular.
97+
</ul>
98+
99+
<P>On CSS boxes, focus outlines are drawn directly outside the <a
100+
href="visuren.html#border-edge">border edge</a>. If an inline element
101+
has a focus border, the border may be drawn as a series of boxes when
102+
line breaking occurs. The boxes are closed on all sides.
103+
104+
<P>The following properties control the presentation of the focus
105+
outline. They may only be used in conjunction with the <a
106+
href="selector.html#dynamic-pseudo-classes">:focus</a> pseudo-class.
107+
108+
<!-- #include src=properties/focus-outline-width.srb -->
109+
110+
<P>This property sets the width of the focus outline. The actual
111+
widths of 'thin', 'medium', and 'thick' may vary between user agents,
112+
but the values must increase in width from 'thin' to 'medium' to
113+
'thick'. Users may also specify an explicit <span class="index-inst"
114+
title="&lt;length&gt;"><span
115+
class="value-inst-length">&lt;length&gt;</span></span>.
116+
117+
<div class="note"><P>
118+
<em><strong>Note.</strong>
119+
Since the focus outline does not affect formatting (i.e., no
120+
space is left for it in the box model), it may well overlap
121+
other elements on the page.
122+
</em>
123+
</div>
124+
125+
<!-- #include src=properties/focus-outline-style.srb -->
126+
127+
<P>This property sets the style of the focus outline. Values have the
128+
same meaning as for <span class="index-inst"
129+
title="&lt;border-style&gt;"><span
130+
class="value-inst-border-style">&lt;border-style&gt;</span></span>
131+
except that 'hidden' is not a legal outline style.
132+
133+
<!-- #include src=properties/focus-outline-color.srb -->
134+
135+
<P>This property sets the color of the focus outline. Values may
136+
either be a <span class="index-inst" title="&lt;color&gt;"><span
137+
class="value-inst-color">&lt;color&gt;</span></span> or 'invert',
138+
which is expected to perform a color inversion on the pixels on the
139+
screen. This is a common technique ensuring that the focus outline
140+
remains visible, regardless of background color.
141+
142+
<!-- #include src=properties/focus-outline.srb -->
143+
144+
<P>This is a shorthand property for setting the <span
145+
class="propinst-focus-outline-width">'focus-outline-width'</span>, <span
146+
class="propinst-focus-outline-style">'focus-outline-style'</span>, and <span
147+
class="propinst-focus-outline-color">'focus-outline-color'</span> at the same
148+
place in the style sheet.
149+
150+
<P> For a definition of allowed and initial values, see the previously
151+
defined properties. A sub-property for which no value has been
152+
specified takes that property's initial value, <em>not</em> the
153+
inherited value.
154+
155+
<div class="example"><P>
156+
The following rule sets three characteristics of the focus
157+
outline to follow behavior of some popular user agents:</p>
158+
159+
<PRE>
160+
:focus { thin dotted invert }
161+
</PRE>
162+
</div>
70163

71164
<H2><a name="system-colors">User preferences for colors</a></H2>
72165

0 commit comments

Comments
 (0)