Question

我工作的网站有很多包含文字的图片。这包括按钮和导航。

为了支持本地化，我包括2个css文件。一个具有非语言特定属性（字体，颜色...）和一个具有语言特定属性的属性。根据他选择的语言，只向用户提供了一种特定于语言的文件。

语言特定文件（/content/en/Site.css,/content/de/Site.css ..）包含有关背景图像的信息

div.topHeader  p#searchHeader
{ 
  background: url(/images/de/headers/search_lo.gif) no-repeat scroll center center;
}

这很顺利，但我会有很多重复的代码。在英语中css将是：

div.topHeader  p#searchHeader
{ 
  background: url(/images/en/headers/search_lo.gif) no-repeat scroll center center;
}

我会有几种语言，这就是为什么它会真正付出来优化它。有更好的方法吗？

Answer 1

只从主CSS中提取出特定于语言的部分，为每种语言提取新的CSS，并动态地在页面中包含该CSS。通过这种方式，不必管理大量的CSS类。

Answer 2

您可以尝试在单独的CSS中合并所有外部图形引用，并在代码中单独引用它。

如果你动态地表示CSS中的表单路径，那么你可以编写一个处理程序来处理这个CSS的特定请求，在文件的服务器端读取它，根据需要替换所有语言标记部分（文档。替换（“{lang}”，“de”））然后提供修改后的CSS。但这需要一些工作。

Answer 3

不是每种语言都有不同的CSS文件，而是一个文件site.css.aspx或类似文件，并处理文件，根据语言提供的POST / GET变量或接受标题输出路径。

查看类似问题here

Answer 4

首先，您可以使用background-image代替background来保存重复，定位，滚动和颜色信息。

要真正优化它，我只需根据用户的本地化动态提供css。例如：通过PHP脚本或其他东西。您可以执行background-image: url(/images/<?=$lang ?>/headers/search_lo.gif)之类的操作。

Answer 5

不确定，但你可以有类似的东西，

div.topHeader  p#searchHeader   { 
 background: url(/images/headers/search_lo__en.gif) no-repeat scroll center center; }


div.topHeader  p#searchHeader   { 
 background: url(/images/headers/search_lo__de.gif) no-repeat scroll center center; }

__（dauble下划线）之后的最后一个单词将动态添加

as

div.topHeader  p#searchHeader   { 
 background: url(/images/headers/search_lo__{%lang%}.gif) no-repeat scroll center center; }

Answer 6

一个简单的解决方案是根据语言环境将类或ID应用于HTML中的body标签。然后在样式表中，您可以执行以下操作：

div.topHeader  p#searchHeader
{
   background: no-repeat scroll center center;
}

body.en div.topHeader p#searchHeader
{
   background-image: url(/images/en/headers/search_lo.gif);
}

body.de div.topHeader p#searchHeader
{
   background-image: url(/images/de/headers/search_lo.gif);
}

仍然会有一些重复，但你已经减少了为每次本地化而必须编写的CSS数量。

Answer 7

您可以使用PHP或类似方法创建动态CSS。这是一个PHP示例：

的index.html：

<link rel="stylesheet" type="text/css" media="screen" href="style.php">

style.php：

  <?php
    header("Content-type: text/css");
    $lang = $_SESSION['however_you_are_detecting_lang'];
  ?>
  body {
   background-image:url(images/<?=$lang?>/image.png);
  }

将获取images / en / image.png或images / de / image.png

通过CSS本地化图像

7 个答案: