带有可变参数的动态CSS？(可能吗？)

Question

我正在尝试创建一个菜单系统,它根据有多少"li"条目动态调整自身水平以填充,我正在使用XSLT动态创建网页.我的想法是这是否可以在CSS中使用？

这是我专门针对HTML页面的CSS

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

Answer 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); ?>%;
}

然后从HTML中请求这样的CSS/PHP脚本:

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

有一些很棒的工具用于编写样式表,可以很好地混合到CSS中,有些甚至提供PHP实现动态地完成.现在最强大的CSS扩展是Sass,它具有您正在寻找的那种语法.我建议通过Compass使用Sass ,这是一个Sass的框架,真的给了它一些牙齿.您可以使用phamlp在PHP中即时解析Sass到CSS中

虽然Compass(和Sass)是很棒的工具,但将它们插入现有项目可能比它的价值更麻烦.你可能只想用Javascript做简单的逻辑.

Answer 2

你试过LESS吗？

LESS通过动态行为扩展CSS,例如变量,mixins,操作和函数.LESS在客户端(IE 6 +,Webkit,Firefox)和服务器端运行,使用Node.js.