Intent to Implement and Ship: Update list of properties whitelisted for ::first-letter

Chris Nardi

unread,

Feb 6, 2018, 4:38:35 PM2/6/18

to blink-dev

Contact emails cna...@chromium.org Spec https://drafts.csswg.org/css-pseudo-4/#first-letter-styling

Summary

CSS Pseudo 4 expands the list of properties that can apply to ::first-letter when compared to CSS Selectors 3. Our list was based primarily off of CSS Selectors 3; this change would update the list per Pseudo 4. This change would also add support for CSS variables within ::first-letter.

The properties that will be added to the whitelist for ::first-letter are: font-feature-settings, font-size-adjust, opacity, text-justify, text-underline-position, and CSS variables.

The tracking bug for this change is https://crbug.com/809688.

Motivation Developers have filed bugs (https://crbug.com/660026 and https://crbug.com/715661) for properties that per the spec should be applied to ::first-letter pseudo elements, but are not in Chrome. We can take this as an opportunity to match the spec in order to prevent future bug reports.

Risks

Interoperability and Compatibility:

Edge: No signals, I'm not currently aware about which properties are accepted in ::first-letter in Edge.

Firefox: Per a manual audit, this update would mostly bring us into line with the current list of properties whitelisted for ::first-letter in Firefox. Firefox does not currently support opacity or text-justify in ::first-letter, which it should per Pseduo 4. Firefox also supports -webkit-text-fill-color, -webkit-text-stroke-color, -webkit-text-stroke-width, and shape-outside in ::first-letter, but these are not in the spec as properties that should apply to ::first-letter.

Safari: No signals

Web developers: Positive, see bugs above

Ergonomics

n/a

Activation

n/a

Debuggability

No changes to DevTools should be needed.

Will this feature be supported on all six Blink platforms (Windows, Mac, Linux, Chrome OS, Android, and Android WebView)?

Yes.

Is this feature fully tested by web-platform-tests?

No, but I plan on upstreaming our test for valid/invalid properties on ::first-letter.

Link to entry on the feature dashboard

I don't believe this should require an entry on the feature dashboard, as it is a fairly minor change.

Requesting approval to ship?

Yes.

Rune Lillesveen

unread,

Feb 6, 2018, 5:37:00 PM2/6/18

to Chris Nardi, blink-dev

Non-owner lgtm

Out of curiosity, if we don't currently support custom properties on ::first-letter, does that mean we'd resolve var() references against inherited ones instead?

--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAKXZydc%2BAxjfmbo3KbyHUVbN3EtNqFRwhW7-USrfoLsWpF6sgg%40mail.gmail.com.

--

Rune Lillesveen

Chris Nardi

unread,

Feb 6, 2018, 5:44:02 PM2/6/18

to Rune Lillesveen, blink-dev

It looks like we don't resolve custom properties at all on ::first-letter currently; I'd hazard a guess that inheritance falls through the same code path and thus no custom properties can be currently inherited onto ::first-letter.

Rune Lillesveen

unread,

Feb 6, 2018, 5:53:05 PM2/6/18

to Chris Nardi, blink-dev

This shows a red F in my Chrome (green in Firefox):

<!DOCTYPE html>

<style>

div {

--green: red;

}

div::first-letter {

--green: green;

color: var(--green)

}

</style>

<div>First</div>

--

Rune Lillesveen

Chris Nardi

unread,

Feb 6, 2018, 5:59:13 PM2/6/18

to Rune Lillesveen, blink-dev

Okay, you're correct. Somehow I must have managed to mistest that. :)

Rick Byers

unread,

Feb 6, 2018, 8:25:57 PM2/6/18

to Chris Nardi, Rune Lillesveen, blink-dev

LGTM1 - seems pretty tiny and (mostly) matching Firefox is low-risk. Thanks for adding tests!

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAKXZydfpR0tJSkYW8Xcn_JHpvfNH8M5KxOywtU8UTsAi1JrteQ%40mail.gmail.com.

TAMURA, Kent

unread,

Feb 7, 2018, 2:24:04 AM2/7/18

to Rick Byers, Chris Nardi, Rune Lillesveen, blink-dev

LGTM2.

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAFUtAY9eR9q-9dmX2aA0pOdVS466kj4Nc0XB4iE3kFjpyLUOfw%40mail.gmail.com.

--

TAMURA Kent
Software Engineer, Google

Daniel Bratell

unread,

Feb 7, 2018, 11:05:29 AM2/7/18

to Rick Byers, TAMURA, Kent, Chris Nardi, Rune Lillesveen, blink-dev

LGTM3

/Daniel

To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAGH7WqGC1eNP94AuXgn0Agha8UxAWueS8M4E-MMpOYtwrO%2BgPQ%40mail.gmail.com.