Closed Bug 1238550 Opened 5 years ago Closed 5 years ago

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

Categories

(Core :: CSS Parsing and Computation, defect)

defect
Not set
normal

Tracking

()

RESOLVED DUPLICATE of bug 759568

People

(Reporter: miketaylr, Unassigned)

Details

Attachments

(1 file)

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.
Bug to spec this feature: https://github.com/whatwg/compat/issues/26
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;
}
(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?
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).
Blocks: 1243654
(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?
(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.")
(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.
(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.
Status: NEW → RESOLVED
Closed: 5 years ago
Resolution: --- → DUPLICATE
Duplicate of bug: 759568
(I transferred the dependencies over, too. Clearing them out here.)
No longer blocks: 1170774, 1238527, 1243654
No longer depends on: 759568
You need to log in before you can comment on or make changes to this bug.