CSS - is there a @media request for RTL languages
I am adding rtl (right to left) support for my big css styles (less). I'm looking for a way to just add nested rules to a .less file as possible with permission
With screen sizes I can do (with a variable @small
defined for some resolutions) and it's pretty handy.
.my-class {
width: 100px;
@media @small {
width : 50px;
}
}
Is there a way to do something like this, like
@media direction(rtl) {
/** my rtl styles goes here **/
}
This would be very helpful in .less files where I could just add nested styles for some differences for rlt languages without creating separate styles.
The only one I've found so far is :dir
pseudo in CSS, but currently only supported for Firefox. https://developer.mozilla.org/en-US/docs/Web/CSS/:dir
I need IE9 + support.
source to share
Not. Directivity is not a property of the environment, it is a property of the document and its content.
Instead, you can use a pseudo-class, for example :dir(rtl)
, that matches any element that has right-to-left directionality on it, either directly or indirectly through inheritance. Unfortunately, browser support is too limited for most purposes (Firefox and Chrome only, and the latter requires a vendor prefix).
You can also use an attribute selector, for example [dir=rtl]
, but it only matches elements that have the attribute explicitly set dir
, not right-to-left elements, just because they inherited it from their parent. But you can combine it with other selectors.
To take a simple example, suppose you have an attribute dir
set only on an element body
(or html
) differently on different pages, and you want to use the same stylesheet for all pages but do different things differently on different pages. Then you can use for example
[dir=rtl] h1 { ... }
set some rules on h1
the pages from right to left.
source to share