CSS dinámico con un parámetro de variable? (¿es posible?)

Question

Estoy tratando de crear un sistema de menú, que se redimensiona dinámicamente de forma horizontal para completar dependiendo de cuántas entradas "li" hay, estoy creando dinámicamente las páginas web con XSLT. ¿Mi opinión es si esto es posible todo dentro de CSS?

Aquí está mi CSS específicamente para la página HTML

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

fragmento de código HTML en cuestión

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

Mis pensamientos son de si algo como esto sería posible llamar a la CSS con un parámetro, ¿o voy en contra de sus modos declarativos ?;

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

Answer 1

CSS no es un lenguaje de programación. CSS3 tiene un poco de lógica aquí o allá, pero no switch().

para sus propósitos, la solución más sencilla, con mucho, es un toque de JavaScript, suministrados aquí suponiendo que se utiliza jQuery:

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

Luego, en el 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 */ 

o simplemente establecer el ancho directamente con jQuery:

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

Si demanda CSS puro, luego saca tu sombrero de lógica y mira el CSS3 selectors specification. Puede construir un código CSS bizantino y bastante frágil para la lógica falsa, como el siguiente 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 */ 
} 

Si está utilizando un CMS que sabe el número de elementos que se va a poner en la lista, entonces se puede obtener de lujo en su base de servidor mediante la adición de pequeños trozos de PHP para el 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); ?>%; 
} 

a continuación, solicitar el guión CSS/PHP como esta de su HTML:

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

hay algunas grandes herramientas que hay para hojas de estilo de escritura que se mezclan abajo muy bien en CSS, y algunos incluso ofrecen PHP i implementaciones para hacerlo de forma dinámica. La extensión de CSS más fuerte en este momento es Sass, que tiene el tipo de sintaxis que está buscando.Recomiendo usar Sass a través del Compass, que es un marco para Sass que realmente le da algunos dientes. Puede analizar Sass en CSS sobre la marcha en PHP usando phamlp

Aunque Compass (y Sass) son herramientas geniales, conectarlas a un proyecto existente podría ser más problemático que su valor. Es posible que solo quiera hacer una lógica simple usando Javascript.

Answer 2

¿Has probado LESS?

MENOS extiende CSS con comportamiento dinámico tales como variables, mixins, operaciones y funciones. LESS se ejecuta en el lado del cliente (IE 6+, Webkit, Firefox) y en el lado del servidor, con Node.js.

Answer 3

No es posible con CSS simple.

Pero para este ejemplo específico, puede consultar la propiedad display: table-cell;.