CSS-是否有@media查询RTL语言 [英] CSS - Is there @media query for RTL languages

问题描述

我将rtl(从右到左)语言支持添加到我的大型css(较少)样式中.我正在寻找一种只在.less文件中添加嵌套规则的方法，就像有可能通过解析

I'm adding rtl (right to left) languages support to my big css (less) styles. I'm looking for a way to just add nested rules in .less file like it's possible with resolution

我可以喜欢屏幕大小(为某些分辨率定义了 @small 变量)，它非常舒适.

With screen sizes I can do like (having @small variable defined for some resolutions) and it's very comfortable.

.my-class {
    width: 100px;

    @media @small {
        width : 50px;
    }

}

有没有办法做类似的事情

Is there some way to do something similar like

@media direction(rtl) {

    /** my rtl styles goes here **/

}

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

It would be very useful in .less files when I could just add nested styles for some differences for rlt languages without creating separated styles.

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

The only thing I've found now is :dir pseudo in CSS but its at the moment supported only for Firefox. https://developer.mozilla.org/en-US/docs/Web/CSS/:dir

我需要IE9 +支持.

I need IE9 + support.

推荐答案

否.方向性不是介质的属性，而是文档及其内容的属性.

No. Directionality is not a property of a medium, it is a property of the document and its content.

相反，您可以使用伪类，例如 :dir(rtl) ，它与通过继承直接或间接地在其上设置了从右到左方向性的任何元素相匹配.不幸的是，浏览器支持目前在大多数情况下都受到限制(仅Firefox 和Chrome，并且后者需要供应商前缀).

Instead, you can use a pseudo-class like :dir(rtl), which matches any element that has right to left directionality set on it, directly or indirectly via inheritance. Unfortunately, browser support is too limited for most purposes now (only Firefox and Chrome, and the latter requires a vendor prefix).

您还可以使用诸如 [dir = rtl] 之类的属性选择器，但它仅与显式设置了 dir 属性的元素匹配，而不与具有正确权限的元素匹配仅仅因为他们是从父母那里继承而来的.但是您可以将其与其他选择器结合使用.

You might also use attribute selectors like [dir=rtl], but it matches only elements that have the dir attribute explicitly set on them, not elements that have right to left direction just because they inherited it from their parent. But you can combine it with other selectors.

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

To take a simple example, suppose that you have the dir attribute set only on the body (or html) element, differently on different pages, and you wish to use the same style sheet for all pages but do some things differently on different pages. Then you can use e.g.

[dir=rtl] h1 { ... }

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

to set some rules on h1 on right-to-left pages.

这篇关于CSS-是否有@media查询RTL语言的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！