28221 sujets

CSS et mise en forme, CSS3

[Résolu] Des variables dans une CSS ?

Quand je fais un site, j'utilise en général 4 couleurs, ton sur ton ou couleurs différentes. Est-il possible de mettre des variables dans une CSS ? un peu dans le genre :

$couleur_bordures="#123456";
$couleur_fond_foncé="#789012";
$couleur_fond_clair="#234567";
$couleur_titres1="#890123";

De cette façon, un simple changement dans la variable m'éviterait de me retaper toute ma CSS.

J'avoue ne jamais avoir essayé. Smiley ohwell
Modifié le 16 Jan 2005 - 16:57
Administrateur
Non ce n'est pas possible.
Par contre il serait possible de générer ta feuille de style dynamiquement à partir d'un langage comme PHP, ce qui pourrait t'aider selon ton cas.
Oui, j'en ai entendu parler en effet.

Je me mets en quête d'un tel script pour voir comment a se goupille.

Merci Raph Smiley cligne
Modifié le 16 Jan 2005 - 10:56
facile Smiley cligne 

[#black][#red][b]<?php[/b][/#]
[#grey]/* Ici, tu mets tes définitions de couleurs à modifier */[/#]
[#purple]$couleur_bordures[/#] = [#blue]"#123456"[/#];
[#purple]$couleur_fond_foncé[/#] = [#blue]"#789012"[/#];
[#purple]$couleur_fond_clair[/#] = [#blue]"#234567"[/#];
[#purple]$couleur_titres1[/#] = [#blue]"#890123"[/#];
[#red][b]?>[/b][/#]
#anyClass {
    border-color: [#red][b]<?php[/b][/#] [#darkblue]echo[/#] [#purple]$couleur_bordures;[/#] [#red][b]?>[/b][/#];
}
[/#]


ça devrait fonctionner. Il faut nommer ton fichier avec une extension qui soit interprétée comme du PHP (tu peux configurer Apache pour ça), *.php probablement.

EDIT: si l'option d'exécution short-open-tag est activée dans le php.ini (pas forcément le cas partout), tu pourrais (pour faire plus court), l'écrire comme ça:
[#black](...)
#anyClass {
    border-color: [#red][b]<?=[/b][/#] [#purple]$couleur_bordures;[/#] [#red][b]?>[/b][/#];
}
[/#]

@+, HoPHP
Modifié le 16 Jan 2005 - 13:35
Un petit détail qui peut avoir son importance, sait-on jamais : il y a ici et là quelques utilisateurs d'un certain navigateur un peu farfelu à tête de lézard ou de panda Smiley cligne :

Un fichier css.php sera le plus souvent servi par défaut avec le type MIME text/html... et sera donc superbement ignoré par les navigateurs Gecko, très rigoristes sur ce point : pour eux, un fichier CSS se sert avec des gants blancs et un type mime text/css.

Le cas échéant, il faut donc prendre soin d'expliquer à son serveur comment bien faire les choses et servir le bon type de contenu, même pour les snobs Smiley lol
Modifié le 16 Jan 2005 - 14:02
Un header PHP approprié aussi, sinon ça va pas faire jojo je pense

header("Content-Type: text/css;") ;

Exemple style.php

<?php
header("Content-Type: text/css;") ;

$col1 = "#f00" ;
$col2 = "#0f0" ;
?>

body
{
	background: <?php echo $col1 ; ?> ;
}

h1
{
	color: <?php echo $col2 ; ?> ;
}

Exemple index.php

<?php
header("Content-Type: text/html; charset=iso-8859-15") ;
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
	<head>
		<title>Titre de la page</title>

		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
		<meta http-equiv="Content-Script-Type" content="text/javascript" />
		<meta http-equiv="Content-Style-Type" content="text/css" />
		<meta http-equiv="Content-Language" content="fr" />
		<meta name="author" content="Olivier PATRY" />
		<meta name="email" content="olivier.patry&#64;gmail.com" />
 
		<style type="text/css" media="screen">
		@import url(style.php) ;
		</style>
	</head>

	<body>
	<h1>Test</h1>
	</body>
</html>


Ca fonctionne.
Par contre, si tu zappes le header php du style.php ça fait plus rien fort logiquement.

-edit- grillé par Laurent, mais j'ai l'exemple à l'appui Smiley lol
Modifié le 16 Jan 2005 - 14:05
Au passage, une petite question que je me suis plusieurs fois posée, mais que je n'avais jamais vérifiée jusqu'ici : après vérification donc, Firefox n'exige une CSS avec le type text/css que s'il est en mode de respect strict des Standards. En mode Quirks (pas de DTD par exemple, ou DTD transitional abrégée), il est prêt à digérer à peu prêt n'importe quoi en guise de contenu CSS, comme tout le monde.
Merci à vous tous.

Je n'en suis malheureusement pas encore au bidouillage de serveur et Apache (j'en suis même loin !). Je me sers en local d'EasyPHP, point barre.

Je vais suivre l'exemple du moustique. On va bien voir.
Donc, last Edition, pour plus de clarté.

[#black][#red][b]<?php[/b][/#]
[#darkblue]header[/#]([#blue]"Content-Type: text/css;"[/#]) ; [#grey]/* EDIT - Envoi  du bon type MIME */[/#]

[#grey]/* Ici, tu mets tes définitions de couleurs à modifier */[/#]
[#purple]$couleur_bordures[/#] = [#blue]"#123456"[/#];
[#purple]$couleur_fond_foncé[/#] = [#blue]"#789012"[/#];
[#purple]$couleur_fond_clair[/#] = [#blue]"#234567"[/#];
[#purple]$couleur_titres1[/#] = [#blue]"#890123"[/#];
[#red][b]?>[/b][/#]
#anyClass {
    border-color: [#red][b]<?php[/b][/#] [#darkblue]echo[/#] [#purple]$couleur_bordures;[/#] [#red][b]?>[/b][/#];
}
[/#]


@+, HoPHP

P.S. Pas forcément très utile ce post, mais bon, au moins on a un code qui fonctionne Smiley cligne
Modifié le 16 Jan 2005 - 14:46
Merci à toi HoPHP.

Le script du suceur de sang fonctionne à la perfection. Smiley lol

Je chanterai tes louanges ce soir avant de m'endormir. Smiley baiser

Merci encore à tous les intervenants. Smiley clapclap
Sujet clos
Aller à