Skip to content

Commit 07a9792

Browse files
ianbjacobsianbjacobs
committed
[css2] Bert and Ian had both added focus outlines. Merged them
--HG-- extra : convert_revision : svn%3A73dc7c4b-06e6-40f3-b4f7-9ed1dbc14bfc/trunk%401239
1 parent 1cba172 commit 07a9792

1 file changed

Lines changed: 43 additions & 123 deletions

File tree

‎css2/ui.src‎

Lines changed: 43 additions & 123 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,13 @@
11
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
22
<html lang="en">
3-
<!-- $Id: ui.src,v 2.7 1998-03-16 14:38:39 ijacobs Exp $ -->
3+
<!-- $Id: ui.src,v 2.8 1998-03-17 01:19:15 ijacobs Exp $ -->
44
<HEAD>
55
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
66
<TITLE>User interface</TITLE>
77
</HEAD>
88
<BODY>
99
<H1 align="center">User interface</H1>
1010

11-
<!-- Not decided yet: Add 'focus-outline' (compound property):
12-
<color>||<border-style>||<length>. ChrisW. 26/2/98 -->
13-
1411
<H2><a name="cursor-props">Cursors:</a> the <span
1512
class="propinst-cursor">'cursor'</span> property</H2>
1613

@@ -66,101 +63,6 @@ at the end of the list.
6663
</PRE>
6764
</div>
6865

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>
163-
16466
<H2><a name="system-colors">User preferences for colors</a></H2>
16567

16668
<p>In addition to being able to assign pre-defined color values to
@@ -264,21 +166,19 @@ write the following:
264166
a user's system resources. Please consult the <span
265167
class="propinst-font">'font'</span> property for details.
266168

267-
<h2>Dynamic outlines: the <span class="index-def"
268-
title="outline">'outline'</span> property</h2>
169+
<h2><a name="dynamic-outlines">Dynamic outlines:</a> the <span
170+
class="index-def" title="outline">'outline'</span> property</h2>
269171

270172
<p>[This section is tentative, awaiting decision on 'outline' by WG.]
271173

272-
<!-- include src=properties/outline.srb -->
273-
<!-- include src=properties/outline-width.srb -->
274-
<!-- include src=properties/outline-style.srb -->
275-
<!-- include src=properties/outline-color.srb -->
276-
277-
<p>Interactive UAs often draw attention to an element by drawing an
278-
outline around it. Most often this is done to indicate that an element
279-
has the focus (see the <a
280-
href="selector.html#dynamic-pseudo-classes">':focus'</a>
281-
pseudo-class).
174+
<P>Most computer-human interfaces have the concept of user <span
175+
class="index-def" title="focus"><dfn>focus</dfn></span>, the subject
176+
of user interaction in a document (e.g., for entering text, selecting
177+
a button, etc.). User agents supporting the <a
178+
href="media.html#interactive-media-group">interactive media group</a>
179+
must keep track of where the focus lies and must also represent
180+
the focus. Visual user agents often represent the focus by outlining
181+
the relevant control or element.
282182

283183
<div class="example">
284184
<p>For example, to draw a thick black line around an element when it
@@ -291,8 +191,13 @@ rules can be used:
291191
</pre>
292192
</div>
293193

194+
<!-- #include src=properties/outline.srb -->
195+
<!-- #include src=properties/outline-width.srb -->
196+
<!-- #include src=properties/outline-style.srb -->
197+
<!-- #include src=properties/outline-color.srb -->
198+
294199
<p>The outline created with the 'outline' properties is drawn "over"
295-
the element, i.e. the outline is always on top, and doesn't influence
200+
the element, i.e., the outline is always on top, and doesn't influence
296201
the position or size of the element, or of any other elements.
297202

298203
<p>The outline is drawn just outside the <a
@@ -304,29 +209,44 @@ encloses all the element's boxes. In contrast to <a
304209
href="visudet.html#border-properties">borders</a>, the outline is not
305210
open at the line box's end or start, but is always fully connected.
306211

307-
<p>'Outline-width' accepts the same values as <span
308-
class="propinst-border-width">'border-width'</span>. 'Outine-style'
309-
accepts the same values as <span
310-
class="propinst-border-style">'border-style'</span>.
212+
<p>The <span class="propinst-outline-width">'outline-width'</span>
213+
property accepts the same values as <span
214+
class="propinst-border-width">'border-width'</span>.
215+
216+
<P>The <span class="propinst-outline-style">'outline-style'</span>
217+
property accepts the same values as <span
218+
class="propinst-border-style">'border-style'</span>,
219+
except that 'hidden' is not a legal outline style.
311220

312-
<p>'Outline-color' accepts all colors, as well as the keyword <span
313-
class="index-def" title="invert"><a class="value-def"
221+
<p>The <span class="propinst-outline-color">'outline-color'</span>
222+
accepts all colors, as well as the keyword <span class="index-def"
223+
title="invert"><a class="value-def"
314224
name="value-def-invert">'invert'</a></span>. 'Invert' is expected to
315225
perform a color inversion on the pixels on the screen. This is a
316226
common trick to ensure the focus border is visible, regardless of
317227
color background.
318228

319-
<p>'Outline' is a shorthand property, and sets all three of
320-
'outline-style', 'outline-width', and 'outline-color'.
229+
<p>The <span class="propinst-outline">'outline'</span> property is a
230+
shorthand property, and sets all three of <span
231+
class="propinst-outline-style">'outline-style'</span>, <span
232+
class="propinst-outline-width">'outline-width'</span>, and <span
233+
class="propinst-outline-color">'outline-color'</span>.
321234

322235
<p class="note">Note that the outline is the same on all sides. In
323236
contrast to borders, there is no "outline-top" or "outline-left"
324237
property.
325238

326-
<p>It is undefined how multiple overlapping outlines are drawn, or how
327-
outlines are drawn of elements that are partially obscured behind
328-
other elements.
239+
<p>This specification does not define how multiple overlapping
240+
outlines are drawn, or how outlines are drawn of elements that are
241+
partially obscured behind other elements.
329242

243+
<div class="note"><P>
244+
<em><strong>Note.</strong>
245+
Since the focus outline does not affect formatting (i.e., no
246+
space is left for it in the box model), it may well overlap
247+
other elements on the page.
248+
</em>
249+
</div>
330250

331251
<H2>Magnification</H2>
332252

0 commit comments

Comments
 (0)