现代CSS：深入探索 CSS :dir 伪类
可访问性是 Web 开发中最容易被忽视的话题之一。但作为开发人员，如果我们希望我们的网站被所有人使用，那么我们必须考虑使其对所有人都具有可访问性，包括那些不懂你所使用语言的人。
国际化（i18n）可以帮助我们处理多种语言的文本，包括字符编码、脚本和显示方向。在将从左到右（LTR）书写的语言翻译为从右到左（RTL）书写的语言（如阿拉伯语或希伯来语）时，改变显示方向对用户体验至关重要。
在本文中，我们将介绍如何使用 dir 属性改变 HTML 文本元素的显示方向，并深入探讨如何使用 CSS :dir 伪类来根据文本元素的显示方向对其进行样式调整。
1.为什么在 i18n 中使用 :dir 伪类？
虽然 LTR 书写系统更为常见，但也有许多现代 RTL 书写系统，如阿拉伯语、希伯来语、波斯语、信德语、乌尔都语、阿塞拜疆语、维吾尔语等。对于拥有全球用户群的现代应用程序来说，支持 RTL 文本方向至关重要。
您可以使用 HTML dir 属性或者 CSS direction 样式属性为每种语言指定适当的文本方向，例如，如果您想为阿拉伯语受众本地化 React 应用程序。不过，您需要使用 CSS :dir 伪类来根据计算出的方向优化和调整用户界面样式。
:dir 伪类简化了为不同文本方向进行样式化的过程。无论您的目标是确保一致的用户体验，还是创建自定义的、可感知方向的样式，都可以更轻松地让您的应用程序对使用不同语言的用户更具包容性和可访问性。
2.HTML dir 属性
HTML dir 属性表示文本或文本相关元素的方向性。它有三个可能的值rtl、ltr 和 auto。如果不指定值，则默认为 ltr。
示例：中文->阿拉伯语
将 dir 属性设置为 auto，浏览器就能根据文本内容智能地确定文本的方向性。所有现代浏览器都支持 dir 属性。
3. CSS direction 属性
direction 属性用于设置文本、表格列和水平溢出的方向。从右向左书写的语言（如希伯来语或阿拉伯语）使用 rtl，从左向右书写的语言（如英语和大多数其他语言）使用 ltr。可取值有
/* Keyword values */
direction: ltr;
direction: rtl;
/* Global values */
direction: inherit;
direction: initial;
direction: revert;
direction: revert-layer;
direction: unset;
示例：中文->阿拉伯语
需要提醒的是，官方不建议使用 direction 属性，而是建议使用 HTML dir 属性。
Warning: Where possible, authors are encouraged to avoid using the direction CSS property and use the HTML dir global attribute instead.
4.CSS :dir 伪类
可以根据元素的方向（从左到右或从右到左）使用 :dir 来指定所选元素的样式。
:dir 伪类后面跟一个指定方向的值 ltr 或 rtl。下面是一个使用 :dir 的示例，根据文字的方向来样式化文字的背景颜色：
<style>
body {
display: grid;
place-items: center;
background-color: #121212;
height: 100vh;
}
.container {
width: 50%;
padding: 0 18px;
border: 1px solid #ccc;
border-radius: 10px;
& h1 {
&:dir(ltr) {
background-color: #f00;
}
&:dir(rtl) {
background-color: #00f;
}
}
}
</style>
<div class="container">
<h1 dir="ltr">Hello World</h1>
<h1 dir="rtl">مرحبا العالم</h1>
<h1 dir="ltr">مرحبا العالم</h1>
</div>
效果如下：
需要注意的是，:dir 伪类尚未被所有浏览器完全支持。Firefox 浏览器完全支持该伪类，Chrome 浏览器在 120 版本也将支持该伪类，建议在火狐浏览器上进行测试和体验。
5.HTML dir vs CSS :dir
/* 使用 htm dir 属性 */
h1[dir='rtl'] {
padding-right: 40px;
}
h1:not([dir='rtl']) {
padding-left: 40px;
}
/* 使用 :dir 伪类 */
h1:dir(ltr) {
padding-left: 40px;
}
h1:dir(rtl) {
padding-right: 40px;
}
总结
在撰写本文时，:dir 伪类尚未得到浏览器的完全支持，无法在大多数浏览器上运行。建议大家持续保持关注，使用该特性来提高所有人访问页面的无障碍性，以提升 Web 用户体验。
大家都在看