csswg-drafts icon indicating copy to clipboard operation
csswg-drafts copied to clipboard

[css-backgrounds-4] Decide on name for shorthand covering everything `background-*` except `background-color`

Open SebastianZ opened this issue 2 years ago • 22 comments

In #8726 we resolved to add a shorthand for background-* minus background-color.

We didn't decide on its name yet, though. I already listed the current suggestions in the other issue, but here they are again:

  • background-layer
  • background-overlay
  • background-stack
  • background-list
  • background-canvas
  • background-pattern
  • background-sheet
  • background-screen
  • background-cover
  • background-slice
  • background-image-stack
  • background-media
  • background-image-list
  • background-image-layer

Straw poll (split into two comments due to the amount of suggestions): https://github.com/w3c/csswg-drafts/issues/9083#issuecomment-1873525790 https://github.com/w3c/csswg-drafts/issues/9083#issuecomment-1873526932

Sebastian

SebastianZ avatar Jul 18 '23 18:07 SebastianZ

Copying from https://github.com/w3c/csswg-drafts/issues/8726#issuecomment-1561573652

What about background-overlay? That addresses both of the concerns I raised:

  • It more clearly refers to the part of the background overlaying the color. (The background color is itself, functionally, a layer of the background so background-layer is confusing in this respect.)
  • It can be interpreted in a collective sense, so it doesn't feel odd that it's not plural.

Copying from https://github.com/w3c/csswg-drafts/issues/8726#issuecomment-1569293639

I think it's worth noting that we have a similar pattern of properties for fill, and might want to use the same name there: https://drafts.fxtf.org/fill-stroke-3/ (So we should pick a name that works for both.)

fantasai avatar Aug 03 '23 12:08 fantasai

I still slightly prefer the initially suggested background-layer over the others. Though I am ok with background-overlay.

I am ruling out some for myself here, which I think don't fit well.

  • background-pattern While "pattern" indicates that the solid color is excluded, it somewhat sounds like it allows creating simple patterns and not to the images.
  • background-screen "screen" refers to the monitor in virtually all contexts, not to a layer.
  • background-cover "cover" rather has a meaning of a single thing, like a book cover, not of multiple layers.
  • background-slice We already have border-image-slice which refers to slicing an image. So "slice" here may rather confuse authors.
  • background-image-stack This conveys the idea of different image layers, though it looks like a longhand of background-image while it actually is a shorthand for it and the other background-* properties.
  • background-media "media" sounds like it covers images, videos and other types of media.
  • background-image-list Same reason as with background-image-stack.
  • background-image-layer Same reason as with background-image-stack.

Sebastian

SebastianZ avatar Jan 01 '24 23:01 SebastianZ

To make progress on this, let's get some straw poll for the different suggestions. As there are many, I'll split them up into several comments. Please add your name besides the entry your prefer or add your vote to the comment. (I've added the names of members who expressed their opinion on one of the proposals in #8726.)

  • šŸ‘ŽšŸ» Abstain (0):
  • šŸ‘šŸ» background-layer (3): @SebastianZ, @LeaVerou, @Crissov
  • šŸ˜„ background-overlay (1): @fantasai
  • šŸŽ‰ background-stack (0):
  • ā¤ļø background-list (0):
  • šŸš€ background-canvas (0):
  • šŸ‘€ background-pattern (0):

SebastianZ avatar Jan 01 '24 23:01 SebastianZ

  • šŸ‘šŸ» background-sheet (0):
  • šŸ˜„ background-screen (0):
  • šŸŽ‰ background-cover (0):
  • ā¤ļø background-image-stack (0):
  • šŸš€ background-image-list (0):
  • šŸ‘€ background-image-layer (0):

Note that I explicitly left out background-slice and background-media, because I think they miss the idea behind that property. If somebody thinks differently, please leave a comment!

SebastianZ avatar Jan 01 '24 23:01 SebastianZ

I will object to adding background-image-whatever as a shorthand of background-image.

Loirooriol avatar Jan 02 '24 01:01 Loirooriol

background-texture?

jonjohnjohnson avatar Jan 02 '24 08:01 jonjohnjohnson

We went with color-layers() in https://github.com/w3c/csswg-drafts/issues/8431#issuecomment-2274558595 so I think we should definitely not go with the singular background-layer here. :)

(I think background-layers doesn't convey as well as background-overlay that it doesn't include the background-color layer, so I'm not totally convinced. But at least it doesn't have the singularity weirdness of background-layer.)

fantasai avatar Aug 08 '24 18:08 fantasai

We went with color-layers() in #8431 (comment) so I think we should definitely not go with the singular background-layer here. :)

I want to point out that all list-valued properties so far have singular names, e.g. transition, animation, box-shadow, and so do all background-* properties. So, even when it's clearer using the plural version here, it breaks consistency. That said, I don't have a strong opinion on this.

What I do have a strong opinion about is the lack of votings so far. It would be great if we got some more opinions on this, so we can resolve on a name.

Sebastian

SebastianZ avatar Aug 08 '24 19:08 SebastianZ

I'm also voting for background-layer. To me it seems the most self-explanatory.

JoshTumath avatar Aug 30 '24 15:08 JoshTumath

While there wasn't much feedback, the votes clearly lean towards background-layer. So I think it's fine to resolve on this.

@astearns I propose to resolve on naming the shorthand background-layer asynchronously.

Sebastian

SebastianZ avatar Aug 21 '25 09:08 SebastianZ

I’d like @fantasai to weigh in first since in her last comment she was opposed to background-layer

astearns avatar Sep 08 '25 19:09 astearns

Also, @Loirooriol seems to suggest to revert the resolution to add the property in the first place in https://github.com/w3c/csswg-drafts/issues/8726#issuecomment-3267736296. So, if we decide to remove the property in favor of covering the outlined use case with the newly introduced revert-rule keyword, then the discussion about its name is moot.

Sebastian

SebastianZ avatar Sep 08 '25 20:09 SebastianZ

I'm fine with having the new shorthand. But if we can't agree on a good name, and given that the original usecase can also be addressed with revert-rule, then retracting can be a reasonable option too.

Loirooriol avatar Sep 08 '25 21:09 Loirooriol

@JaneOri, you initially came up with the idea of adding this new shorthand. Maybe you have some opinion on this.

Sebastian

SebastianZ avatar Oct 08 '25 20:10 SebastianZ

From the developer POV, I would like the new shorthand to be background-image, and have the current background-image longhand become background-image-source.

I think that's the nicest and least confusing name combination if we can get it impleemented

nt1m avatar Nov 13 '25 06:11 nt1m

From the developer POV, I would like the new shorthand to be background-image, and have the current background-image longhand become background-image-source.

I think that's the nicest and least confusing name combination if we can get it implemented

I agree that this naming scheme seems clearest for authors (and me trying to write tests).

Would it be back compat thought? Existing content would break if there were existing background-* properties followed by background-image with only a source that was interpreted as a shorthand. Is that what you mean by "if we can get it implemented"?

schenney-chromium avatar Nov 13 '25 15:11 schenney-chromium

Would it be back compat thought? Existing content would break if there were existing background-* properties followed by background-image with only a source that was interpreted as a shorthand. Is that what you mean by "if we can get it implemented"?

There's some CSSOM compat concern around shorthanding properties in general: #8398. I really think we should try and solve it though, so we don't have to force ourselves to a subpar developer experience (not just in this situation, but in others too).

I doubt there are sites using invalid syntax atm that would become valid with my suggestion though.

nt1m avatar Nov 13 '25 22:11 nt1m

#8398 is about turning an old longhand into a shorthand of new properties.

This would be turning an old lonhand into a shorthand of old properties. I think it won't be web compatible.

Loirooriol avatar Nov 13 '25 22:11 Loirooriol

#8398 is about turning an old longhand into a shorthand of new properties.

This would be turning an old lonhand into a shorthand of old properties. I think it won't be web compatible.

I agree. Authors use background-image all over the place assuming it won't reset any other property.

LeaVerou avatar Nov 14 '25 00:11 LeaVerou

I agree. Authors use background-image all over the place assuming it won't reset any other property.

Ah right, that's definitely a compat concern

nt1m avatar Nov 14 '25 00:11 nt1m

So shorthandifying background-image falls flat, unfortunately. And @Loirooriol is not against keeping a property for it if we can agree on a name.

@fantasai Would you object to name the property background-layer (singular)? (See my comment on why it should be singular.)

Sebastian

SebastianZ avatar Nov 25 '25 17:11 SebastianZ

To be precise, I said "agree on a good name". To be honest, I don't like any of the suggestions I have seen so far, other than Tim's, but that one doesn't seem web compatible.

The attempt for a poll above didn't get much traction, so it seems people aren't very enthusiastic either about the proposed names.

A suboptimal name can be acceptable for an important functionality that can't be achieved in other ways, but here the usecase is covered by revert-rule, so I think the bar for a good name should be higher.

Then my preference is to not add the shorthand at this point.

Loirooriol avatar Dec 18 '25 14:12 Loirooriol