Question

我有一个HTML django模板页面，它既是RTL又是LTR（取决于用户的语言环境）。

此页面的CSS存储在另一个文件中，该文件当前是静态的。

根据区域设置左右切换属性的最佳方法是什么？这个问题在CSS中是否有内置属性？（我不想使用JS，感觉太乱了）

我有：

.elem{
    left: 10px; 
    bottom: 10px;
    position: absolute;
}

我想要这样的事情：

.elem{
    right-or-left-according-to-html-dir: 10px; 
    bottom: 10px;
    position: absolute;
}

目前我能想到的唯一选择是将文件转换为模板：

.elem{
    {{dir}}: 10px; 
    bottom: 10px;
    position: absolute;
}

有没有更好的方法可以让我的CSS文件保持静态？

Answer 1

你说你根据语言环境制作文件rtl或ltr。在这种情况下，您可以使用:lang()选择器使文档的某些部分具有样式，具体取决于区域设置。

如果您需要更多支持（IE7 +），您可以使用属性选择器selector[lang='en']，但这只会测试指定选择器上的属性。

如果您在html元素中指定语言（例如，您应该使用lang="en"），您可以将html选择器放在要在某些区域设置中应用的类的前面：

.elem {
    margin: 0 10px 0 0;
    color: blue;
}

html[lang='en'] .elem {
    margin: 0 0 0 10px;
}

更好的是，如果你指定了dir属性，你可以直接在css中使用它，如下所示：

.elem[dir='rtl'] {
    margin: 0 10px 0 0;
}

请注意，通过body元素上的类，您将始终依赖于该类始终存在。但dir和lang属性可以在更具体的范围内指定，例如单个div，并且仍然可以在css中使用，以及“其他”阅读方向的样式。

修改

最后，为了展望未来，CSS Selectors的4级将包含一个psuedo标签，它可以过滤文本方向性。当然，规范正在开发中，浏览器的采用可能需要数年时间才能可靠地使用它：

http://dev.w3.org/csswg/selectors4/#dir-pseudo

Answer 2

如何通过特殊类向您的body元素添加方向，然后您可以根据选择器编写：

<body class="rtl">

并在CSS中：

.rtl .myclass {
   text-align: right;
}