CSS dynamique avec un paramètre de variable? (est-ce possible?)

Je suis en train de créer un système de menu, qui est dynamiquement redimensionne horizontalement à remplir en fonction du nombre de "li" les inscriptions qui y sont, je suis de créer dynamiquement des pages web avec XSLT. Mes pensées sont de savoir si c'est possible todo dans le CSS?

Voici mon CSS spécialement pour la page HTML

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

Extrait de code HTML en 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>

Mes pensées sont de si quelque chose comme cela serait possible d'appeler le CSS avec un paramètre, ou vais-je contre elle déclaratif de moyens?;

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

OriginalL'auteur wonea | 2011-02-17

css html5

20

CSS n'est pas un langage de programmation. CSS3 a un peu de logique ici ou là, mais pas de switch().

Pour vos besoins, la solution la plus simple est de loin une touche de javascript, fourni ici en supposant que vous utilisez jQuery:
```
var $navLis = $('nav[role=navigation] > ul > *');
$navLis.addClass('count'+$navLis.length);  //add a class to every li indicating 
                                           //total number of list items
```
Puis dans votre 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 */
```
ou tout simplement régler la largeur directement avec jQuery:
```
$navLis.style('width', (100/$navLis.length)+'%');
```
Si vous demande pur CSS, puis sortir de votre logique chapeau et regarder par-dessus la Des sélecteurs CSS3 spécification. Vous pouvez construire des Byzantins et plutôt fragile code CSS pour de faux logique, comme le sélecteur suivant.
```
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 vous utilisez un CMS qui sait combien d'articles il va mettre dans la liste, alors vous pouvez obtenir la fantaisie sur votre serveur principal par l'ajout d'un peu de PHP pour votre 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); ?>%;
}
```
Puis vous demande CSS/PHP script comme celui-ci à partir de votre code HTML:
```
<link rel="stylesheet" type="text/css" href="/path/to/style.php?navcount=5" />
```
Il y a quelques grands outils pour l'écriture des feuilles de style qui mélange bien en CSS, et certains fournissent même le PHP implémentations de le faire de façon dynamique. La plus forte CSS droit est maintenant Sass, qui a exactement le genre de syntaxe que vous êtes à la recherche pour. Je vous recommande d'utiliser Sass par Compas, qui constitue un cadre pour Sass qui donne vraiment quelques dents. Vous pouvez analyser Sass en CSS à la volée en PHP à l'aide de phamlp

Bien que la Boussole (et Sass) sont des outils formidables, de les brancher à un projet existant pourrait être plus de problèmes que de sa valeur. Vous pourriez juste voulez faire simple logique à l'aide de Javascript.

Très complet, post, merci!

OriginalL'auteur
6

avez-vous essayé MOINS?

MOINS étend CSS avec le comportement dynamique
comme les variables, mixin, les opérations de
et les fonctions. MOINS de points sur le
côté client (IE 6+, Webkit, Firefox)
et côté serveur, avec Node.js.

OriginalL'auteur
2

Il n'est pas possible avec de simples feuilles de style CSS.

Mais pour cet exemple précis, vous pourriez regarder la display: table-cell; propriété.

OriginalL'auteur

Vous devez vous connecter pour publier un commentaire.