1238550 - Implement (or alias?) -webkit-background-clip: text

Status: RESOLVED DUPLICATE of bug 759568

(Core :: CSS Parsing and Computation, defect)

Description

[Mike Taylor [:miketaylr]]

Edge implements this, and sites like stripe.com/relay do things like the following:

section.hero .content section.copy p {
  margin-bottom: 1.8em;
  font-size: 2em;
  color: #f0c0e5;
  background: -webkit--webkit-linear-gradient(90deg, #dca2ef, #ffd2df);
  background: -webkit--moz-linear-gradient(90deg, #dca2ef, #ffd2df);
  background: -webkit--o-linear-gradient(90deg, #dca2ef, #ffd2df);
  background: -webkit--ms-linear-gradient(90deg, #dca2ef, #ffd2df);
  background: -webkit-linear-gradient(0deg, #dca2ef, #ffd2df);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

(I'm not sure why there are double prefixes on the gradients -- either a tooling error, or some developer realized that the effect they wanted is ruined without -webkit-background-clip: text or -webkit-text-fill-color: transparent;)

This depends on Bug 759568, but I don't know the actual status of the background-clip property if we're going to implement unprefixed and alias it. Filing this bug to cover the alias parts if we go that route.

Comment 1

[Mike Taylor [:miketaylr]]

Bug to spec this feature: https://github.com/whatwg/compat/issues/26

Comment 2

[Mike Taylor [:miketaylr]]

Attachment: Dev Edition vs Chrome.png

Virgin America uses this for their boarding passes (at least on mobile). I forgot to save the page locally on my phone (and it's since expired), but their error page also has it: https://www.virginamerica.com/error?errorCode=lol


.four04__main > header > h1 {
    color: #7B4397;
    background: -webkit-linear-gradient(right, #DC2430, #B5238A 59%, #7B4397 87%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: 'Gotham 1r', 'Gotham A', 'Gotham B', Arial, sans-serif;
    font-weight: 100;
    font-style: normal;
    font-size: 8rem;
    line-height: 80px;
    margin: 0;
    padding: 72px 0 24px;
}

Comment 3

[Daniel Holbert [:dholbert]]

(In reply to Mike Taylor [:miketaylr] from comment #2)
> Virgin America uses this for their boarding passes (at least on mobile).

To clarify: does it actually break the boarding-pass page's usefulness (on Firefox mobile), or is there just a title that looks a bit extra-colorful, like on their error page?

Comment 4

[Mike Taylor [:miketaylr]]

Nah, nothing broken. Just looks cotton-candied themed (honestly I might not have noticed had I not been familiar with the problem -- but I have a terrible design sense).

Comment 5

[Daniel Holbert [:dholbert]]

(In reply to Mike Taylor [:miketaylr] from comment #0)
> This depends on Bug 759568, but I don't know the actual status of the
> background-clip property if we're going to implement unprefixed and alias
> it. Filing this bug to cover the alias parts if we go that route.

My preference would be *only* accept the "text" value in the prefixed property-name, since it's not a valid value for the unprefixed property-name.

In particular, I think we should:
 (1) Make -webkit-background-clip an alias for 'background-clip'.
 (2) Add a new value "text" for background-clip, but *only* accept it in the CSS parser if we're parsing the alias property-name ("-webkit-background-clip"). We can detect whether we're parsing the alias vs. the unprefixed version using the same mechanism described in bug 1231682 comment 1.
 (3) Implement layout/graphics support for this new value.

In any case, I think it's sanest to manage the "text" implementation all on one bug, so we probably should dupe this over to bug 759568. Mike, is that OK with you?

Comment 6

[Daniel Holbert [:dholbert]]

(In reply to Daniel Holbert [:dholbert] from comment #5)
> My preference would be *only* accept the "text" value in the prefixed
> property-name, since it's not a valid value for the unprefixed property-name.

(Meant to say -- IIRC, this is exactly what Chrome does, based on my testing a month or two ago. They don't support "background-clip: text" -- only "-webkit-background-clip:text.")

Comment 7

[Mike Taylor [:miketaylr]]

(In reply to Daniel Holbert [:dholbert] from comment #5)
> In particular, I think we should:
>  (1) Make -webkit-background-clip an alias for 'background-clip'.
>  (2) Add a new value "text" for background-clip, but *only* accept it in the
> CSS parser if we're parsing the alias property-name
> ("-webkit-background-clip"). We can detect whether we're parsing the alias
> vs. the unprefixed version using the same mechanism described in bug 1231682
> comment 1.
>  (3) Implement layout/graphics support for this new value.
> 
> In any case, I think it's sanest to manage the "text" implementation all on
> one bug, so we probably should dupe this over to bug 759568. Mike, is that
> OK with you?

This sounds like a good plan. +1.

Comment 8

[Daniel Holbert [:dholbert]]

(In reply to Daniel Holbert [:dholbert] from comment #5)
> In particular, I think we should:
>  (1) Make -webkit-background-clip an alias for 'background-clip'.

Er, this part is already done, by the way (in bug 837211.)

And the rest of the work here should probably live on bug 759568. --> Duping to bug 759568.

Comment 10

[Daniel Holbert [:dholbert]]

(I transferred the dependencies over, too. Clearing them out here.)