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.png, handle-de.png* handle-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 父级列出每个语言环境的所有覆盖，如下所示

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

您可以将它们拆分为多个特定于语言环境的文件，并将它们全部保存在一个 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 回答