Skip to content

Commit

Permalink
[css-color] Make the alpha optional in the *a() color functions too, …
Browse files Browse the repository at this point in the history 
…per resolution. Simplify grammar. Add note about aliasing.
  • Loading branch information
@tabatkins
tabatkins committed Jul 13, 2016
1 parent bf5a90d commit 156c0aa
Showing 1 changed file with 13 additions and 6 deletions.
19 changes: 13 additions & 6 deletions css-color/Overview.bs
View file
Expand Up @@ -171,8 +171,8 @@ The RGB functions: ''rgb()'' and ''rgba()''</h3>
Its syntax is:

<pre class='prod'>
<dfn>rgb()</dfn> = rgb( <<rgb-component>>#{3} [, <<alpha-value>> ]? )
<dfn>rgba()</dfn> = rgba( <<rgb-component>>#{3} , <<alpha-value>> )
<dfn>rgb()</dfn> = rgb( <<rgb-component>>#{3} , <<alpha-value>>? )
<dfn>rgba()</dfn> = rgba( <<rgb-component>>#{3} , <<alpha-value>>? )

This comment has been minimized.

Sign in to view

Copy link
@Rplus

Rplus Jul 15, 2016

By reference this article, might the syntax is <dfn>rgb()</dfn> = rgb( <<rgb-component>>#{3} [, <<alpha-value>> ]? ) ?
https://www.smashingmagazine.com/2016/05/understanding-the-css-property-value-syntax/#1-the-symbol

This comment has been minimized.

Sign in to view

Copy link
@SebastianZ

SebastianZ Jul 15, 2016

Contributor

The article you refer to is incomplete in this regard. The syntax in the change is correct according to the CSS Values and Units Module. It says:

a comma specified in the grammar must be omitted if:

  • all items preceding the comma have been omitted
  • all items following the comma have been omitted
  • multiple commas would be adjacent (ignoring whitespace/comments), due to the items between the commas being omitted.

So, the comma doesn't need to be enclosed in square brackets, it's automatically omitted when there is no alpha value.

Sebastian

This comment has been minimized.

Sign in to view

Copy link
@Rplus

Rplus Jul 15, 2016

Thanks for your reply！ I get it!
<dfn>&lt;rgb-component></dfn> = <<number>> | <<percentage>>
<dfn>&lt;alpha-value></dfn> = <<number>> | <<percentage>>
</pre>
Expand All @@ -197,7 +197,6 @@ The RGB functions: ''rgb()'' and ''rgba()''</h3>

Issue: The transfer function is undefined outside the range 0% to 100%.


The final argument, the <<alpha-value>>, specifies the alpha of the color.
If given as a <<number>>, the useful range of the value is ''0''
(representing a fully transparent color)
Expand All @@ -209,6 +208,10 @@ The RGB functions: ''rgb()'' and ''rgba()''</h3>
but are clamped to the ranges defined here at computed-value time.
If omitted, it defaults to ''100%''.

Note: For legacy reasons, the ''rgb()'' function and ''rgba()'' functions both exist,
but are aliases of each other.
Both of them allow specifying an RGB color with an optional alpha value.

<h3 id='hex-notation'>
The RGB hexadecimal notations: ''#RRGGBB''</h3>

Expand Down Expand Up @@ -709,8 +712,8 @@ HSL Colors: ''hsl()'' and ''hsla()'' functions</h2>
The syntax of the ''hsl()'' function is:

<pre class='prod'>
<dfn>hsl()</dfn> = hsl( <<hue>>, <<percentage>>, <<percentage>> [, <<alpha-value>> ]? )
<dfn>hsla()</dfn> = hsla( <<hue>>, <<percentage>>, <<percentage>>, <<alpha-value>> )
<dfn>hsl()</dfn> = hsl( <<hue>>, <<percentage>>, <<percentage>>, <<alpha-value>>? )
<dfn>hsla()</dfn> = hsla( <<hue>>, <<percentage>>, <<percentage>>, <<alpha-value>>? )
<dfn>&lt;hue></dfn> = <<number>> | <<angle>>
</pre>

Expand Down Expand Up @@ -743,7 +746,7 @@ HSL Colors: ''hsl()'' and ''hsla()'' functions</h2>
but this specification does not define how to do so.

The final argument specifies the alpha channel of the color.
It's interpreted identically to the fourth argument of the ''rgba()'' function.
It's interpreted identically to the fourth argument of the ''rgb()'' function.
If omitted, it defaults to ''100%''.

<div class='example'>
Expand Down Expand Up @@ -771,6 +774,10 @@ HSL Colors: ''hsl()'' and ''hsla()'' functions</h2>
</pre>
</div>

Note: For legacy reasons, the ''hsl()'' function and ''hsla()'' functions both exist,
but are aliases of each other.
Both of them allow specifying an HSL color with an optional alpha value.


<h3 id='hsl-to-rgb'>
Converting HSL colors to RGB colors</h3>
Expand Down

0 comments on commit 156c0aa

Please sign in to comment.