Dynamic CSS with a variable parameter? (is it possible?)

Question

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?

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 */
}

Snippet of HTML in question

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

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

Just Jake · Accepted Answer · 2011-02-18 05:42:13Z

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

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

Then in your 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 */

or just set the width directly with jQuery:

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

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 */
}

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

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" />

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

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.

Sotiris · Accepted Answer · 2011-02-17 12:45:50Z

6

have you tried LESS?

LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions. LESS runs on both the client-side (IE 6+, Webkit, Firefox) and server-side, with Node.js.

answered Feb 17, 2011 at 12:45

Sotiris

40.2k11 gold badges55 silver badges86 bronze badges

Comments

kapa · Accepted Answer · 2011-02-17 12:47:22Z

2

It is not possible with simple CSS.

But for this specific example, you might look at the display: table-cell; property.

answered Feb 17, 2011 at 12:47

kapa

78.9k21 gold badges166 silver badges178 bronze badges

Collectives™ on Stack Overflow

Dynamic CSS with a variable parameter? (is it possible?)

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related