css fle的条件?

Rem*_*mco 2 ruby-on-rails ruby-on-rails-3 ruby-on-rails-3.1 ruby-on-rails-3.2

我的css文件的一部分:

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

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

Adi*_*ghi 5

基于CSS使基本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>
Run Code Online (Sandbox Code Playgroud)

认真建议您遵循一个约定,该约定允许您的用户的区域设置标识符成为每个区域设置资产的唯一决策者.

如果你的语言环境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>
Run Code Online (Sandbox Code Playgroud)

更新了其他备用解决方案:

<body class="<%= user_locale.presence || 'en' %>">
</body>
Run Code Online (Sandbox Code Playgroud)

在你的CSS列表中列出了每个语言环境的所有覆盖,如下所示

body.en #accordion .slide_handle {
  background: ....
}
body.de #accordion .slide_handle {
  background: ...
}
Run Code Online (Sandbox Code Playgroud)

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