Skip to content

Commit b11eb49

Browse files
ianbjacobsianbjacobs
committed
[css2] Started to make outline section more general (with example outside of :focus). Not very smooth yet. Needs more work.
--HG-- extra : convert_revision : svn%3A73dc7c4b-06e6-40f3-b4f7-9ed1dbc14bfc/trunk%401308
1 parent 6afce4c commit b11eb49

1 file changed

Lines changed: 51 additions & 25 deletions

File tree

‎css2/ui.src‎

Lines changed: 51 additions & 25 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.9 1998-03-17 08:04:52 ijacobs Exp $ -->
3+
<!-- $Id: ui.src,v 2.10 1998-03-21 00:41:26 ijacobs Exp $ -->
44
<HEAD>
55
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
66
<TITLE>User interface</TITLE>
@@ -169,38 +169,29 @@ class="propinst-font">'font'</span> property for details.
169169
<h2><a name="dynamic-outlines">Dynamic outlines:</a> the <span
170170
class="index-def" title="outline">'outline'</span> property</h2>
171171

172-
<p>[This section is tentative, awaiting decision on 'outline' by WG.]
172+
<P>At times, style sheet authors may want to create outlines around
173+
visual objects such as buttons, active form fields, image maps, etc.,
174+
to make them stand out. CSS2 outlines differ from <a
175+
href="box.html#border-properties">borders</a> in the following
176+
ways:</p>
173177

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.
178+
<ol>
179+
<li>Displaying or suppressing outlines does not cause reflow.
180+
<li>Outlines may be non-rectangular.
181+
</ol>
182182

183-
<div class="example">
184-
<p>For example, to draw a thick black line around an element when it
185-
has the focus, and a thick red line when it is active, the following
186-
rules can be used:
187-
188-
<pre>
189-
:focus {outline: thick solid black}
190-
:active {outline: thick solid red}
191-
</pre>
192-
</div>
183+
<P>The outline properties control the style of these dynamic outlines.
193184

194185
<!-- #include src=properties/outline.srb -->
195186
<!-- #include src=properties/outline-width.srb -->
196187
<!-- #include src=properties/outline-style.srb -->
197188
<!-- #include src=properties/outline-color.srb -->
198189

199-
<p>The outline created with the 'outline' properties is drawn "over"
200-
the element, i.e., the outline is always on top, and doesn't influence
201-
the position or size of the element, or of any other elements.
190+
<p>The outline created with the outline properties is drawn "over" a
191+
box, i.e., the outline is always on top, and doesn't influence the
192+
position or size of the box, or of any other boxes.
202193

203-
<p>The outline is drawn just outside the <a
194+
<p>The outline is drawn starting just outside the <a
204195
href="box.html#border-edge">border edge</a>.
205196

206197
<p>Outlines may be non-rectangular. For example, if the element is
@@ -237,7 +228,7 @@ contrast to borders, there is no "outline-top" or "outline-left"
237228
property.
238229

239230
<p>This specification does not define how multiple overlapping
240-
outlines are drawn, or how outlines are drawn of elements that are
231+
outlines are drawn, or how outlines are drawn for boxes that are
241232
partially obscured behind other elements.
242233

243234
<div class="note"><P>
@@ -248,6 +239,41 @@ other elements on the page.
248239
</em>
249240
</div>
250241

242+
<div class="example"><P>
243+
Here's an example of drawing a
244+
a thick outline around a BUTTON element:
245+
246+
<PRE>
247+
BUTTON { outline-width : thick }
248+
</PRE>
249+
250+
<P>Scripts may be used to dynamically change the width
251+
of the outline, without provoking reflow.
252+
</div>
253+
254+
<H3>Outlines and the focus</h3>
255+
256+
<P>Graphical user interfaces may use outlines to tell the user which
257+
element on the page has the <span class="index-def"
258+
title="focus"><dfn>focus</dfn></span>. The focus is the subject of user
259+
interaction in a document (e.g., for entering text, selecting a
260+
button, etc.). User agents supporting the <a
261+
href="media.html#interactive-media-group">interactive media group</a>
262+
must keep track of where the focus lies and must also represent the
263+
focus. This may be done by using dynamic outlines in conjunction
264+
with the :focus pseudo-class.
265+
266+
<div class="example">
267+
<p>For example, to draw a thick black line around an element when it
268+
has the focus, and a thick red line when it is active, the following
269+
rules can be used:
270+
271+
<pre>
272+
:focus {outline: thick solid black}
273+
:active {outline: thick solid red}
274+
</pre>
275+
</div>
276+
251277
<H2>Magnification</H2>
252278

253279
<P>The CSS working group considers that the magnification of a

0 commit comments

Comments
 (0)