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

Question

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

对于屏幕尺寸,我可以这样做(@small为某些分辨率定义变量),它非常舒适.

.my-class {
    width: 100px;

    @media @small {
        width : 50px;
    }

}

有没有办法做类似的事情

@media direction(rtl) {

    /** my rtl styles goes here **/

}

当我可以为rlt语言添加嵌套样式而不创建单独的样式时,它会在.less文件中非常有用.

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

我需要IE9 +支持.

Answer 1

不是.方向性不是媒介的属性,它是文档及其内容的属性.

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

您也可以使用属性选择器[dir=rtl],但它只匹配具有dir明确设置属性的元素,而不是仅具有从右到左方向的元素,因为它们是从父级继承的.但是你可以将它与其他选择器结合起来.

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

[dir=rtl] h1 { ... }

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