Можно ли использовать строковые макросы в CSS? - PullRequest
Новая
       10

Можно ли использовать строковые макросы в CSS?

3 голосов
/ 11 мая 2009

Есть часть моего веб-сайта, где я использую флаг страны в качестве значка для элемента списка.

Например, у меня есть: 

<ul>
  <li id="at">Austria</li>
  <li id="de">Germany</li>
</ul>

Прилагаемый CSS выглядит следующим образом: 

#at {
  list-style-image: url('at.png');
}
#de {
  list-style-image: url('de.png');
}

Можно ли заменить это макросом, чтобы мне не нужно было переопределять CSS для каждой страны? Что-то вроде макроса в стиле C было бы здорово, но я не уверен, поддерживает ли CSS такие вещи.

е 

#_country {
  list-style_image: url('_country.png');
}

Ответы [ 6 ]

7 голосов
/ 11 мая 2009

Сам по себе CSS этого не делает, но вы всегда можете использовать CSS из сценария PHP или аналогичного, выполняя обработку на стороне сервера макросов для генерации отдельных правил из списка стран.

1 голос
/ 11 мая 2009

Краткий ответ: Нет.

Более длинный ответ: Вы не должны полагаться на JavaScript для такой функции, так как не у всех включен JavaScript, и это все равно, что разбить муху на колесе ...

За исключением генерации с помощью PHP, Perl, Python (в режиме реального времени на стороне сервера или только один раз на вашем компьютере и сохраните файл как * .css) или чего-то еще, что вы ничего не можете сделать, чтобы избавить вас от хлопот копирования / вставить эти 3 строки и изменить их для каждой страны.

Так что, просто делай это надоедливым способом;) Если это всего лишь три строки, думаю, ваш список будет составлен очень быстро.

1 голос
/ 11 мая 2009

Поскольку у самого CSS нет макросистемы, вам всегда нужно явно писать все правила. Следовательно, вы можете выбрать решение на стороне сервера (которое добавляет дополнительную нагрузку на загрузку) или, используя средства макросов или фрагментов вашего текстового редактора, вы можете легко сгенерировать правила самостоятельно.

Интересно было бы, если бы в CSS была поддержка конкатенации строк и функция attr() для использования вне свойства content, чтобы кто-то мог написать: 

.languages {
    background-image: attr(id) ".jpg";
}
0 голосов
/ 11 мая 2009

Хотя генерирование стороны сервера CSS в скрипте является опцией. Я предпочитаю простой JavaScript здесь.

Некоторые комментаторы отмечают, что если JS недоступен, то пользователи не будут видеть флаги .... но что еще не будет работать, если js отключен - почти на каждом веб-сайте '2.0'! 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Untitled Page</title>
  <script type="text/javascript">

     function initFlags() {

      var flagListItems = document.getElementsByTagName("li");

      for (var i = 0; i < flagListItems.length;  i++ )
      {
         var li = flagListItems[i];

        // use any prop you want to build the url - i used an expando one
        // just because i thought it made the code more readable.


        var f = li.getAttribute("flag");

        if (f == "" || f == null)  continue;

        li.style.listStyleImage = 'url(' + f + '.png)';

       }

    </script>
    </head>
    <body onload="initFlags()">
      <ul>
        <li id="at" flag="au">Austria</li>
        <li id="de" flag="de">Germany</li>
      </ul>
    </body>
</html>
0 голосов
/ 11 мая 2009

Нет, вы не можете сделать это простым CSS, потому что язык CSS не имеет управляющих структур или чего-то подобного, что позволит вам динамически генерировать код CSS.

Вместо этого вы можете использовать решение javascript, как указал Андрей, или решение, основанное на переменных CSS , закодированных в PHP.

0 голосов
/ 11 мая 2009

Одно из возможных решений: 

<!-- our lovely list-style-image function -->
<script>
  function set_list_country(list, country) {
    list.style.list-style-image = 'url("'+country+'.png")';
  }
</script>

<!-- country list -->
<ul>
  <li id="at">Austria</li>
  <li id="de">Germany</li>
</ul>

<!-- country list styling -->
<!-- note: this goes below your list, or else create onload function -->
<script>
  set_list_country(document.getElementById('at'), 'at');
  set_list_country(document.getElementById('de'), 'de');
</script>

Привет.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...