Full support of background properties and remove of prefixes

[BearCooder]

Description

The background property in CSS allows you to control the background of any element,what paints underneath the content in that element. It is a shorthand property, which means that it allows you to write what would be multiple CSS properties in one. There is no doubt that this is very popular and widely used. Although support is very good it would be great to have every property on the same support level across browsers and remove the necessary prefix for some.

• background-color: Full support
• background-position: Full support
• background-position-y: Partial support
• background-position-x: Partial support
  • background-size: Full support
  • background-repeat: Full support
  • background-origin: Full support
  • background-clip: Partial support
  • background-attachment: Full support
  • background-image: Full support
  • [element()](https://developer.mozilla.org/en-US/docs/Web/CSS/element()): Partial support
  • image-rect(): Partial support (not on a standard track though)
  • [image-set()](https://developer.mozilla.org/en-US/docs/Web/CSS/image-set()): Partial support

For example some browsers support text only with -webkit-background-clip, not background-clip. Use both properties so that non-supporting browsers can fall back to the prefixed property. Some browsers still do not support the text value for the background-clip property, only for the prefixed version, -webkit-background-clip. The solution is to use both -webkit-background-clip and background-clip, so that browsers that do not support text with the unprefixed property can fall back to the prefixed property.

Specification

https://www.w3.org/TR/css-backgrounds-3/

Open Issues

No response

Tests

https://wpt.fyi/results/css/css-backgrounds?label=experimental&label=master&aligned

Current Implementations

• [X] Blink
• [X] Gecko
• [X] WebKit

Standards Positions

No response

Browser bug reports

No response

Developer discussions

No response

Polls & Surveys

No response

Existing Usage

No response

Workarounds

No response

Accessibility Impact

No response

Privacy Impact

No response

Other

No response

[jsnkuhn]

on image-set

image-set is currently part of Interop 2023 (it's hidden in the Web Compat 2023 focus area) and seems to be 100% cross browser compatible. https://wpt.fyi/results/css/css-images/image-set?label=master&label=experimental&aligned&q=image-set

on -moz-image-rect

Mozilla has just put out an intent to unship -moz-image-rect https://groups.google.com/a/mozilla.org/g/dev-platform/c/zNzYpD2UcRE/m/rAdA-rq5BQAJ

-moz-image-rect functionality was spec-ed as part of image() which I have proposed here: https://github.com/web-platform-tests/interop/issues/465

[BearCooder]

Mozilla has just put out an intent to unship -moz-image-rect https://groups.google.com/a/mozilla.org/g/dev-platform/c/zNzYpD2UcRE/m/rAdA-rq5BQAJ

Yeah it seems this was to be expected as it was not on a standard track. I just added it to the list as one major browser supported it.

Would be great to get webkit-background-clip support without the prefix along together with -moz-element

[gsnedders]

• background-position-y: Partial support
• background-position-x: Partial support

See https://github.com/w3c/csswg-drafts/issues/116 about these

[jsnkuhn]

It appears at least at a cursory glance the only engine that doesn't support un-prefixed background-clip: text; is chromium: https://caniuse.com/?search=background-clip

There's some cross over here with fill/stroke https://github.com/web-platform-tests/interop/issues/440 as background-clip: text; is often partnered with -webkit-text-fill-color: transparent;.

The CSS working groups spec-ed solution for this styling is fill-image which has the advantages of not sacrificing a background layer and clipping off shadows, strokes, etc. https://drafts.fxtf.org/fill-stroke/#fill-image

[jsnkuhn]

an intent to ship unprefixing of -webkit-background-clip: text; when out this morning for blink: https://groups.google.com/a/chromium.org/g/blink-dev/c/szcfsqyaFsg/m/PFdfMCEwAAAJ

[progers]

Can element() be removed from this proposal? There are no tests of it under css-backgrounds. It is covered under a different proposal, https://github.com/web-platform-tests/interop/issues/442.

[foolip]

Thank you for proposing background properties and prefix removal for inclusion in Interop 2024.

We wanted to let you know that this proposal was not selected to be part of Interop this year.

This is because we got many more proposals than we could include in this year's project. Note that individual vendors may nevertheless choose to advance work in this area during the forthcoming year. We would welcome this proposal being resubmitted again next year if necessary.

For an overview of our process, see proposal selection. Thank you again for contributing to Interop 2024!

Posted on behalf of the Interop team.