CSS - 是否有针对 RTL 语言的 @media 查询

Question

我正在为我的大型 css(较少)样式添加 rtl(从右到左)语言支持。我正在寻找一种方法来在 .less 文件中添加嵌套规则，就像解决方案一样

我可以使用屏幕尺寸(为某些分辨率定义 @small 变量)并且非常舒适。

.my-class {
    width: 100px;

    @media @small {
        width : 50px;
    }

}

有没有办法做类似的事情

@media direction(rtl) {

    /** my rtl styles goes here **/

}

这在 .less 文件中非常有用，因为我可以为 rlt 语言的某些差异添加嵌套样式而无需创建单独的样式。

我现在唯一发现的是 CSS 中的 :dir pseudo，但目前仅支持 Firefox。 https://developer.mozilla.org/en-US/docs/Web/CSS/:dir

我需要 IE9 + 支持。

Answer 1

没有。方向性不是媒体的属性，而是文档及其内容的属性。

相反，您可以使用类似 :dir(rtl) 的伪类, 它匹配任何直接或间接通过继承设置了从右到左方向性的元素。不幸的是，browser support现在对大多数用途来说太有限了(只有 Firefox 和 Chrome，后者需要供应商前缀)。

你也可以使用像 [dir=rtl] 这样的属性选择器，但它只匹配那些显式设置了 dir 属性的元素，而不是那些有正确设置的元素向左方向只是因为他们从 parent 那里继承了它。但您可以将它与其他选择器结合使用。

举个简单的例子，假设你只在 body(或 html)元素上设置了 dir 属性，不同的是不同的页面，并且您希望对所有页面使用相同的样式表，但在不同的页面上做一些不同的事情。然后你可以使用例如

[dir=rtl] h1 { ... }

在从右到左的页面上为 h1 设置一些规则。