CSS - Is there @media query for RTL languages

Question

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

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 **/

}

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.

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

I need IE9 + support.

Answer 1

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

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).

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.

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 { ... }

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