Динамический CSS с переменным параметром? (Является ли это возможным?)

Я пытаюсь создать систему меню, которая динамически изменяет размер по горизонтали, чтобы заполнить в зависимости от количества записей "li", я динамически создаю веб-страницы с XSLT. Мои мысли о том, возможно ли это сделать в CSS?

Здесь мои CSS специально для HTML-страницы

nav[role="navigation"] li {
    float: left;
    width: 10.00%;  /* I want to dynamically set this width */
}

Рассматриваемый фрагмент HTML

<nav role="navigation" count="2"><?xml version="1.0" encoding="utf-8"?>
  <ul>
    <li>
      <a href="movies.html">Movies</a>
    </li>
    <li>
      <a href="news.html">News</a>
    </li>
  <ul>
</nav>

Мои мысли о том, можно ли вызвать CSS с помощью параметра, или я буду против него декларативными способами?

nav[role="navigation"] li param {
    float: left;
            switch(param)
            {
               case : 5
               {
          width: 20.00%;
               }
               case : 3
               {
          width: 33.33333%;
               }
            }
}

Ответ 1

CSS не является языком программирования. CSS3 имеет немного логики здесь или там, но не switch().

Для ваших целей самым простым решением является прикосновение javascript, предоставленное здесь, предполагая, что вы используете jQuery:

var $navLis = $('nav[role=navigation] > ul > *');
$navLis.addClass('count'+$navLis.length);  // add a class to every li indicating 
                                           // total number of list items

Затем в вашем CSS:

nav[role=navigation] li { /* default styling & width */ }
nav[role=navigation] li.count2 { /* your conditional styling */ }
nav[role=navigation] li.count5 { /* your conditional styling */ }
/* etc */

или просто установите ширину непосредственно с помощью jQuery:

$navLis.style('width', (100/$navLis.length)+'%');

Если вы требуете чистого CSS, тогда вытащите свою логическую шляпу и посмотрите спецификацию селекторов CSS3. Вы можете построить некоторый византийский и довольно хрупкий CSS-код для поддельной логики, например, следующий селектор.

nav[role=navigation] li:first-child + nav[role=navigation] li:last-child {
  /* matches last of two items if a list has only two items */
}

Если вы используете CMS, который знает, сколько элементов он будет помещать в список, тогда вы можете получить фантазию на своем сервере, добавив в свой CSS немного бит PHP:

<?php header('Content-type: text/css'); 
  if (isset($_GET['navcount']) && $_GET['navcount'] != "") {
    $navcount = $_GET['navcount'];
  } else { $navcount = 5.0; } // Default value
?>
/* ... your css code here... */
nav[role="navigation"] li {
  float: left;
  width: <?php echo (100.0/$navcount); ?>%;
}

Затем вы запрашиваете CSS/PHP script, как это, из вашего HTML:

<link rel="stylesheet" type="text/css" href="/path/to/style.php?navcount=5" />

Там есть несколько отличных инструментов для написания таблиц стилей, которые хорошо смешиваются с CSS, а некоторые даже предоставляют реализации PHP для этого динамически. Самое сильное расширение CSS сейчас Sass, которое имеет только тот тип синтаксиса, который вы ищете. Я бы рекомендовал использовать Sass через Compass, который является основой для Sass, которая действительно придает ему некоторые зубы. Вы можете анализировать Sass в CSS на лету в PHP, используя phamlp

Хотя Compass (и Sass) являются прекрасными инструментами, включение их в существующий проект может быть более сложным, чем его ценность. Вы можете просто использовать простую логику с помощью Javascript.

Ответ 2

Вы пробовали LESS?

LESS расширяет CSS с динамическим поведением такие как переменные, миксины, операции и функций. LESS работает как на клиентская сторона (IE 6+, Webkit, Firefox) и на стороне сервера, с Node.js.

Ответ 3

Это невозможно с помощью простого CSS.

Но для этого конкретного примера вы можете посмотреть свойство display: table-cell;.