Peut-on définir des constantes en CSS ?

**JeanMarc_T2k** · 26/02/2008, 11h59

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.

**Bisûnûrs** · 26/02/2008, 13h52

Non, ce n'est pas possible.

En revanche tu peux le faire en PHP.

**Pierre Maurette** · 26/02/2008, 14h59

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

**Bisûnûrs** · 26/02/2008, 15h02

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.

**Pierre Maurette** · 26/02/2008, 15h19

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 :

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

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

**JeanMarc_T2k** · 26/02/2008, 15h49

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

**Pierre Maurette** · 29/02/2008, 13h07

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 :

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

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

**JeanMarc_T2k** · 29/02/2008, 14h30

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

Peut-on définir des constantes en CSS ?

CSS

Vue hybride

Discussions similaires

Partager

Partager