アクティブな言語に応じてCSSクラスを<body>に追加する方法

8

私は自分のスタイルのいくつかをアクティブな言語に基づいて構築したい多言語サイトを設計しています。

このようなものを考えてください：

body.en-uk li.artist:before {content:"Artist: "}
body.it-it li.artist:before {content:"Artista: "}
body.de-de li.artist:before {content:"Künstler"}

これを実行できる拡張機能（つまり、アクティブな言語に応じてタグにクラスを追加する）を知っている人はいますか？

extensions

— smz
ソース

1

ほんの小さな点。この例では、言語に基づいて、スタイルではなくコンテンツを変更しています。もちろん、これはJoomla内で非常に簡単に行うことができます。CSSはまったく必要ありません。

— Seth Warburton

14

実際には、問題に対するより簡単な解決策があります。適切なテンプレート（Joomla CMSに付属するすべてのテンプレートを含む）はlang、HTML要素に属性を設定します。これにより、CSS :lang()疑似セレクターを使用できるようになります。

あなたの例は次のようになります：

li.artist:lang(en):before {content:"Artist: "}
li.artist:lang(it):before {content:"Artista: "}
li.artist:lang(de):before {content:"Künstler"}

これにはいくつかの利点があります。手始めに、それはすべてブラウザで行われるので、テンプレートに関係なく、またはJoomla以外のソリューションでも動作します。

また、lang属性が正しく設定されていれば、他の言語の埋め込みパーツでも問題なく機能します。例えば：

<html lang="en">
  <head>
    <style>
     blockquote:lang(de) { color: red; }
     blockquote:lang(en) { color: red; }
    </style>
  </head>
  <body>
    <p>A famous German quote is:</p>
    <blockquote lang="de">
      <p>Den Wald vor lauter Bäumen nicht sehen</p>
    </blockquote>
    <p>A famous English quote is:</p>
    <blockquote>
      <p>Listen to many, speak to a few.</p>
    </blockquote>
  <body>
</html>

最後に、Joomlaは言語だけでなくロケールも出力します。したがって、1つのサイトでen-GBを使用し、別のサイトでen-USを使用すると、テンプレートはそれを反映します。を使用:lang(en)するとどちらにも一致しますが、:lang(en-US)アメリカ英語のみをターゲットにする場合にも使用できます。

— ルーベン・ヴェスリング
ソース

あなたの答えをありがとうルーヴェン：非常に興味深く、私もこれで実験します。

— smz 2014年

さて、ルーベン、結局のところ、私はあなたの方法を採用したと言わなければなりません：非常にエレガントで、テンプレートに少しでも変更を加えていません。と記事...）。もちろんありがとう。もちろん、@ BakualとLodderにも感謝します。

— smz 2014年

驚くばかり。私はいくつかのインスピレーションを提供できると聞いてうれしいです。

— RouvenWeßling2014

これは素晴らしい答えです、私にはわかりませんでした！

— codehands、2014年

5

テンプレートのindex.phpファイルを変更して、クラスを直接追加します。

<body class="<?php echo $this->language; ?>">

現在の言語をクラスとしてbodyタグに割り当てます。

— バクアル
ソース

すばらしい：さらに簡単に！

— smz 2014年

Bakualに感謝：私はあなたのコードを私のテンプレートに追加し、それは完全に動作します。私はあなたの答えを「受け入れた」。

— smz 2014年

私はボディクラスにエイリアスを追加するために同様のことをしたいと思っています。しかし、更新の場合にテンプレートを上書きしたくありません。システムプラグインの作成を考えていましたが、このクラスを追加する方法はありますか、それともJavaScriptを使用するだけですか？

— Eoin

3

ルーヴェンの方法に関して追加すべき1つの小さなこと。ブラウザのサポートは、言語の疑似セレクタよりも属性セレクタの方が優れているため、次のようなものを使用してスタイルをターゲットにすることを検討できます。

[lang="en-GB"] .artist {…}

— セス・ウォーバートン
ソース

ありがとう、@ Seth！私はあなたのターゲティングソリューションを試します。両方でターゲティングするのはどうですか？これにより、ソリューションの互換性がさらに向上しますか？

— smz 2014年

それはあなたのセレクターを過剰修飾するか、不必要な膨張を追加するでしょう。最短のセレクターは、特異度を低く保ち、必要に応じて簡単にオーバーライドできるため、常に最良の選択です。セレクタが具体的であるほど、オーバーライドが難しくなります。そのため、CSSでIDを使用しないでください。両方を使用しても、ブラウザの互換性はありません。

— セスウォーバートン2014年

こんにちは、@ Seth！私はあなたの解決策を試しましたが、少なくとも私のJoomlaではうまくいかないようです！地点。私の知る限り、<HTML>ディレクティブ読み込んで使用するの嘘で言語に関する表示のみ理解します。<htmlのxmlns =「w3.org/1999/xhtml『XML：LANG =』それ-それを」LANG = "それを-it ">イタリア語の場合、または<html xmlns =" w3.org/1999/xhtml "xml：lang =" en-gb "lang =" en-gb ">英語の場合。これでターゲットソリューションは十分ですか？それはそうではないようです...

— smz 2014年

はい、このセレクターは、属性（この場合は言語）に基づいてhtml要素をターゲットにします。ただし、属性では大文字と小文字が区別されるため、次を使用する必要があります：[lang = "en-gb"]

— Seth Warburton '12年

1

テンプレートのindex.phpで、現在の<body>タグを次のように置き換えることができます。

<?php $lang = JFactory::getLanguage(); ?>
<body class="<?php echo $lang->getTag(); ?>">

これは、例として以下を出力します。

<body class="en-GB">

— ロダー
ソース

残念ながら、十分な評判がないため投票できません... :-(

— smz

1

実際、@ Bakualの答えはより良い方法です。より速くて簡単です;）

— Lodder

1

はい、言語を取得する必要はありません。それはテンプレートですでに利用可能です:)

— Bakual

投票することはできませんが、回答として投稿を選択することができます:)好きなだけ選択します（質問に回答する投稿がない場合はそのままにしておきます）。最良の回答は、最終的には最も多くの票を獲得します。

— TryHarder 2014年

@Bakual-私の愚かな間違い。理由は、テンプレートlolを含まないSOに関する言語関連の質問に答えたところです

— Lodder