2

私のcssファイルの一部：

#accordion1 .slide_handle {
    background:url(/assets/handles-1.png);
    bottom:0;
    cursor:pointer;
    left:0;
    position:absolute;
    top:0;
    width:40px;
}

handles.1.png にテキストが書き込まれたアコーディオンを表示します。私は 4 言語でサイトを開発しています。言語 (ロケール) パラメータに基づいて png ファイルを変更するにはどうすればよいですか? これは可能ですか？または、言語に基づいて完全な新しい css ファイルをロードしますか? (非推奨)

4

2 に答える 2

5

に基づいてベース CSS ファイルを動的にすることは、おそらく良い考えではありませんuser/session/environment。不必要にキャッシュを破棄することになります。

基本CSSに必要なのはデフォルトだけです。CSS の性質上、次の宣言で前の宣言をオーバーライドできます。

したがって、アプリケーションのレイアウト ファイルでは、デフォルト ロケールを処理する背景画像を含む標準ベース CSS をロードします。

ロケール固有のオーバーライドの場合、その特定のロケール用の最小限の CSS ファイルを含めるか、ロケールごとの構成の量が最小限の場合は、スタイルをインラインでヘッダーに含めます。

views/layouts/application.html.erb

<html>
  <head>
    <%= stylesheet_link_tag :defaults %> # Load standard base css here
    <% if user_locale.present? %>
      <style type="text/css">
        #accordion .slide_handle {
           background: url(<%= asset_url("handles-#{user_locale}.png") %>);
        }
      </style>
    <% end %>
  </head>
  <body>
    Yada Yada Yada
    <%= yield %>
  </body>
</html>

ユーザーのロケール識別子がロケールごとのアセットの唯一の意思決定者になることを許可する規則に従うことを真剣に提案します。

ロケールがen, de, の場合fr。handle-1.pngアセットに名前を付けないでください。ただし、* *handle-2.pngであることを確認してください。規則に従うことで、不自然で壊れやすい構成の一連の苦痛から解放され、トラックを管理できます。handle-en.pnghandle-de.pnghandle-fr.png

まとめ、基本のデフォルト CSSを選択し、基本 CSS を含めた後、ヘッダー セクションで最小限の CSS をオーバーライドします。または、オーバーライドのみを持つロケール固有の css ファイルを含めることもできます。

<head>
   <%= stylesheet_link_tag :defaults %>
   <%= stylesheet_link_tag "base-#{user_locale}" if user_locale.present? %>
</head>

別の代替ソリューションで更新:

<body class="<%= user_locale.presence || 'en' %>">
</body>

CSS リストでは、次のような本体の親を持つロケールごとのすべてのオーバーライドを出力します

body.en #accordion .slide_handle {
  background: ....
}
body.de #accordion .slide_handle {
  background: ...
}

それらを複数のロケール固有のファイルに分割して、すべてを 1 つの css にまとめることができます。ただし、このローカル オーバーライドは、それ以上変更しなくてもレイアウトに自動的に適用され、すべてのロケールが css でいつでも利用できます (魅力的である場合とそうでない場合があります)。

于 2012-10-15T09:31:46.840 に答える
1

次の方法でcssファイルを分離したいと思います

  • すべての一般クラスを含むmain.cssファイル。
  • 言語関連のクラスを含むいくつかの言語関連の css ファイル。
  • これらの言語関連の css ファイルには、 などの名前を付けることができstyle-en.cssますstyle-fr.css。

言語の選択に基づいて、適切なstyle-*.cssファイルをmain.css

于 2012-10-15T09:33:51.450 に答える