Skip to content

Commit

Permalink
[css-color-4] Move alpha value definition up to opacity property, cla…
Browse files Browse the repository at this point in the history
…rify opacity specified values are not clamped. #8311
  • Loading branch information
svgeesus committed Nov 28, 2023
1 parent b515ba7 commit cc2ea29
Showing 1 changed file with 22 additions and 17 deletions.
39 changes: 22 additions & 17 deletions css-color-4/Overview.bs
Original file line number Diff line number Diff line change
Expand Up @@ -633,18 +633,34 @@ Transparency: the 'opacity' property</h3>
</wpt>

<dl>
<dt><<alpha-value>>
<dt><dfn dfn-for="opacity"><<alpha-value>></dfn>
<dd>
The opacity to be applied to the element.
It is interpreted identically to its definition in ''rgb()'',
except that the resulting opacity is applied to the entire element,
The resulting opacity is applied to the entire element,
rather than a particular color.

Opacity values outside the range [0,1] are not invalid,
and a preserved in specified values,
but are clamped to the range [0, 1]
in computed values.
</dl>

<wpt>
inline-opacity-float-child.html
</wpt>

Opacity in CSS is typically represented using the <<alpha-value>> syntax,
for example in the 'opacity' property
or as the [=alpha component=] in a [=color function=].
Represented as a <<number>>, the useful range of the value is ''0''
(representing full transparency)
to ''1''
(representing full opacity).
It can also be written as a <<percentage>>,
which [=computed value|computes to=]
the equivalent <<number>>
(''0%'' to ''0'', ''100%'' to ''1'').

The 'opacity' property applies the specified opacity to the element <em>as a whole</em>,
including its contents,
rather than applying it to each descendant individually.
Expand Down Expand Up @@ -962,25 +978,14 @@ Legacy (Comma-separated) Color Function Syntax</h4>
the <a>legacy color syntax</a> is invalid.

<h3 id="alpha-syntax">
Representing Transparency: the <<alpha-value>> syntax</h3>
Representing Transparency in Colors: the <<alpha-value>> syntax</h3>

<pre class="prod">
<dfn>&lt;alpha-value></dfn> = <<number>> | <<percentage>>
<dfn dfn-for="color">&lt;alpha-value></dfn> = <<number>> | <<percentage>>
</pre>

Opacity in CSS is typically represented using the <<alpha-value>> syntax,
for example in the 'opacity' property
or as the [=alpha component=] in a [=color function=].
Represented as a <<number>>, the useful range of the value is ''0''
(representing full transparency)
to ''1''
(representing full opacity).
It can also be written as a <<percentage>>,
which [=computed value|computes to=]
the equivalent <<number>>
(''0%'' to ''0'', ''100%'' to ''1'').
Unless otherwise specified,
an <<alpha-value>> component defaults to ''100%'' when omitted.
an <<alpha-value>> component of a color defaults to ''100%'' when omitted.
Values outside the range [0,1] are not invalid,
but are clamped to that range at parsed-value time.

Expand Down

0 comments on commit cc2ea29

Please sign in to comment.