Локализуйте изображения через CSS

Question

На сайте, на котором я работаю, много изображений, содержащих текст. Это включает в себя кнопки и навигацию.

Для поддержки локализации я включаю 2 css-файла. Тот, который имеет не специфичные для языка свойства (шрифт, цвет ...) и тот, который имеет специфичные для языка свойства. В зависимости от выбранного языка пользователю предоставляется только 1 языковой файл.

Файл для конкретного языка (/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

Для начала вы можете использовать background-image вместо background, чтобы сохранить повторение, позиционирование, прокрутку и информацию о цвете.

Чтобы действительно оптимизировать его, я бы просто динамически обслуживал CSS, основываясь на локализации пользователя. например: через скрипт php или что-то. Вы можете просто сделать что-то вроде background-image: url(/images/<?=$lang ?>/headers/search_lo.gif).

Answer 4

Вместо того чтобы иметь разные CSS-файлы для каждого языка, вы можете создать один файл, site.css.aspx или аналогичный, и обработать файл, вывести пути на основе предоставленных языком переменных POST / GET или в заголовках accept.

См. Аналогичный вопрос здесь

Answer 5

Вы можете создать динамический CSS с PHP или подобным. Вот пример 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

Answer 6

Простым решением было бы применить класс или идентификатор к тегу body в HTML в зависимости от их локали. Затем в таблице стилей вы можете сделать что-то вроде:

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

не уверен, но у вас может быть что-то вроде этого,

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; }

, где последнее слово после __ (подчеркивание без слов) будет добавлено динамически

как

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