[css-ui-4][css-images-4] Unify selector functions/values

[SebastianZ]

There are currently several specs defining different ways for referencing (ID) selectors:

• CSS UI 4: <id>
• CSS Images 4: element(<id-selector>)
• Scroll Animations 1: selector(<id-selector>)

To improve the consistency between them, the syntax for referencing a selector should be merged.

Personally, I prefer the selector() function of Scroll Animations 1 because its name clearly outlines that it takes a selector and it is extensible as may allow other selectors then ID selectors in the future.

See also the related discussion in #5166. And depending on the outcome of #1981, CSS Images 4 might be changed to not have a specific selector function anymore.

Sebastian

[bramus]

Not blocking for this issue, but related to it: #5884

[tabatkins]

The Images instance shouldn't be merged with the others - it's defining an <image>, not just acting as a generic element reference.

[SebastianZ]

The Images instance shouldn't be merged with the others - it's defining an <image>, not just acting as a generic element reference.

And yet it is the one that is using the most generic name with the element() function. 😄 Though I get your point that this is somewhat special as it does two things, selecting an element and generating an image from it.

And because it's combining two functionalities in one, I'd suggest to rather split them up. With that I mean allowing selector() within <image-src>. With that change, the image would be generated using the image() function, so to generate an image from an element one would then write something like image(selector(#my-image)).

Sebastian

[bramus]

Building further upon what @SebastianZ suggested: if selector() would indeed behave more like document.querySelector, adding support for & (as borrowed from css-nesting) would also allow to refer to “self” (and more)

This would come in very handy for scroll-linked animations, where you now have to duplicate timelines (see #5884)

Above that, the whole idea for being more like document.querySelector would:

• feel familiar to CSS developers as they already know the possibilities of using selectors
• not introduce any new keywords such as self into specs: “use selector(&) instead”

[MattWilcox]

I'm with Bramus on this one; re-use the familiar and aim for parity with querySelector. Better for authors.

[flackr]

FWIW scroll-animations-1 is no longer using the selector() function. We are introducing scoped named timelines instead to handle this use case as it better allows for re-use.