Discussion :

[boyere]

Bonjour

savez vous s'il est possible de définir des sortes de classes mères qui regrouperaient les attributs d'autres classes. Le but étant d'alléger le code.

Exemple :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<input type="button" class="classe1 classe2 classe3">

serait il possible de le réduire en :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<input type="button" class="masuperclasse">

et si oui comment définir masuperclasse pour qu'elle représente en fait le cumul des propriétés des classe 1, 2 et 3 ?

Merci de votre aide, ca parrait tout bête mais je ne trouve pas.
Cordialement

[Bovino]

Non, ce type d'héritage n'existe pas en CSS.
En revanche, tu peux faire un truc du genre

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
.classe1, .masuperclasse{ ... }
.classe2, .masuperclasse{ ... }
.classe3, .masuperclasse{ ... }

ce qui reviendrait à peu près au même.

[boyere]

Oui c'est pas bête mais je ne peux pas modifier le fichier CSS ou sont définies mes classes 1, 2 et 3 (issues de jquery).

Les classes que je souhaite "regrouper sont pour info : ui-button ui-widget ui-state-default ui-corner-all"

[Bovino]

Bah dans ce cas, t'as pas trop de solution alors.
Ceci dit, dis-toi quand même que s'ils ont fragmenté les classes, c'est pas pour s'amuser à agacer les développeurs mais pour de bonnes raisons.
Quant au fait "d'alléger le code", ajouter plusieurs classes à un élément, ce n'est pas non plus ce qu'il y a de plus lourd.

[boyere]

OK merci de ton aide ... je vais me trainer les 4 classes sur chaque bouton, c'est pas bien grave.

J'aime bien factoriser

L'avantage est que si je veux changer de style pour mes boutons, je le changeais que dans ma feuille de style a un seul endroit ... et c'est un peu le but de ces feuilles .


La, je vais devoir fouiller dans tout le code, changer les classes ... avec évidemment le risque d'en oublier et de ne pas avoir un site "uniforme".

C'est étonnant que cela n'existe pas, cela vous parait adhérant comme besoin ?

[Bovino]

je ne peux pas modifier le fichier CSS ou sont définies mes classes 1, 2 et 3

L'avantage est que si je veux changer de style pour mes boutons, je le changeais que dans ma feuille de style a un seul endroit ...

[boyere]

mes boutons doivent avoir le style suivant :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<input type="button" class="ui-button ui-widget ui-state-default ui-corner-all">

si je veux changer le style de mes boutons par exemple pour qu'ils deviennent :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<input type="button" class="ui-button ui-widget ui-state-default">

je dois le changer partout dans mon code html.

Alors que si j'avais pu le factoriser dans une seule classe que je défini dans une feuille de style qui m'appartient (exemple macss.css), j'aurais un truc magique du type:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
.masuperclasse {
.ui-button;
.ui-widget;
.ui-state-default;
.ui-corner-all;
}

et mon code html deviendrait :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<input type="button" class="masuperclasse">

Ainsi si je veux changer le style de mes boutons, je ne dois changer que le contenu du fichier mcss.css (si bien sur j'ai bien mis partout dans mon code que les boutons étaient de classe masuperclasse).

[Baptiste457]

Tu peux très bien rassembler toutes les caractéristiques des classes suivantes:

ui-button
ui-widget
ui-state-default

en une classe appelée masuperclasse qui serait

.masuperclasse {

(le contenu des classes énumérées plus haut, en virant les doublons)

}

Pour cela, il faut trouver

.ui-button { ...
.ui-widget { ...
.ui-state-default { ...

dans ton fichier css, copier toutes leurs propriétés, les trier pour ne garder qu'une de chaque, puis copier ce "bloc" dans les crochets de .superclasse

puis, tu pourras appeler ta classe en utilisant

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<input type="button" class="masuperclasse">

[boyere]

Oui j'y ai bien sur pensé mais si le contenu de ces classes change apres une mise a jour de mon framework, je devrai mettre a jour moi aussi ma superclasse alors que si j'utilise les leurs directement, je n'ai rien à faire ...

Bref je vois que ce n'est pas possible, c'est dommage...
Bonne continuation a tous

[Baptiste457]

Hmm je vois.. Tu veux le beurre et l'argent du beurre

Bon, après, Dreamweaver permet de chercher et remplacer des bouts de code dans des documents qui ne sont pas ouverts... Connais-tu cela?

Tu peux lui dire

Chaque fois que tu trouves ce bout de code, remplace-moi

class="classe1 classe2 classe3"

en

class="masuperclasse"

en lui disant dans quel dossier aller "fouiller". Cela permet de gagner du temps et de ne pas tout modifier manuellement... Par contre si tu testes cela backup tes documents avant, car cela va remplacer TOUTES les occurences..

Est-ce que cela est une piste?

Bon courage!

[boyere]

Oui c'est aussi une solution ... mais on fait juste "au mieux" ...

On peut considérer le sujet comme résolu, je vais me débrouiller en bidouillant ...

merci