Skip to content

Commit

Permalink
[css-ui-4] Editorial: move text around
Browse files Browse the repository at this point in the history 
This puts the general discussion of outlines under the definition of the
outline shorthand property, and discussion of the effects of the
longhands under the specific longhands.
  • Loading branch information
@w3cgruntbot
w3cgruntbot committed Aug 16, 2023
1 parent 17e16ba commit c24c562
Showing 1 changed file with 76 additions and 78 deletions.
154 changes: 76 additions & 78 deletions css-ui-4/Overview.bs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -264,47 +264,6 @@ or if ''outline-style/auto'' is specified together with an <<'outline-width'>> v
but without an explicit <<'outline-style'>> or <<'outline-color'>> value,
both 'outline-style' and 'outline-color' are set to ''outine-style/auto''.

<h3 id="outline-width">Outline Thickness: the 'outline-width' property</h3>

<pre class="propdef">
Name: outline-width
Value: <<line-width>>
Initial: medium
Applies to: all elements
Inherited: no
Percentages: N/A
Computed value: absolute length, [=snapped as a border width=]; ''0'' if the outline style is ''border-style/none''.
Animation type: by computed value
</pre>


<h3 id="outline-style">Outline Patterns: the 'outline-style' property</h3>

<pre class="propdef">
Name: outline-style
Value: auto | <<outline-line-style>>
Initial: none
Applies to: all elements
Inherited: no
Percentages: N/A
Computed value: specified keyword
Animation type: by computed value
</pre>


<h3 id="outline-color">Outline Colors: the 'outline-color' property</h3>

<pre class="propdef">
Name: outline-color
Value: auto | [ <<color>> | <<image-1D>> ] | invert
Initial: auto
Applies to: all elements
Inherited: no
Percentages: N/A
Computed value: see below
Animation type: by computed value
</pre>

The outline created with the outline properties is drawn "over" a box,
i.e., the outline is always on top
and doesn't influence the position or size of the box,
Expand Down Expand Up @@ -332,10 +291,71 @@ for conveying the concept of focus to the user.

Note: This specification does not define the exact position or shape of the outline, but it is typically drawn immediately outside the border box.

Note: The outline is the same on all sides.
In contrast to borders,
there are no ''outline-top'', ''outline-left'', etc. properties.

This specification does not define how multiple overlapping outlines are drawn
or how outlines are drawn for boxes that are partially obscured behind other elements.

<div class="example">
Here's an example of drawing a thick outline around a BUTTON element:
<pre><code class="lang-css">
button { outline: thick solid }
</code></pre>
</div>

Graphical user interfaces may use outlines around elements
to tell the user which element on the page has the focus.
These outlines are shown in addition to any borders,
and switching outlines on and off should not cause the document to reflow.
The focus is the subject of user interaction in a document
(e.g. for entering text or selecting a button).

<div class="example">
For example, to draw a thick black line around an element when it has the focus,
and a thick red line when it is active,
the following rules can be used:
<pre><code class="lang-css">
:focus { outline: thick solid black }
:active { outline: thick solid red }
</code></pre>
</div>

Note: Since the outline does not affect formatting
(i.e., no space is left for it in the box model),
it may well overlap other elements on the page.

<h3 id="outline-width">Outline Thickness: the 'outline-width' property</h3>

<pre class="propdef">
Name: outline-width
Value: <<line-width>>
Initial: medium
Applies to: all elements
Inherited: no
Percentages: N/A
Computed value: absolute length, [=snapped as a border width=]; ''0'' if the outline style is ''border-style/none''.
Animation type: by computed value
</pre>

The 'outline-width' property accepts
the same values as 'border-width'
([[css-backgrounds-3#border-width]]).
([[css-backgrounds-3#border-width]]),
with the same meaning.

<h3 id="outline-style">Outline Patterns: the 'outline-style' property</h3>

<pre class="propdef">
Name: outline-style
Value: auto | <<outline-line-style>>
Initial: none
Applies to: all elements
Inherited: no
Percentages: N/A
Computed value: specified keyword
Animation type: by computed value
</pre>

<dfn><<outline-line-style>></dfn> accepts
the same values as <<line-style>>
Expand All @@ -346,6 +366,7 @@ except that
In addition,
the 'outline-style' property
accepts the value ''outline-style/auto''.

The ''outline-style/auto'' value permits the user agent
to render a custom outline style,
typically a style which is either a user interface default for the platform,
Expand All @@ -360,6 +381,19 @@ but this specification does not define how the rendering is impacted (if at all)
User agents may treat ''outline-style/auto'' as
''outline-style/solid''.

<h3 id="outline-color">Outline Colors: the 'outline-color' property</h3>

<pre class="propdef">
Name: outline-color
Value: auto | [ <<color>> | <<image-1D>> ] | invert
Initial: auto
Applies to: all elements
Inherited: no
Percentages: N/A
Computed value: see below
Animation type: by computed value
</pre>

The 'outline-color' property
accepts all values of <'border-color'>,
as well as the following keywords:
Expand Down Expand Up @@ -396,42 +430,6 @@ The computed value for ''outline-color/invert'' is ''outline-color/invert''.
For <<color>> values, see [[css-color-4#resolving-color-values]] in [[!CSS-COLOR-4]].
For <<image-1D>> values, see [[css-images-4#stripes]] in [[!CSS-IMAGES-4]].

Note: The outline is the same on all sides.
In contrast to borders,
there are no ''outline-top'', ''outline-left'', etc. properties.

This specification does not define how multiple overlapping outlines are drawn
or how outlines are drawn for boxes that are partially obscured behind other elements.

<div class="example">
Here's an example of drawing a thick outline around a BUTTON element:
<pre><code class="lang-css">
button { outline: thick solid }
</code></pre>
</div>

Graphical user interfaces may use outlines around elements
to tell the user which element on the page has the focus.
These outlines are shown in addition to any borders,
and switching outlines on and off should not cause the document to reflow.
The focus is the subject of user interaction in a document
(e.g. for entering text or selecting a button).

<div class="example">
For example, to draw a thick black line around an element when it has the focus,
and a thick red line when it is active,
the following rules can be used:
<pre><code class="lang-css">
:focus { outline: thick solid black }
:active { outline: thick solid red }
</code></pre>
</div>

Note: Since the outline does not affect formatting
(i.e., no space is left for it in the box model),
it may well overlap other elements on the page.


<h3 id="outline-offset">Offsetting the Outline: the 'outline-offset' property</h3>

By default, the outline is drawn starting just outside the <a>border edge</a>.
Expand Down

0 comments on commit c24c562

Please sign in to comment.