:dir() improved support #177
Description
Description
"The :dir() pseudo-class in CSS allows elements to be selected based on the direction of the language, as determined in the HTML markup. There are really only two directions language can flow in a document, which are left-to-right and right-to-left. Think of this as a way to style elements that are distinguished by different language directionality."
– @geoffgraham (via CSS Tricks)
I couldn't have explained it better, myself. Thanks, Geoff 🙏🏼
Rationale
:dir() support is important to the effort of internationalization. This pseudo-class has been a long time coming and has been a topic of discussion for a while now as well:
Formal (docs-style)
- https://developer.mozilla.org/en-US/docs/Web/CSS/:dir
- https://www.geeksforgeeks.org/css-dir-selector/
- https://www.w3docs.com/learn-css/dir.html
Informal
- https://css-tricks.com/almanac/selectors/d/dir/
- https://tympanus.net/codrops/css_reference/dir/
- https://www.youtube.com/watch?v=lG-tFqMZYPs
Directionality can currently be set in two primary ways— setting the HTML dir attribute to either ltr or rtl, or setting the direction property in CSS to either of those same values.
Elements explicitly setting dir="rtl" (or similar) can already be targeted with CSS using an attribute selector. However, this is usually an edge case, as that property is usually set once on a document, and does not necessarily apply that same directionality to all elements on the page.
:dir() is the solution here:
- matches
[dir="rtl"](or similar) - matches
direction: rtl(or similar) - matches directionality that is either inherited or purposefully not inherited from a parent element
Specification
https://w3c.github.io/csswg-drafts/selectors-4/#the-dir-pseudo
Tests
- https://wpt.fyi/results/css/css-pseudo?label=master&label=experimental&product=chrome&product=firefox&product=safari&aligned&view=subtest&q=dir
- https://wpt.fyi/results/css/selectors?label=master&label=experimental&product=chrome&product=firefox&product=safari&aligned&view=subtest&q=dir%20
More tests will likely be needed for this.