带有可变参数的动态CSS？ （可能吗？） [英] Dynamic CSS with a variable parameter? (is it possible?)

问题描述

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

I'm trying to create a menu system, which is dynamically resizes itself horizontally to fill out depending on how many "li" entries there are, I'm dynamically creating the webpages with XSLT. My thoughts are whether this is possible todo within CSS?

这是专门用于HTML页面的CSS

Here's my CSS specifically for the HTML page

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，或者我是我反对它的声明方式？;

My thoughts are of whether something like this would be possible to call the CSS with a parameter, or am I going against it's declarative ways?;

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

推荐答案

CSS不是一种编程语言。 CSS3在这里或那里有一些逻辑，但是没有 switch（）。

CSS is not a programming language. CSS3 has a bit of logic here or there, but no switch().

为了您的目的，最简单的解决方案到目前为止是一点javascript，假设你使用jQuery提供：

For your purposes, the simplest solution by far is a touch of javascript, supplied here assuming that you use 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设置宽度：

or just set the width directly with jQuery:

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

如果你要求纯CSS，那么拿出你的逻辑帽子看看通过 CSS3选择器规范。您可以构造一些拜占庭和相当脆弱的CSS代码来伪造逻辑，例如以下选择器。

If you demand pure CSS, then get out your logic hat and look over the CSS3 selectors specification. You can construct some Byzantine and rather brittle CSS code to fake logic, such as the following selector.

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：

If you're using a CMS that knows how many items it is going to be putting in the list, then you can get fancy on your server backend by adding little bits of PHP to your CSS:

<?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脚本：

Then you request the CSS/PHP script like this from your HTML:

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

有一些很棒的工具可以编写样式表，可以很好地融入CSS，有些甚至提供PHP实现动态地这样做。目前最强大的CSS扩展是 Sass ，它具有您正在寻找的那种语法。我建议通过指南针使用Sass，这是Sass的一个框架，真的给了它一些牙齿。您可以使用 phamlp

There's a few great tools out there for writing stylesheets that mix down nicely into CSS, and some even provide PHP implementations to do so dynamically. The strongest CSS extension right now is Sass, which has just the sort of syntax that you're looking for. I'd recommend using Sass through Compass, which is a framework for Sass that really gives it some teeth. You can parse Sass into CSS on-the-fly in PHP using phamlp

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

Although Compass (and Sass) are awesome tools, plugging them into an existing project could be more trouble than its worth. You might just want to do simple logic using Javascript.

这篇关于带有可变参数的动态CSS？ （可能吗？）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！