11

RTLとLTRの両方であるHTMLdjangoテンプレートページがあります（ユーザーのロケールによって異なります）。

このページの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ファイルを静的に保つためのより良い方法はありますか？

4

2 に答える 2

11

ロケールに応じてドキュメント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要素のクラスを使用すると、常にそのクラスが常に存在することに依存することに注意してください。ただし、dirandlang属性は、単一のdivなど、より具体的なスコープで指定でき、「その他」の読み取り方向のスタイルとともにcssで使用できます。

編集

最後に、将来を見据えて、CSSセレクターの「レベル4」には、テキストの方向性をフィルタリングできる疑似タグが含まれます。もちろん、仕様は開発中であり、ブラウザによる採用は、確実に使用できるようになるまでに数年かかる場合があります。

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

于 2012-04-29T16:21:01.063 に答える
5

特別なクラスを介してbody要素に方向を追加するのはどうですか。そうすれば、それに応じたセレクターを記述できます。

<body class="rtl">

そしてCSSで：

.rtl .myclass {
   text-align: right;
}
于 2012-04-29T15:30:49.873 に答える