gpt4 book ai didi

ruby-on-rails - css文件中的条件?

转载 作者:行者123 更新时间:2023-12-02 08:45:22 24 4
gpt4 key购买 nike

我的 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 中文本的 Accordion 。我正在用 4 种语言开发网站。如何根据语言(区域设置)参数更改 png 文件?这可能吗?或者根据语言加载一个全新的 css 文件? (不建议)

最佳答案

根据 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>

认真地建议您遵循一个约定,让您的用户的区域设置标识符成为每个区域设置 Assets 的唯一决策者。

如果您的语言环境是 endefr。不要将您的资源命名为 handle-1.pnghandle-2.png,但要确保它们是 handle-en.png handle-de.png *handle-fr.png*。遵循惯例将为您省去一大堆不自然和脆弱的配置带来的痛苦,以管理后续工作。

总结,使用基础 默认 CSS,并在包含基础 css 后覆盖 header 部分中的最小 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 parent 如下所示

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

您可以将它们拆分为多个特定于语言环境的文件,或者将它们全部放在一个 css 中,无论您喜欢哪个。但是这个本地覆盖将自动应用于您的布局,无需任何进一步更改,并且所有区域设置始终在您的 css 中可用(您可能会或可能不会觉得它有吸引力)。

关于ruby-on-rails - css文件中的条件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12892593/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com