Search code examples
ruby-on-railsruby-on-rails-3ruby-on-rails-3.1ruby-on-rails-3.2

conditions in css fle?

Part of my css file:

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

Shows a accordion with text writen in handles.1.png. I am developing the site in 4 languages. How can I change the png file based on the language (locale) parameter? Is this possible? or load a complete new css file based on the language? (not suggested)

Solution

  • It's probably not a good idea to make your base CSS file dynamic based on user/session/environment. You'll be busting your cache unnecessarily.

    What you need in your base css is the just the default. The very nature of the CSS allows following declarations to override the previous.

    So, in you application's layout file you would load the standard base CSS with background image handling the default locale.

    For locale specific overrides, you would include a minimal CSS file for that specific locale OR if the amount of configuration per locale is minimal include the style inline in the header.

    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>

    I seriously suggest you to follow a convention which allows your user's locale identifier to be the only decision maker for assets per locale.

    If your locales are en,de,fr. Don't name your assets handle-1.png, handle-2.png but ensure they are handle-en.png, handle-de.png *handle-fr.png*. Following a convention will save you a bundle of pain of unnatural and brittle configuration to manage down the track.

    Summary, Go for base default CSS, and override minimal css in the header section after including the base css. Alternatively you could include a locale specific css file which ONLY has overrides.

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

    Updated with another alternate solution:

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

    In your CSS list out all your overrides per locale with body parent like the following

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

    You could split them into multiple locale specific files of keep it all together in one css, whichever you prefer. But this local overrides would be automatically applied to you layout without any further changes and all locales are always available at all times in your css (you may or may not find it appealing).