Question

我的css文件的一部分：

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

显示handle.1.png中写有文字的手风琴。我正在用4种语言开发该网站。如何根据语言（语言环境）参数更改png文件？这可能吗？或者根据语言加载一个完整的新css文件？（不建议）

Answer 1

基于user/session/environment使基本CSS文件动态化可能不是一个好主意。你将不必要地破坏你的缓存。

你的基本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.en #accordion .slide_handle {
  background: ....
}
body.de #accordion .slide_handle {
  background: ...
}

您可以将它们拆分为多个特定于语言环境的文件，将它们保存在一个css中，无论您喜欢哪个。但是这个本地覆盖将自动应用于您的布局而不需要任何进一步的更改，并且所有语言环境始终在您的CSS中可用（您可能会或可能不会觉得它很吸引人）。

Answer 2

我希望以下列方式分离您的css文件

一个main.css文件，其中包含所有常规类。
一些与语言相关的css文件，其中包含与语言相关的类。
这些与语言相关的css文件可以命名为：style-en.css，style-fr.css等等。

现在根据语言选择，您应该加载正确的style-*.css文件以及main.css

css文件中的条件？

2 个答案: