Intent to Ship: CSS :dir() pseudo-class selector

[David Baron]

Contact emails

dba...@chromium.org, dizh...@chromium.org, myid...@igalia.com

Explainer

None

Specification

https://www.w3.org/TR/selectors-4/#the-dir-pseudo

Summary

The :dir() CSS pseudo-class selector matches elements based on directionality, which is determined based on the HTML dir attribute. :dir(ltr) matches left-to-right text directionality, and :dir(rtl) matches elements with right-to-left text directionality. It is not equivalent to [dir] attribute selectors because it matches against directions inherited from an ancestor with the dir attribute, and because it matches against the direction computed from use of dir=auto (which determines directionality from the first character in the text with strong directionality).

Blink component

Blink>CSS

TAG review

TAG review status

Not applicable

Risks

Interoperability and Compatibility

This is largely an additive feature. However, as part of the process of preparing to ship the feature, we worked on more clearly specifying exactly how directionality in HTML works, and particularly how it interacts with shadow DOM. This work is occurring in https://github.com/whatwg/html/issues/3699 https://github.com/whatwg/html/pull/9554 and https://github.com/whatwg/html/pull/9796 . Since these changes to HTML directionality also affect the dirname attribute (which is a form submission feature), they have been implemented behind the same flag as the pseudo-class. However, they are likely to be low risk because the recommended way of using the dirname attribute is to use dir=auto on the same element as the dirname attribute, and that usage pattern should not be affected. This feature is part of Interop2023's focus area on CSS Pseudo-classes: https://wpt.fyi/interop-2023

Gecko: Shipped/Shipping (https://bugzilla.mozilla.org/show_bug.cgi?id=562169)

WebKit: Shipped/Shipping (https://bugs.webkit.org/show_bug.cgi?id=64861) Supported as of Safari 16.4 according to https://caniuse.com/css-dir-pseudo

Web developers: No signals

Other signals: CSSWG consensus to ship documented in https://www.w3.org/TR/css-2017/#experimental (CSSWG includes reps from all major browser vendors)

WebView application risks

Does this intent deprecate or change behavior of existing APIs, such that it has potentially high risk for Android WebView-based applications?

no

Debuggability

Same as other pseudo-classes

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

No

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

Yes

WPT test plan (somewhat out of date, since recent CLs have added many tests) at https://github.com/web-platform-tests/wpt/issues/25569 Existing tests have names starting with "dir" in https://wpt.fyi/results/css/selectors and https://wpt.fyi/results/html/dom/elements/global-attributes PR for testing shadow DOM interaction at https://github.com/web-platform-tests/wpt/pull/29820 which will add additional tests

Flag name on chrome://flags

Finch feature name

kCSSPseudoDir

Requires code in //chrome?

False

Tracking bug

https://code.google.com/p/chromium/issues/detail?id=576815

Availability expectation

Available in all major browsers once we ship.

Sample links

https://jsfiddle.net/fxc9a8uc/1

Estimated milestones

Shipping on desktop

120

Shipping on Android

120

Shipping on WebView

120

Anticipated spec changes

Open questions about a feature may be a source of future web compat or interop issues. Please list open issues (e.g. links to known github issues in the project for the feature specification) whose resolution may introduce web compat/interop risk (e.g., changing to naming or structure of the API in a non-backward-compatible way).

PR at https://github.com/whatwg/html/pull/9796 to better define the feature, particularly how it relates to Shadow DOM

Link to entry on the Chrome Platform Status

https://chromestatus.com/feature/5751531651465216

Links to previous Intent discussions

Intent to prototype: https://groups.google.com/a/chromium.org/g/blink-dev/c/p0Wc66rbVOc/m/khHJ0dSsAwAJ

This intent message was generated by Chrome Platform Status.

[Manuel Rego Casasnovas]

LGTM1

Just for context, this was already approved 3 years ago:
https://groups.google.com/a/chromium.org/g/blink-dev/c/p0Wc66rbVOc/m/khHJ0dSsAwAJ

But then we realized the spec text was not ready, there were some
misunderstandings and things got blocked on that.

Big thanks to push this to the finish line!

Cheers,
Rego

On 03/10/2023 20:37, David Baron wrote:
>
> Contact emails
>
> dba...@chromium.org <mailto:dba...@chromium.org>, dizh...@chromium.org
> <mailto:dizh...@chromium.org>, myid...@igalia.com
> <mailto:myid...@igalia.com>

>
>
> Explainer
>
> None
>
>
> Specification
>
> https://www.w3.org/TR/selectors-4/#the-dir-pseudo
> <https://www.w3.org/TR/selectors-4/#the-dir-pseudo>
>
>
> Summary
>
> The :dir() CSS pseudo-class selector matches elements based on
> directionality, which is determined based on the HTML dir attribute.
> :dir(ltr) matches left-to-right text directionality, and :dir(rtl)
> matches elements with right-to-left text directionality. It is not
> equivalent to [dir] attribute selectors because it matches against
> directions inherited from an ancestor with the dir attribute, and
> because it matches against the direction computed from use of dir=auto
> (which determines directionality from the first character in the text
> with strong directionality).
>
>
>
> Blink component
>
> Blink>CSS

> <https://bugs.chromium.org/p/chromium/issues/list?q=component:Blink%3ECSS>

>
>
> TAG review
>
>
>
> TAG review status
>
> Not applicable
>
>
> Risks
>
>
>
> Interoperability and Compatibility
>
> This is largely an additive feature. However, as part of the process of
> preparing to ship the feature, we worked on more clearly specifying
> exactly how directionality in HTML works, and particularly how it
> interacts with shadow DOM. This work is occurring in
> https://github.com/whatwg/html/issues/3699

> <https://github.com/whatwg/html/issues/3699>
> https://github.com/whatwg/html/pull/9554

> <https://github.com/whatwg/html/pull/9554> and
> https://github.com/whatwg/html/pull/9796
> <https://github.com/whatwg/html/pull/9796> . Since these changes to HTML
> directionality also affect the dirname attribute (which is a form
> submission feature), they have been implemented behind the same flag as
> the pseudo-class. However, they are likely to be low risk because the
> recommended way of using the dirname attribute is to use dir=auto on the
> same element as the dirname attribute, and that usage pattern should not
> be affected. This feature is part of Interop2023's focus area on CSS

> Pseudo-classes: https://wpt.fyi/interop-2023 <https://wpt.fyi/interop-2023>
>
>
>
> /Gecko/: Shipped/Shipping
> (https://bugzilla.mozilla.org/show_bug.cgi?id=562169
> <https://bugzilla.mozilla.org/show_bug.cgi?id=562169>)
>
> /WebKit/: Shipped/Shipping
> (https://bugs.webkit.org/show_bug.cgi?id=64861
> <https://bugs.webkit.org/show_bug.cgi?id=64861>) Supported as of Safari

> 16.4 according to https://caniuse.com/css-dir-pseudo

> <https://caniuse.com/css-dir-pseudo>
>
> /Web developers/: No signals
>
> /Other signals/: CSSWG consensus to ship documented in

> https://www.w3.org/TR/css-2017/#experimental
> <https://www.w3.org/TR/css-2017/#experimental> (CSSWG includes reps from
> all major browser vendors)
>
>
> WebView application risks
>
> Does this intent deprecate or change behavior of existing APIs, such
> that it has potentially high risk for Android WebView-based applications?
>
> no
>
>
>
> Debuggability
>
> Same as other pseudo-classes
>
>
>
> Will this feature be supported on all six Blink platforms
> (Windows, Mac, Linux, Chrome OS, Android, and Android WebView)?
>
> No
>
>
> Is this feature fully tested by web-platform-tests

> <https://chromium.googlesource.com/chromium/src/+/main/docs/testing/web_platform_tests.md>?

>
> Yes
>
> WPT test plan (somewhat out of date, since recent CLs have added many
> tests) at https://github.com/web-platform-tests/wpt/issues/25569
> <https://github.com/web-platform-tests/wpt/issues/25569> Existing tests
> have names starting with "dir" in https://wpt.fyi/results/css/selectors
> <https://wpt.fyi/results/css/selectors> and
> https://wpt.fyi/results/html/dom/elements/global-attributes
> <https://wpt.fyi/results/html/dom/elements/global-attributes> PR for
> testing shadow DOM interaction at
> https://github.com/web-platform-tests/wpt/pull/29820
> <https://github.com/web-platform-tests/wpt/pull/29820> which will add
> additional tests
>
>
>
> Flag name on chrome://flags
>
>
>
> Finch feature name
>
> kCSSPseudoDir
>
>
> Requires code in //chrome?
>
> False
>
>
> Tracking bug
>
> https://code.google.com/p/chromium/issues/detail?id=576815
> <https://code.google.com/p/chromium/issues/detail?id=576815>
>
>
> Availability expectation
>
> Available in all major browsers once we ship.
>
>
> Sample links
>
>

> https://jsfiddle.net/fxc9a8uc/1 <https://jsfiddle.net/fxc9a8uc/1>

>
>
> Estimated milestones
>
> Shipping on desktop 120
>
> Shipping on Android 120
>
> Shipping on WebView 120
>
>
>
> Anticipated spec changes
>
> Open questions about a feature may be a source of future web compat or
> interop issues. Please list open issues (e.g. links to known github
> issues in the project for the feature specification) whose resolution
> may introduce web compat/interop risk (e.g., changing to naming or
> structure of the API in a non-backward-compatible way).
>
> PR at https://github.com/whatwg/html/pull/9796
> <https://github.com/whatwg/html/pull/9796> to better define the feature,
> particularly how it relates to Shadow DOM
>
>
> Link to entry on the Chrome Platform Status
>
> https://chromestatus.com/feature/5751531651465216
> <https://chromestatus.com/feature/5751531651465216>
>
>
> Links to previous Intent discussions
>
> Intent to prototype:

> https://groups.google.com/a/chromium.org/g/blink-dev/c/p0Wc66rbVOc/m/khHJ0dSsAwAJ <https://groups.google.com/a/chromium.org/g/blink-dev/c/p0Wc66rbVOc/m/khHJ0dSsAwAJ>

>
> This intent message was generated by Chrome Platform Status

> <https://chromestatus.com/>.
>
> --
> You received this message because you are subscribed to the Google
> Groups "blink-dev" group.
> To unsubscribe from this group and stop receiving emails from it, send
> an email to blink-dev+...@chromium.org
> <mailto:blink-dev+...@chromium.org>.
> To view this discussion on the web visit
> https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAG0MU3iYpepa-W7j8eX65F6KtMf1ioC82-ujZw%2BjnGNGpxEKzQ%40mail.gmail.com <https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAG0MU3iYpepa-W7j8eX65F6KtMf1ioC82-ujZw%2BjnGNGpxEKzQ%40mail.gmail.com?utm_medium=email&utm_source=footer>.

[Mike Taylor]

LGTM2 (or 5??)

[Chris Harrelson]

LGTM3 / 6

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/9936f6a6-53ea-444e-8edd-13d71adedc10%40chromium.org.