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

Use proper CSS practices for functional notations in scroll() #4348

Closed
tabatkins opened this issue Oct 23, 2018 · 2 comments
Closed

Use proper CSS practices for functional notations in scroll() #4348

tabatkins opened this issue Oct 23, 2018 · 2 comments
Labels

Comments

@tabatkins
Copy link
Member

In general, @fantasai and I push for functional notations to just be a way of naming and isolating a chunk of CSS syntax. This isn't JS or C++, comma-separating individual arguments isn't necessary or helpful. It also makes the grammar harder to both read/write as a spec author, and use as a page author; as written, you can leave things off of the end, but if you want to specify one of the final arguments, you must supply all of the preceding ones, duplicating the default values.

Here's my suggestion for a better scroll() grammar:

scroll( <element-ref> || <scroll-direction> || [ <scroll-offset> <scroll-offset>? ] || <time> || <single-animation-fill-mode> )

It's basically identical, but with no commas, and you can provide whatever arguments you want in whatever order you want. (Only exception is that if you want to provide both scroll-offsets, they have to be in the proper order, and together.)

Only ambiguity is that both <scroll-direction> and <scroll-offset> allow auto as a value. There's two ways to handle this:

  1. We do have rules already for how to handle this sort of thing - ambiguous values get taken by whatever constructions aren't already assigned, with grammar-order determining the winner when there's a tie. So scroll(auto 50px vertical) would give a start-offset of auto, end-offset of 50px, and direction of vertical, but scroll(auto 50px) would give a start-offset of 50px, an end-offset of auto (because unspecified) and a direction of auto.
  2. Probably better, we can just remove the auto value from one of the constructions. In particular, a start-offset of auto is equivalent to 0%, and an end-offset is equivalent to 100% (right?), so we don't actually need those; now that you don't need to specify offsets just to specify a time or fill-mode, you can just omit the offsets and be fine. (Alternately we could remove it from <scroll-direction>, but there the auto behavior actually is distinct from the other values, so it has some worth.)
@fantasai
Copy link
Collaborator

@dontcallmedom dontcallmedom transferred this issue from WICG/scroll-animations Sep 19, 2019
@majido majido added the scroll-animations-1 Current Work label Sep 19, 2019
@majido
Copy link
Contributor

majido commented Apr 21, 2020

Per #4338 we dropped function notation in favor of @timeline rule. So closing this issue since it is no longer applies.

@majido majido closed this as completed Apr 21, 2020
majido added a commit that referenced this issue Jun 30, 2020
Add css syntax to for element-based offsets. Fixes #4337.

The element-based syntax is simply applied when the value starts with  `selector(#id)` with the following characteristics: 
 - `selector( <<id-selector>> )` is required and is expected to be the first value.
 - both edge and threshold are optional can can be provided in any order.

I followed some of the ideas mentioned by @tabatkins in #4348 to to get to a more ergonomic  css function syntax.  In particular there is no comma and the optional params can be in any order. Note that unlike  #4348 we are not adding a function syntax.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

3 participants