When a CSS style sheet is included, link
the media query can be specified directly in the tag with the condition that must be met for those styles to be applied:
<link rel="stylesheet" media="(max-width: 480px)" href="moviles.css" />
Is there something similar but for the browser language? Or at least for the case of right-to-left text (eg Arabic)? Something like this:
<link rel="stylesheet" media="(lang: ar)" href="rtl.css" />
Where the style sheet would only contain things like:
.flota-izquierda { float: right; }
.float-derecha { float:left; }
.izquierda { text-align: right; }
.derecha { text-align: left; }
....
I know I could use LESS/SASS to simplify my source code, but the CSS generated on build would still be complex and large anyway, because when expanded it would look like:
[lang=ar] .flota-izquierda { float: right; } [lang=ar] .float-derecha { float:left; } [lang=ar] .izquierda { text-align: right; } [lang=ar] .derecha { text-align: left; } ....
I'd prefer an answer that uses only HTML and CSS, but if that's not an option, JavaScript would also be a possibility to consider.