Как переключаться влево и вправо в файле css?

У меня есть страница шаблона django HTML, которая является RTL и LTR (зависит от пользовательской локали).

CSS этой страницы хранится в другом файле, и этот файл в настоящее время является статическим.

Каков наилучший способ переключения атрибута слева и справа в соответствии с языковым стандартом? Есть ли встроенный атрибут в CSS для этой проблемы? (Я не хочу использовать JS, он слишком грязный)

У меня есть:

.elem{
    left: 10px; 
    bottom: 10px;
    position: absolute;
}

Мне нужно что-то вроде этого:

.elem{
    right-or-left-according-to-html-dir: 10px; 
    bottom: 10px;
    position: absolute;
}

В настоящее время единственным вариантом, о котором я могу думать, является также преобразование файла в шаблон:

.elem{
    {{dir}}: 10px; 
    bottom: 10px;
    position: absolute;
}

Есть ли лучший способ, который позволит мне сохранить мой CSS файл статическим?

Ответы

Ответ 1

Вы говорите, что делаете документ rtl или ltr в зависимости от языка. В этом случае вы можете использовать селектор :lang(), чтобы отдельные части вашего документа имели стиль в зависимости от языкового стандарта.

Если вам нужна небольшая поддержка (IE7 +), вы можете использовать селектор атрибутов selector[lang='en'], хотя это будет проверять только атрибут указанного селектора.

Если вы укажете язык в элементе html (к примеру, с lang="en"), вы можете просто поставить селектор html перед классом, который вы хотите применить в определенных локалях:

.elem {
    margin: 0 10px 0 0;
    color: blue;
}

html[lang='en'] .elem {
    margin: 0 0 0 10px;
}

Еще лучше, если вы указали атрибут dir, вы можете напрямую использовать его в css следующим образом:

.elem[dir='rtl'] {
    margin: 0 10px 0 0;
}

Обратите внимание, что с классом на элементе body вы всегда будете зависеть от того, что этот класс всегда находится там. Но атрибут dir и lang может быть указан в более конкретной области видимости, как один div, и все еще использоваться в css вместе со стилями для "других" направлений чтения.

Edit

Наконец, чтобы взглянуть в будущее, уровень 4 выбора селектора CSS будет содержать тег psuedo, который сможет фильтровать направленность текста. Разумеется, спецификации разрабатываются, и принятие браузерами может занять годы, прежде чем можно будет надежно использовать его:

http://dev.w3.org/csswg/selectors4/#dir-pseudo

Ответ 2

Как насчет добавления направления к элементу вашего тела через специальный класс, тогда вы можете записать в соответствии с селекторами:

<body class="rtl">

и в CSS:

.rtl .myclass {
   text-align: right;
}