Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fixed color-stop syntax used in gradient functions #378

Merged
merged 1 commit into from Jul 2, 2019

Conversation

Projects
None yet
3 participants
@squidfunk
Copy link
Contributor

commented Jul 2, 2019

The color stop syntax definition is incorrect, as it doesn't allow for colors stops without lengths, i.e.

div {
  background: radial-gradient(red 0%, blue 100%); /* works */
  background: radial-gradient(red, blue); /* doesn't work */
}

The MDN documentation states the correct syntax. This PR fixes that.

@chrisdavidmills

This comment has been minimized.

Copy link
Contributor

commented Jul 2, 2019

Makes sense; thanks!

@chrisdavidmills chrisdavidmills merged commit fcd2fd3 into mdn:master Jul 2, 2019

1 check passed

continuous-integration/travis-ci/pr The Travis CI build passed
Details
@lahmatiy

This comment has been minimized.

Copy link
Contributor

commented Jul 2, 2019

It would be nice to make a PR to spec, since it has <color> && <color-stop-length> syntax now: https://www.w3.org/TR/css-images-4/#typedef-linear-color-stop

@squidfunk

This comment has been minimized.

Copy link
Contributor Author

commented Jul 2, 2019

I did some research:

  • WD 2012: <color> [ <percentage> | <length> ]{0,2} – supported by all major browsers, though I don't know why there are two numbers. Shouldn't it be ? instead of {0,2}?
  • WD 2017: <color> && <color-stop-length> – clearly wrong, as length is now mandatory and position independent, supported by no browser at all
  • ED: <color> && <color-stop-length>? – makes more sense, but still no browser support.

So the ED corrects the latest WD, but it's still an ED, so I would suggest leaving it as originally proposed by this PR.

@lahmatiy

This comment has been minimized.

Copy link
Contributor

commented Jul 2, 2019

though I don't know why there are two numbers

{0,2} means zero, one or two percentage or length. Double positions defined in spec this way:

A color stop with two locations is mostly equivalent to specifying two color stops with the same color, one for each position. Specifying two locations makes it easier to create solid-color "stripes" in a gradient, without having to repeat the color twice.

Browser support is not complete but solid:
image

Since && is used since 2017 it means that spec allows using color and position in any order now. However, as I know, it doesn't supported by any browser currently.

@squidfunk

This comment has been minimized.

Copy link
Contributor Author

commented Jul 2, 2019

Thanks for researching. So I guess we should change the syntax to <color> <color-stop-length>{0,2}. Should I create a PR?

@squidfunk squidfunk deleted the squidfunk:fix/color-stop-syntax branch Jul 2, 2019

@squidfunk squidfunk restored the squidfunk:fix/color-stop-syntax branch Jul 2, 2019

@squidfunk squidfunk deleted the squidfunk:fix/color-stop-syntax branch Jul 2, 2019

@lahmatiy

This comment has been minimized.

Copy link
Contributor

commented Jul 2, 2019

I found the issue about missed ? in color stop syntax: w3c/csswg-drafts#1334
However I didn't found when transition <color> <length-percentage>? -> <color> && <color-stop-length> (? were added later) happened. Looks like && appeared from the beginning of CSS Images L4.

Since && is used since 2017 it means that spec allows using color and position in any order now. However, as I know, it doesn't supported by any browser currently.

@tabatkins @AmeliaBR Could you clarify please, should we create an issue/PR to CSS Images L4 or <color> && <color-stop-length>? is a correct syntax for color stop?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.