W3C home > Mailing lists > Public > public-css-archive@w3.org > August 2021

Re: [csswg-drafts] [css-images] Add easing functions to color stops (#1332)

From: Bryce Wilson via GitHub <sysbot+gh@w3.org>
Date: Fri, 13 Aug 2021 03:01:44 +0000
To: public-css-archive@w3.org
Message-ID: <issue_comment.created-898147963-1628823703-sysbot+gh@w3.org>
While I certainly would be happy to have future expansions to gradients, I think that we should focus on implementing this proposal before considering more expansions. This proposal is a somewhat minor change. It's a lot easier to make multiple well-thought-out minor changes than one large less well-thought-out change. Many areas of CSS, and the web in general, use this methodology. For example, we got the basic CSS Grid before adding subgrids, and we got the Web Assembly MVP before getting SIMD.

What I would like to know, which it seems no one does know, is what the next step for this proposal is. The proposal we have previously been discussing would allow substituting an easing function instead of a midpoint for better control of colour-stop interpolation. I'm not sure whether that needs a written up standard change or RFC or something like that (which I do not know what looks like), or if we just need to have this brought up in a meeting, or even implemented in browsers directly. I am happy to work on it in whatever way I can. I didn't have much success with the browser route since I am unfamiliar with browsers but I would be happy to have another look if that was the right direction for this proposal to go in.

To be specific, the new linear gradient syntax which it seems that we have mostly agreed on is as follows (based on the [existing syntax](https://drafts.csswg.org/css-images/#linear-gradients))
```
linear-gradient() = linear-gradient(
  [ <angle> | to <side-or-corner> ]? ,
  <color-stop-list>
)
<side-or-corner> = [left | right] || [top | bottom]
<color-stop-list> =
  <linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#
<linear-color-stop> = <color> && <length-percentage>?
<linear-color-hint> = [ <length-percentage> || <easing-function> ]
```
I'm not totally sure how these definitions work, this is my first time writing one rather than just reading it. I am not sure of the significance of one or two pipes when indicating multiple options. What I am trying to express is that a `<linear-color-hint>` could be a `<length-percentage>` or `<easing-function>`. This syntax was [first proposed](https://github.com/w3c/csswg-drafts/issues/1332#issuecomment-299990698) by @AmeliaBR and appears to not have any opposition or suggested alternatives.

-- 
GitHub Notification of comment by Bryce-MW
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/1332#issuecomment-898147963 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Friday, 13 August 2021 03:01:45 UTC

This archive was generated by hypermail 2.4.0 : Tuesday, 19 October 2021 01:31:48 UTC