New pages: stop-opacity and stop-color properties #35170

estelle · 2024-07-26T21:21:57Z

part of #34763

github-actions · 2024-07-26T21:23:19Z

Preview URLs

Flaws (31)

URL: /en-US/docs/Web/CSS/stop-color
Title: stop-color
Flaw count: 15

macros:
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Web/CSS/stroke
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Web/CSS/stroke-width
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Web/CSS/fill
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Web/CSS/marker-end
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Web/CSS/marker-mid
- and 10 more flaws omitted

URL: /en-US/docs/Web/CSS/stop-opacity
Title: stop-opacity
Flaw count: 16

macros:
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Web/CSS/stroke
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Web/CSS/stroke-width
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Web/CSS/fill
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Web/CSS/fill
- Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Web/CSS/marker-end
- and 11 more flaws omitted

(comment last updated: 2024-08-08 06:48:24)

bsmth · 2024-08-01T11:55:54Z

files/en-us/web/css/stop-color/index.md

+The **`stop-color`** [CSS](/en-US/docs/Web/CSS) property defines the color to use for an SVG {{SVGElement("stop")}} element within a gradient. If present, it overrides the element's {{SVGAttr("stop-color")}} attribute.
+
+> [!NOTE]
+> The `stop-color` property only applies to {{SVGElement('stop')}} element nested in an {{SVGElement("svg")}}. It doesn't apply other SVG, HTML, or pseudo-elements.


Suggested change

> The `stop-color` property only applies to {{SVGElement('stop')}} element nested in an {{SVGElement("svg")}}. It doesn't apply other SVG, HTML, or pseudo-elements.

> The `stop-color` property only applies to {{SVGElement('stop')}} elements nested in an {{SVGElement("svg")}}. It doesn't apply to other SVG, HTML, or pseudo-elements.

This is done.

bsmth · 2024-08-01T11:56:41Z

files/en-us/web/css/stop-color/index.md

+
+## Formal definition
+
+{{CSSInfo}}


This macro is broken here.

bsmth · 2024-08-01T11:57:32Z

files/en-us/web/css/stop-color/index.md

+
+#### HTML
+
+We have an SVG with three {{SVGElement("rect")}} squares and three almost identical {{SVGElement("linearGradient")}} elements. Each gradient has four {{SVGElement("stop")}} elements creating gradients that go from black to white and then white to grey; the only difference between them is the `id` value.


Suggested change

We have an SVG with three {{SVGElement("rect")}} squares and three almost identical {{SVGElement("linearGradient")}} elements. Each gradient has four {{SVGElement("stop")}} elements creating gradients that go from black to white and then white to grey; the only difference between them is the `id` value.

We have an SVG with three {{SVGElement("rect")}} squares and three {{SVGElement("linearGradient")}} elements. Each gradient has four {{SVGElement("stop")}} elements creating gradients that go from black to white and then white to grey; the only difference between them is the `id` value.

This is done.

bsmth · 2024-08-01T11:59:29Z

files/en-us/web/css/stop-opacity/index.md

+The property value impacts the `stop-color`'s alpha channel; it can increase the transparency of a `<stop>`'s color but can not make the color defined by the `color-stop` property more opaque.
+
+> [!NOTE]
+> The `stop-opacity` property only applies to {{SVGElement('stop')}} element nested in an {{SVGElement("svg")}}. It doesn't apply other SVG, HTML, or pseudo-elements.


Suggested change

> The `stop-opacity` property only applies to {{SVGElement('stop')}} element nested in an {{SVGElement("svg")}}. It doesn't apply other SVG, HTML, or pseudo-elements.

> The `stop-opacity` property only applies to {{SVGElement('stop')}} elements nested in an {{SVGElement("svg")}}. It doesn't apply to other SVG, HTML, or pseudo-elements.

@estelle the "to" near the end of the sentence still needs to be added.

bsmth · 2024-08-01T12:02:19Z

files/en-us/web/css/stop-opacity/index.md

+
+The **`stop-opacity`** [CSS](/en-US/docs/Web/CSS) property the opacity of a given color gradient stop in the SVG {{SVGElement("stop")}} element. If present, it overrides the element's {{SVGAttr("stop-opacity")}} attribute.
+
+The property value impacts the `stop-color`'s alpha channel; it can increase the transparency of a `<stop>`'s color but can not make the color defined by the `color-stop` property more opaque.


Can we link them?

Suggested change

The property value impacts the `stop-color`'s alpha channel; it can increase the transparency of a `<stop>`'s color but can not make the color defined by the `color-stop` property more opaque.

The property value impacts the {{cssxref("stop-color")}}'s alpha channel; it can increase the transparency of a `<stop>`'s color but can not make the color defined by the `color-stop` property more opaque.

Also we have color-stop and stop-color, it would be good to disambiguate when they're so close together in prose.

This is fixed. They were both supposed to be stop-color, which has been updated.

bsmth · 2024-08-01T12:04:21Z

files/en-us/web/css/stop-opacity/index.md

+
+## Formal definition
+
+{{CSSInfo}}


Same issue with the broken macro here

PR has been filed on MDN/data - mdn/data#753

bsmth · 2024-08-01T12:04:50Z

files/en-us/web/css/stop-opacity/index.md

+
+#### HTML
+
+We have an SVG with a few {{SVGElement("polygon")}} stars and three almost identical {{SVGElement("linearGradient")}} elements: each has three {{SVGElement("stop")}} elements defining three color-stops that create a gradient going from blue to white to pink; the only difference between them is the `id` value.


Suggested change

We have an SVG with a few {{SVGElement("polygon")}} stars and three almost identical {{SVGElement("linearGradient")}} elements: each has three {{SVGElement("stop")}} elements defining three color-stops that create a gradient going from blue to white to pink; the only difference between them is the `id` value.

We have an SVG with a few {{SVGElement("polygon")}} stars and three {{SVGElement("linearGradient")}} elements: each has three {{SVGElement("stop")}} elements defining three color-stops that create a gradient going from blue to white to pink; the only difference between them is the `id` value.

This is done.

bsmth · 2024-08-01T12:05:18Z

files/en-us/web/css/stop-opacity/index.md

+
+We include a {{cssxref("stroke")}} and {{cssxref("stroke-width")}} making the polygon path line visible.
+
+Each `polygon` has a gradient background set using the {{cssxref("fill")}} property; the gradient's`id` is the `url()` parameter. We set `magenta` as the fallback color.


Suggested change

Each `polygon` has a gradient background set using the {{cssxref("fill")}} property; the gradient's`id` is the `url()` parameter. We set `magenta` as the fallback color.

Each `polygon` has a gradient background set using the {{cssxref("fill")}} property; the gradient's `id` is the `url()` parameter. We set `magenta` as the fallback color.

This is done.

bsmth · 2024-08-01T12:06:34Z

Thanks! Back over to you, Estelle if you want to have a look at the comments.

chrisdavidmills

@estelle a few more bits for you to consider

files/en-us/web/css/stop-color/index.md

files/en-us/web/css/stop-opacity/index.md

Co-authored-by: Chris Mills <chrisdavidmills@gmail.com>

chrisdavidmills

@estelle there are a couple of bits that I noticed were not actioned, which I've commented, however, these are really minor, so I've approved the PR.

files/en-us/web/css/stop-opacity/index.md

New page: stop-opacity property

52a0245

estelle requested a review from a team as a code owner July 26, 2024 21:21

estelle requested review from chrisdavidmills and removed request for a team July 26, 2024 21:21

github-actions bot added Content:CSS Cascading Style Sheets docs size/m [PR only] 51-500 LoC changed labels Jul 26, 2024

remove redirect

c00765c

estelle requested a review from a team as a code owner July 26, 2024 21:22

New page: CSS stop-color property

efed66a

estelle changed the title ~~New page: stop-opacity property~~ New pages: stop-opacity and stop-color properties Jul 26, 2024

estelle and others added 3 commits July 26, 2024 16:10

New page: CSS stop-color property

bcf9013

example details

bea75ee

Merge branch 'main' into stop

82f035e

bsmth reviewed Aug 1, 2024

View reviewed changes

files/en-us/web/css/stop-color/index.md

## Formal definition

{{CSSInfo}}

Copy link

Member

bsmth Aug 1, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This macro is broken here.

bsmth reviewed Aug 1, 2024

View reviewed changes

bsmth removed the request for review from chrisdavidmills August 1, 2024 12:06

bsmth mentioned this pull request Aug 2, 2024

Missing CSS properties defined in SVG mdn/data#750

Closed

7 tasks

chrisdavidmills requested changes Aug 2, 2024

View reviewed changes

estelle added 3 commits August 7, 2024 11:05

Merge branch 'main' into stop

c64e7b8

edits per review

d376d4d

edits per review

0f98c8b

estelle requested a review from bsmth August 7, 2024 18:46

estelle requested a review from chrisdavidmills August 7, 2024 18:46

Update files/en-us/web/css/stop-color/index.md

7c464cc

Co-authored-by: Chris Mills <chrisdavidmills@gmail.com>

chrisdavidmills approved these changes Aug 8, 2024

View reviewed changes

estelle commented Aug 8, 2024

View reviewed changes

files/en-us/web/css/stop-opacity/index.md Outdated Show resolved Hide resolved

Update files/en-us/web/css/stop-opacity/index.md

46eded2

estelle merged commit 8ad43cb into main Aug 8, 2024
9 checks passed

estelle deleted the stop branch August 8, 2024 06:49

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

New pages: stop-opacity and stop-color properties #35170

New pages: stop-opacity and stop-color properties #35170

estelle commented Jul 26, 2024

github-actions bot commented Jul 26, 2024 •

edited

Loading

bsmth Aug 1, 2024

chrisdavidmills Aug 8, 2024

bsmth Aug 1, 2024

bsmth Aug 1, 2024

chrisdavidmills Aug 8, 2024

bsmth Aug 1, 2024

chrisdavidmills Aug 8, 2024

bsmth Aug 1, 2024

bsmth Aug 1, 2024

chrisdavidmills Aug 8, 2024

bsmth Aug 1, 2024

estelle Aug 8, 2024

bsmth Aug 1, 2024

chrisdavidmills Aug 8, 2024

bsmth Aug 1, 2024

chrisdavidmills Aug 8, 2024

bsmth commented Aug 1, 2024

chrisdavidmills left a comment

chrisdavidmills left a comment

	> The `stop-color` property only applies to {{SVGElement('stop')}} element nested in an {{SVGElement("svg")}}. It doesn't apply other SVG, HTML, or pseudo-elements.
	> The `stop-color` property only applies to {{SVGElement('stop')}} elements nested in an {{SVGElement("svg")}}. It doesn't apply to other SVG, HTML, or pseudo-elements.


		#### HTML

		We have an SVG with three {{SVGElement("rect")}} squares and three almost identical {{SVGElement("linearGradient")}} elements. Each gradient has four {{SVGElement("stop")}} elements creating gradients that go from black to white and then white to grey; the only difference between them is the `id` value.

	> The `stop-opacity` property only applies to {{SVGElement('stop')}} element nested in an {{SVGElement("svg")}}. It doesn't apply other SVG, HTML, or pseudo-elements.
	> The `stop-opacity` property only applies to {{SVGElement('stop')}} elements nested in an {{SVGElement("svg")}}. It doesn't apply to other SVG, HTML, or pseudo-elements.


		The `stop-opacity` [CSS](/en-US/docs/Web/CSS) property the opacity of a given color gradient stop in the SVG {{SVGElement("stop")}} element. If present, it overrides the element's {{SVGAttr("stop-opacity")}} attribute.

		The property value impacts the `stop-color`'s alpha channel; it can increase the transparency of a `<stop>`'s color but can not make the color defined by the `color-stop` property more opaque.

	The property value impacts the `stop-color`'s alpha channel; it can increase the transparency of a `<stop>`'s color but can not make the color defined by the `color-stop` property more opaque.
	The property value impacts the {{cssxref("stop-color")}}'s alpha channel; it can increase the transparency of a `<stop>`'s color but can not make the color defined by the `color-stop` property more opaque.


		#### HTML

		We have an SVG with a few {{SVGElement("polygon")}} stars and three almost identical {{SVGElement("linearGradient")}} elements: each has three {{SVGElement("stop")}} elements defining three color-stops that create a gradient going from blue to white to pink; the only difference between them is the `id` value.


		We include a {{cssxref("stroke")}} and {{cssxref("stroke-width")}} making the polygon path line visible.

		Each `polygon` has a gradient background set using the {{cssxref("fill")}} property; the gradient's`id` is the `url()` parameter. We set `magenta` as the fallback color.

New pages: stop-opacity and stop-color properties #35170

New pages: stop-opacity and stop-color properties #35170

Conversation

estelle commented Jul 26, 2024

github-actions bot commented Jul 26, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

bsmth commented Aug 1, 2024

chrisdavidmills left a comment

Choose a reason for hiding this comment

chrisdavidmills left a comment

Choose a reason for hiding this comment

github-actions bot commented Jul 26, 2024 •

edited

Loading