Peut-on définir des constantes en CSS ?

Version imprimable

26/02/2008, 11h59
JeanMarc_T2k

Peut-on définir des constantes en CSS ?

Bonjour,

Ma question est contenue dans le titre : peut-on définir des constantes en CSS ?

J'explique ce que je veux faire :
J'ai choisi pour mon site internet 3 couleurs de base, une pour la couleur de fond de la fenêtre, et deux pour des polices de caractères, un texte principal, et un texte secondaire.

Or il se trouve que le nombre de styles est beaucoup plus important que 3 éléments, par exemple lorsqu'on définit un menu :
menu, menu a, menu a:link, menu a:visited, etc....

A chaque fois, on retrouve une définition de police, donc avec une couleur, plus une couleur de fond.

Le changement de couleurs devient long.
Serait-il possible de définir mes couleurs en début de fichier CSS (par exemple couleur1=#FFFFFF, couleur2=#000000, couleur3=#9b9b9b), puis au lieu de définir les couleurs à chaque fois que nécessaire, indiquer couleur1, couleur2 ou couleur3 ?

D'avance merci de vos réponses.
26/02/2008, 13h52
Bisûnûrs

Non, ce n'est pas possible.

En revanche tu peux le faire en PHP.
26/02/2008, 14h59
Pierre Maurette

Bonjour,

Je suis utilisateur occasionnel et laborieux de CSS, et je suis content de lire la réponse de Bisûnûrs. J'en étais arrivé à la même conclusion.
Je me suis aperçu que j'avais une approche trop "programmeur" du CSS, en ce sens que je voulais pousser la centralisation à l'extrême. Ce n'est donc pas possible, mais ça pourrait à mon avis constituer une évolution majeure, puis que ça ne semble à priori pas trop compliqué. Je veux dire qu'introduire des constantes en tête de feuille de style et l'utilisation d'opérateurs basiques ne me semble pas casser l'édifice.
J'ai fait un truc - en PHP comme suggéré par Bisûnûrs - qui génère à la volée des feuilles de style. Ça marche. C'est quand même un peu compliqué, s'agissant de générer des pages HTML à partir de choix faits par l'utilisateur. J'ai d'ailleurs vu plein de trucs qui font ça en beaucoup plus puissant que ce que j'avais fait.
Dans le cadre de la question posée, on doit pouvoir à partir d'un template générer le .css en scriptant. Pour moi, ce serait sans doute du Python, pour d'autres les outils shell, ou simplement l'utilisation d'un bon éditeur.

Pierre
26/02/2008, 15h02
Bisûnûrs

Citation:

Envoyé par Pierre Maurette

C'est quand même un peu compliqué, s'agissant de générer des pages HTML à partir de choix faits par l'utilisateur.

Qu'entends-tu par la génération de pages HTML ?
A priori dans le cas énoncé ici, il suffirait juste d'utiliser le PHP pour l'utilisation de ses variables dans une feuille de style, pas de générer du code HTML.

Exact Bisûnûrs,

Je suis allé rechercher dans mes archives. Fondamentalement le PHP génère toujours du code HTML, mais effectivement je devais include-r ce truc-là entre des balises <style>:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
html {
overflow:auto;
}
.space {
position:relative;
width:100%;
z-index:1;
}
body {
margin:<?php echo $_SESSION['BODY']['MarginCalc']; ?>;
padding:0 0 0 0;
font-size:<?php echo $_SESSION['BODY']['FontSize']; ?>;
background-color:<?php echo $_SESSION['BODY']['Couleur']; ?>;
}
h1, h2 {
text-align:center;
}
.nom h1 {
font:<?php echo $_SESSION['NOM']['FontStyle'], ' ', $_SESSION['NOM']['FontSize'], ' ',$_SESSION['polices'][$_SESSION['NOM']['FontFamily']]; ?>;
color:<?php echo $_SESSION['NOM']['Color']; ?>;
letter-spacing:<?php echo $_SESSION['NOM']['LetterSpacing']; ?>;
line-height:<?php echo $_SESSION['NOM']['LineHeight']; ?>;
}
.intit h1 {
font:<?php echo $_SESSION['INTITULE']['FontStyle'], ' ', $_SESSION['INTITULE']['FontSize'], ' ',$_SESSION['polices'][$_SESSION['INTITULE']['FontFamily']]; ?>;
color:<?php echo $_SESSION['INTITULE']['Color']; ?>;
letter-spacing:<?php echo $_SESSION['INTITULE']['LetterSpacing']; ?>;
line-height:<?php echo $_SESSION['INTITULE']['LineHeight']; ?>;
margin-top:<?php echo $_SESSION['INTITULE']['MarginTop']; ?>;
}
.sousintit h2 {
font:<?php echo $_SESSION['SOUS-INTITULE']['FontStyle'], ' ', $_SESSION['SOUS-INTITULE']['FontSize'], ' ',$_SESSION['polices'][$_SESSION['SOUS-INTITULE']['FontFamily']]; ?>;
color:<?php echo $_SESSION['SOUS-INTITULE']['Color']; ?>;
letter-spacing:<?php echo $_SESSION['SOUS-INTITULE']['LetterSpacing']; ?>;
line-height:<?php echo $_SESSION['SOUS-INTITULE']['LineHeight']; ?>;
}
.siteglobal {
width:<?php echo $_SESSION['SITEGLOBAL']['LargeurCalc']; ?>px;
margin:<?php echo $_SESSION['SITEGLOBAL']['MarginCalc']; ?>;
padding:<?php echo $_SESSION['SITEGLOBAL']['Padding']; ?>px;
border:<?php echo $_SESSION['SITEGLOBAL']['BorderCalc']; ?>;
background-color:<?php echo $_SESSION['SITEGLOBAL']['Couleur']; ?>;
}
.entete {
position:relative;
width:100%;
height:<?php echo $_SESSION['ENTETE']['Hauteur']; ?>px;
z-index:0;
border:<?php echo $_SESSION['ENTETE']['Border']; ?>;
background-color:<?php echo $_SESSION['ENTETE']['Couleur']; ?>;
}
.titres {
position:relative;
left:0px;
height:1%; /* bug IE */
margin:0;
padding:0;
border:<?php echo $_SESSION['TITRES']['Border']; ?>;
background-color:<?php echo $_SESSION['TITRES']['Couleur']; ?>;
}
.rubrique {
position:relative;
left:0px;
height:1%; /* bug IE */
margin:0;
padding:<?php echo $_SESSION['RUBRIQUE']['Padding']; ?>px;
border:<?php echo $_SESSION['RUBRIQUE']['Border']; ?>;
background-color:<?php echo $_SESSION['RUBRIQUE']['Couleur']; ?>;
}
.coord,
.photo {
position:absolute;
}
.photo{
float:right;
right:<?php echo $_SESSION['ENTETE']['Padding']; ?>px;
top:<?php echo $_SESSION['ENTETE']['Padding']; ?>px;
z-index:3;
}
.coord {
text-align:left;
float:left;
left:<?php echo $_SESSION['ENTETE']['Padding']; ?>px;
top:<?php echo $_SESSION['ENTETE']['Padding']; ?>px;
z-index:2;
height:<?php echo $_SESSION['ENTETE']['Hauteur'] - (2 * $_SESSION['ENTETE']['Padding'])?>px;); ?>px;
}
.coord .adresse {
vertical-align:top;
font:<?php echo $_SESSION['ADRESSE']['FontStyle'], ' ', $_SESSION['ADRESSE']['FontSize'], ' ',$_SESSION['polices'][$_SESSION['ADRESSE']['FontFamily']]; ?>;
color:<?php echo $_SESSION['ADRESSE']['Color']; ?>;
letter-spacing:<?php echo $_SESSION['ADRESSE']['LetterSpacing']; ?>;
line-height:<?php echo $_SESSION['ADRESSE']['LineHeight']; ?>;
}
.coord .phone {
vertical-align:middle;
font:<?php echo $_SESSION['PHONE']['FontStyle'], ' ', $_SESSION['PHONE']['FontSize'], ' ',$_SESSION['polices'][$_SESSION['PHONE']['FontFamily']]; ?>;
color:<?php echo $_SESSION['PHONE']['Color']; ?>;
letter-spacing:<?php echo $_SESSION['PHONE']['LetterSpacing']; ?>;
line-height:<?php echo $_SESSION['PHONE']['LineHeight']; ?>;
}
.coord .mail {
vertical-align:bottom;
}
.coord a {
font:<?php echo $_SESSION['MAIL']['FontStyle'], ' ', $_SESSION['MAIL']['FontSize'], ' ',$_SESSION['polices'][$_SESSION['MAIL']['FontFamily']]; ?>;
color:<?php echo $_SESSION['MAIL']['Color']; ?>;
letter-spacing:<?php echo $_SESSION['MAIL']['LetterSpacing']; ?>;
text-decoration:<?php echo $_SESSION['MAIL']['TextDecoration']; ?>;
}
.rubrique .colprincipale {
font:<?php echo $_SESSION['TEXTE-RUB']['FontStyle'], ' ', $_SESSION['TEXTE-RUB']['FontSize'], ' ',$_SESSION['polices'][$_SESSION['TEXTE-RUB']['FontFamily']]; ?>;
color:<?php echo $_SESSION['TEXTE-RUB']['Color']; ?>;
letter-spacing:<?php echo $_SESSION['TEXTE-RUB']['LetterSpacing']; ?>;
line-height:<?php echo $_SESSION['TEXTE-RUB']['LineHeight']; ?>;
margin-left:<?php echo $_SESSION['RUBRIQUE']['LargeurTitres']; ?>;
}
.rubrique .colprincipale h5,
.rubrique .colprincipale h6 {
font:<?php echo $_SESSION['SOUS-TITRE-DANS-RUB']['FontStyle'], ' ', $_SESSION['SOUS-TITRE-DANS-RUB']['FontSize'], ' ',$_SESSION['polices'][$_SESSION['SOUS-TITRE-DANS-RUB']['FontFamily']]; ?>;
color:<?php echo $_SESSION['SOUS-TITRE-DANS-RUB']['Color']; ?>;
letter-spacing:<?php echo $_SESSION['SOUS-TITRE-DANS-RUB']['LetterSpacing']; ?>;
line-height:<?php echo $_SESSION['SOUS-TITRE-DANS-RUB']['LineHeight']; ?>;
text-decoration:<?php echo $_SESSION['SOUS-TITRE-DANS-RUB']['TextDecoration']; ?>;
margin:0;
}
.rubrique .colprincipale h5 {
margin-top:0.8em;
}
.rubrique .colprincipale p {
margin:0 0 0.5em 0;
}
.rubrique .coltitres {
position:absolute;
left:<?php echo $_SESSION['RUBRIQUE']['Padding']; ?>px;
width:<?php echo $_SESSION['RUBRIQUE']['LargeurTitres']; ?>;
}
.rubrique .coltitres h3 {
font:<?php echo $_SESSION['TITRES-RUB']['FontStyle'], ' ', $_SESSION['TITRES-RUB']['FontSize'], ' ',$_SESSION['polices'][$_SESSION['TITRES-RUB']['FontFamily']]; ?>;
color:<?php echo $_SESSION['TITRES-RUB']['Color']; ?>;
letter-spacing:<?php echo $_SESSION['TITRES-RUB']['LetterSpacing']; ?>;
line-height:<?php echo $_SESSION['TITRES-RUB']['LineHeight']; ?>;
text-decoration:<?php echo $_SESSION['TITRES-RUB']['TextDecoration']; ?>;
margin:0;
}

Pierre

26/02/2008, 15h49
JeanMarc_T2k

Bon, c'est bien dommage.... Je ne vais pas me lancer dans du PHP, uniquement pour éviter d'oublier de changer une couleur quelque part. En principe, ça devrait se voir en testant le site !

Merci de vos réponses
26/02/2008, 17h53
franculo_caoulene

Salut,

Je reviens là-dessus malgré le tag Résolu. Les couleurs que tu définis, sont-elles toujours aux mêmes endroit. Je m'explique, si tu as du texte blanc et si tu changes de couleur, est-ce que tout le texte blanc passera à gris par exemple? Si oui, pourquoi ne pas définir une classe du genre

Code:

.couleur1 {color:#ffffff;}

Ensuite partout dans tes pages html tu places cette classe comme par exemple :

Code:

<p class="corp couleur1">

Quelque part ça reprend le principe de constante, non?
27/02/2008, 01h41
12monkeys
Hello,

Je sais ça s'éloigne un peu de la programmation : mais il faut aussi s'aider des outils adaptés, en utilisant Notepad++ par exemple (ou tout autre éditeur de texte adapté) et la fonction Rechercher/Remplacer cela se fait en 3 gestes :
- copier le code à remplacer dans l'éditeur de Recherche/Remplacer
- remplir le code qui doit remplacer le précédent
- cliquer sur remplacer tout...
Voilà, je dois dire que ça a été une grande simplification quand j'ai découvert Notepad++ et je ne m'en passerais plus...
27/02/2008, 08h39
JeanMarc_T2k

Bonjour,

En réponse à 12monkeys :
Oui en effet, faire une recherche/remplacer est une bonne solution pour ne rien oublier. Mais c'est peu satisfaisant pour un programmeur...

En réponse à franculo_caoulene :
Ta solution, j'y ai pensé. Cependant, elle alourdit le code HTML. Je préfère encore changer mes constantes dans le CSS.

Merci tout de même de ces suggestions.

A vous de voir, Jean-Marc, mais personnellement je considère qu'à partir du moment où on tape un peu de code, il est utile d'investir quelques heures dans la maîtrise d'un langage de script. Je suis venu sur le tard à Linux, et malgré un Cygwin dans le path de mon Wondows, je ne suis pas à l'aise avec les puissantes commandes du shell et les éditeurs genre Emacs. J'ai donc choisi Python, ce qui n'est peut-être pas le meilleur choix, mais permet également de faire des plugins pour OOo, Nautilus, et quelques autres.
Comme votre problème m'intéressait, j'ai fait rapidement ça: on entoure le code à traiter dans des commentaires spécifiques:
Code:

1 2 3 4 5 6 7 8 9 10 11 #header { background-color: /*orig1*/#CCFFCC/**/; } .sidebar { background-color: /*1*/#CCFFCC/**/; } #footer { background-color: /*1*/#CCFFCC/**/; }
Bien entendu, même chose pour 2, 3, etc. On peut simplifier en se passant de la "balise" de fin /**/, le ; remplissant ce rôle. Ensuite, on modifie la valeur correspondant à /*origX*/ et on fait tourner ça:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 # coding: utf-8 FILENAME = './style.css' FIN = '/**/' i = 0 goodtosave = False lines = open(FILENAME, 'rb').readlines() open(FILENAME + '.bup', 'wb').writelines(lines) while 1: i += 1 fini = True s = '/*orig' + str(i) + '*/' origs = [] for line in lines: a = line.split(s) if len(a) == 2: b = a[-1].split(FIN) if len(b) == 2: print 'trouvé ', b[0] origs.append(b[0]) if len(origs) == 0: print 'pas ou plus. ', i - 1, ' remplacement(s)' goodtosave = i > 1 break if len(origs) != 1: print 'trop: ', origs break s = '/*' + str(i) + '*/' for x in range(0, len(lines)): a = lines[x].split(s) if len(a) == 2: b = a[-1].split(FIN) if len(b) == 2: lines[x] = a[0] + s + origs[0] + FIN + b[-1] print x, lines[x] if goodtosave: print 'Change fichier' open(FILENAME, 'wb').writelines(lines)
C'est du code vite fait, pas pythonesque - ce serait le même mais qui tiendrait en une ligne totalement illisible - mais ça fait ce qu'on attend.
Attention, tel quel, si on fait 1, 2, 3 et qu'on enlève le 1, ça ne fait plus rien. Il faut au moins laisser le /*orig1*/, sans cible.
Je vais voir s'il est réaliste de faire la même chose en introduisant la notion de variable et d'opérations, l'équivalent de width=bodywidth - leftmargin par exemple.

27/02/2008, 16h36
JeanMarc_T2k

Heu Pierre Maurette, j'ai l'impression que ça part dans le délire du programmeur, du genre de ce pauvre trader de la société générale.....

Si j'ai bien compris, tout ce code, c'est pour effectuer ce que fait très bien la fonction Edition / Remplacer de n'importe quel éditeur, même le plus basique comme notepad.

Je n'avais pas pensé à la fonction Edition / remplacer, et elle me convient tout à fait. Je regrette que ceux qui ont inventé le CSS n'aient pas pensé à la définition de constantes. On va faire sans, jusqu'à ce qu'ils s'aperçoivent du côté pratique de la définition de constantes.
27/02/2008, 17h15
Pierre Maurette

Citation:

Envoyé par JeanMarc_T2k

Heu Pierre Maurette, j'ai l'impression que ça part dans le délire du programmeur, du genre de ce pauvre trader de la société générale.....

Si j'ai bien compris, tout ce code, c'est pour effectuer ce que fait très bien la fonction Edition / Remplacer de n'importe quel éditeur, même le plus basique comme notepad.

Vous n'avez justement pas compris. Le chercher / remplacer vous remplacera une chaîne partout y compris dans des Class ou des ID qui ne sont pas censée suivre le groupe. Dans la mesure où à priori vous aller partir avec couleur0, puis faire des rechercher couleurA / remplacer par couleurB, et ainsi de suite, je ne sais pas si vous imaginez le bordel. Vous pourriez éventuellement créer un .css inutilisable avec des zorglub1, zorglub2, etc. pour chaque groupe, faire des rechercher / remplacer, sauver sous le bon nom, recharger le fichier avec les zorglubX, and so on.
Le truc sans prétention que je vous ai montré m'a pris une petite demi-heure de codage, et je l'ai utilisé dès cette après-midi pour choisir ma charte de couleurs. J'ajoute que le balisage /*1*/.../**/ est compatible avec par exemple la saisie assistée dans Dreamweaver. J'ai une fenêtre de lancement du Python en une frappe - ou en outil dans PSPad par exemple -, je modifie la couleur dans le /*origX*/.../**/ avec le color-picker de mon choix, ou dans Dreamweaver, un coup de Python, Ctrl-s et F12 pour tester.
En tout cas je vous remercie de m'avoir "suggéré" de m'y mettre, bien que si ça se trouve ça existait déjà quelque part, peut-être même dans un programme qui est sur ma machine.

Citation:

Je n'avais pas pensé à la fonction Edition / remplacer, et elle me convient tout à fait. Je regrette que ceux qui ont inventé le CSS n'aient pas pensé à la définition de constantes. On va faire sans, jusqu'à ce qu'ils s'aperçoivent du côté pratique de la définition de constantes.

Le fait de ne pas avoir pensé au rechercher / remplacer, puis de ne pas en avoir vu les limitations, et d'avoir encore moins pensé à l'éventualité d'un rechercher / remplacer intelligent - refactoring - vous disqualifie pour critiquer "ceux qui ont inventé le CSS".
27/02/2008, 17h32
JeanMarc_T2k

Eh bien tant mieux !

En général, la fonction remplacer dans un éditeur de texte permet soit de remplacer tout, soit de proposer un après l'autre les changements.
29/02/2008, 13h07
Pierre Maurette
Citation:

Envoyé par JeanMarc_T2k

J'explique ce que je veux faire :
J'ai choisi pour mon site internet 3 couleurs de base, une pour la couleur de fond de la fenêtre, et deux pour des polices de caractères, un texte principal, et un texte secondaire.

Or il se trouve que le nombre de styles est beaucoup plus important que 3 éléments, par exemple lorsqu'on définit un menu :
menu, menu a, menu a:link, menu a:visited, etc....

A chaque fois, on retrouve une définition de police, donc avec une couleur, plus une couleur de fond.

Le changement de couleurs devient long.

Je relis par hasard votre message, et il y a quelque chose que décidément je ne comprends pas. Je pensais en première lecture que c'était à cause de ma connaissance trop superficielle des CSS, mais j'ai quand même un doute.
Pourquoi ne procédez-vous pas selon la méthode suivante ? , qui me paraît classique: vous définissez vos styles sans les valeurs que vous voulez lier à d'autres styles, ou alors vous les redéfinirez plus bas, puis pour chaque propriété liée vous regroupez les styles concernés de l façon suivante:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 a , a:active , a:focus , a:hover , a:link , a:visited , h1 , h2 , #style1 { color: #00CC33; }
29/02/2008, 14h30
JeanMarc_T2k

Citation:

Je relis par hasard votre message, et il y a quelque chose que décidément je ne comprends pas. Je pensais en première lecture que c'était à cause de ma connaissance trop superficielle des CSS, mais j'ai quand même un doute.

Bien modestement, c'est plutot dû à ma connaissance trop superficielle des CSS. Je suis autodidacte en la matière, et malgré l'excellence des tutoriels et FAQ sur ce site, je n'ai pas toute la connaissance qu'on peut avoir lorsqu'on prend des cours.....

J'ignorais donc cette possibilité de définir des styles en plusieurs étapes.

Si je comprends bien votre idée, je ferais dans un premier temps une "liste" de mes styles ayant la couleur 1, puis des styles ayant la couleur 2, etc...
Ensuite, dans un deuxième temps, je définis les autres éléments de chaque style, sans inclure la couleur, qui est déjà définie .

Ainsi, on se retrouve avec un style complètement défini ?
Si ça marche, c'est une bonne nouvelle, car ça revient à définir des constantes ! De plus, si je décide que tel style doit passer de la couleur 1 à la couleur 2, je peux aisément le changer de catégorie....

je vais tester tout de suite