Heritage entre classes ?

Bonjour,

J'aimerais faire quelque chose comme ceci :

.test1{color:red}
.test2{font-size:12px}

/* ...test3 recupère les proprietes de test1 et test2... */
.test3 = .test1 + .test2

Si c'est possible, alors c'est magique, mais.. je n'arrives pas à trouver la moindre doc là dessus

Merci d'avance,
Nicolas.

Salut,

<p class="test1 test2">Du contenu.</p>

C'est magique !

Bonjour,

En CSS impossible de faire comme tu l'indiques.
Par contre rien ne t'empêche d'attribuer plusieurs classes à un objet.
Il suffit de les séparer par une espace.

Exemple :

<p class="test1 test2">Test du texte</p>

Heyoan a été plus rapide que moi.

Justement, je connaissais cette méthode, mais elle ne me convient pas

tant pis si ca n'est pas possible

Anonymus a écrit :
Justement, je connaissais cette méthode, mais elle ne me convient pas

Alors sois plus précis : quel est ton besoin ? quelles sont tes contraintes ?

Tu veux créer des classes à la volée ? Quelle utilité souhaites-tu en faire exactement ?

Pourrais tu expliquer ce qui ne te conviens pas dans cette méthode et l'utilisation exacte de ce que tu comptes faire.

Pour prendre un exemple trivial :

je définis 2 couleurs :
.rouge{color:red}
.bleu{color:blue}

dans le code, je vais mettre :
<p class=bleu>

Si le client change d'avis et veut un bleu 'plus foncé', ca donnera ca
.bleu{#008080}

Oui, mais pas partout...
Ca donnera donc ca :

.bleu{color:blue}
.bleufonce{color:#008080}

<p class=bleufonce>..

Au final, pour un client qui change 'régulièrement' d'avis (et qui se fiche des problèmes de css ), je me retrouve à changer régulièrement les sélecteurs, avec les effets de bord qui vont avec.

Un autre exemple :

les titres sont 'gros' :

h1{font-size:24px}

<h1>gros texte

sauf sur telle page..
moyen{font-size:12px}

<h1 class=moyen>..

et sur telle autre page..

Au final, je me retrouve ::
- soit à définir autant de classes qu'il y a de propriétés css (enfin.. presque quoi)
- soit à définir tous les d'éléments dans les css, et pour chaque ne pas prendre en compte l'héritage.

L'autre raison que j'aimerais coupler la génération des css avec la génération des pages, via zend. mais c'est une autre histoire..

Ben si c'est pas le même bleu partout il faut bien 2 classes différentes non ?

Mais si tu veux garder une seule classe et ne pas avoir d'effets de bord il suffit d'affecter un id sur le body de chaque page (ça doit pouvoir s'automatiser en php) et de faire des sélecteurs du style

.bleu{color:blue}
#idpage .bleu{color:#008080}

En allant un peu plus loin tu pourrais même avoir une css générale et en partie back-office permettre de modifier cette apparence générale pour chaque page : alimentation en base et génération css à la volée...
Modifié par Heyoan (07 Apr 2010 - 12:42)

En fait, au lieu d'avoir dans le html ce genre de truc pas beau ::

<p class="couleur taille type truc machin etc.."

j'aimerais autant déporter au maximum dans les feuilles css.

mais du coup, je me retrouve avec soit des classes soit des selecteurs à rallonge.

Heyoan a écrit :
Ben si c'est pas le même bleu partout il faut bien 2 classes différentes non ?

oui, sauf que l'on retrouve la même couleur pour un autre sélecteur : les <a> par exemple.
donc j'ai soit la même couleur dupliquee dans le html, soit dupliquée dans les css.

Anonymus a écrit :

oui, sauf que l'on retrouve la même couleur pour un autre sélecteur : les <a> par exemple.
donc j'ai soit la même couleur dupliquee dans le html, soit dupliquée dans les css.

Non, pas forcément.
Il suffit de définir les liens une seule fois sans préciser l'identifiant :

a, .bleu{color:blue} 
#idpage .bleu{color:#008080}

Les liens auront la même couleur que les éléments de class .bleu
Et les éléments de class .bleu de la page #idpage seront bleu foncé
Modifié par Corinne S. (07 Apr 2010 - 13:00)

:/
Je ne suis pas sûr que ca me convienne..
je vais revenir avec un vrai exemple concret pour voir ce que ca donne
( a moins que ca ne marche comme ca )

Merci beaucoup en tout cas

Salut,
Un truc dans ce style ?
http://lesscss.org/

<edit> suppression de ma solution, c'est nimp' ... </edit>

En survolant le reste du sujet, je lis que le multiclasse c'est "pas beau" dans un code HTML. Gniii ? Que vient faire la "beauté" là-dedans ?
Trouve des points communs et des points de dissemblance au style de tous les éléments de tes pages web, use de la cascade CSS, factorise ou développe ton code mais laisse de côté la beauté ou alors donnes-en une définition un minimum objective.
Modifié par Felipe (09 Apr 2010 - 19:10)

Deux réponses identiques à deux minutes d'intervalle, c'est magique ! Réponses qui apportent exactement la solution au problème posé de prime abord (voir Heyoan et MaxWeb plus haut).
Ensuite la question change d'orientation, il ne s'agit plus de cumuler le résultat de deux classes .test3 = .test1 + .test2 comme demandé mais plutôt de changer au gré de la visite. Je ne vois qu'un remède à cette histoire, le CSS dynamique comme le proposent 'Corinne S' et 'Heyoan' :

1/ Soit : 99% du css est dans une feuille de style externe et seulement quelques détails sont changés dans la balise <style> de la page elle même.

2/ Soit : la feuille de style comprend un grand nombre de cas de figure et c'est seulement l'ID du <body> qui est changée.

Ces deux cas similaires relèvent de PHP et du style à la volée. Je ne sais pas trop pour quelle solution je pencherais. La première, je crois.