Comment créer une variable CSS - Cascading Style Sheets ?

Publié le 06 février 2008 par Mr32

La solution consiste n'ont pas à créer une variable CSS, mais à utiliser PHP pour créer des variables dans le code CSS. Pour ce faire, nous allons utiliser l'écriture simplifiée de
<?php echo $variable_css; ?> en <?= $variable_css ?> .

Page page.html

<!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>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	
	<title>Variable CSS - Cascading Style Sheets</title>
	<link rel="stylesheet" type="text/css" href="style.php" />
</head>

<body>


<h1>Variable CSS - Cascading Style Sheets</h1>

<p class="color-1">Bloc de couleur n°1 - Variable CSS Cascading Style Sheets</p>

<p class="color-2">Bloc de couleur n°2 - Variable CSS Cascading Style Sheets</p>

<p class="color-3">Bloc de couleur n°3 - Variable CSS Cascading Style Sheets</p>


</body>

</html>

Page style.php et non ~~style.css~~

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

$color_0 = '#000000';
$color_1 = '#ff0000';
$color_2 = '#ff3300';
$color_3 = '#ff6600';

?>

* { font-family: sans-serif; }

h1 {
	padding: 5px;
	color: <?= $color_0 ?>;
	border: 5px solid <?= $color_2 ?>;
	background-color: <?= $color_3 ?>;
}

p.color-1 { color: <?= $color_1 ?>; }
p.color-2 { color: <?= $color_2 ?>; font-weight: bold; }
p.color-3 { color: <?= $color_3 ?>; font-style: italic; }