Vous vous apprêtez à lire un tutoriel rédigé par un membre de ce site. Malgré tout le soin que ce membre a pu apporter au tutoriel, nous ne pouvons pas garantir que les informations contenues sur cette page sont exactes à 100%. Merci de garder cela en tête lorsque vous lirez cette page ;o)
Disposer d'un
style switcher intégré à votre site vous sera indispensable dans les cas suivants :
- le navigateur n'implémente pas cette fonction. C'est en général le cas pour les navigateurs anciens, tels qu'IE.
- le navigateur n'a implémenté cette fonction que partiellement. Autrement dit, votre choix ne sera pas permanent. Tous les navigateurs actuels, hormis Firefox avec l'extension Stylesheet Chooser Plus sont dans ce cas.
Autrement dit, l'utilisation des feuilles de style alternatives perdra pratiquement tout son intérêt.
Il existe actuellement deux moyens d'intégrer un
style switcher à un site web : en utilisant la technologie PHP ou JavaScript.
L'idéal serait de cumuler les deux systèmes (avantages du JavaScript et accessibilité maximale).
Néanmoins, l'intégration d'un
style switcher en JavaScript est loin d'être facile, et je n'ai pas les compétences requises pour le réaliser.
Je vous redirige donc vers
cet article de
A List Apart Magazine.
Nous verrons donc comment en réaliser un en PHP.
Tout d'abord, ce que devra effectuer notre script.
- À l'affichage des pages
- Lister les différents styles et déterminer le style favori
- Linker les feuilles de style
- Afficher le formulaire de changement de style.
- Si changement de style favori
Précision importante : il faut penser à changer la feuille de style favorite sans oublier de mettre les autres en alternatives.
Il serait dommage de priver vos visiteurs de se servir du
style switcher intégré à leur navigateur...
Déjà un problème se pose : celui de choisir le titre de vos feuilles de style.
Par exemple, si votre feuille de style se trouve dans
/style/printemps/screen.css, vous voudrez peut-être afficher "Lumière de printemps" dans le formulaire permettant de changer de style.
Il existe deux principales manières de résoudre ce problème :
- utiliser un array
Array associatif défini avec le nom du dossier en key et le titre du style en value.
Donc, de la forme array('printemps' => 'Lumière de Printemps', [...])
Défaut : lorsque vous voudrez ajouter une nouvelle feuille de style, vous devrez modifier le code de votre page.
- utiliser une base de données
Cela va du fichier INI, parsable avec parse_ini_file, à la table SQL (possédant au minimum deux champs : le nom du dossier et le titre du style), en passant par le fichier XML.
Défaut : la lourdeur de l'utilisation d'une base de données.
En résumé, la méthode utilisant une base de données est à réserver dans les cas où on ne souhaite pas avoir à modifier (ou bien sûr, à faire modifier) le code source. Elle s'adaptera parfaitement au cas des scripts distribués.
Par contre, sa relative lourdeur vous encouragera à utiliser la méthode avec
array dans le reste des cas : là où
vous êtes le codeur, et qu'une flexibilité de votre code à un non-initié serait inutile.
Par exemple, votre site perso ou votre blog.
Remarque : vous auriez pu penser à utiliser le nom du dossier, ou le nom du fichier CSS, en tant que titre.
Cette méthode n'est pas recommandée car elle pose le problème de l'encodage des accents et des espaces.
De plus, elle n'est pas la plus simple à mettre en oeuvre (il faudrait parcourir le répertoire avec
opendir puis
readdir), ni la plus logique pour le néophyte.
Dans ce script, nous utiliserons la méthode utilisant un
array associatif, mais il sera facilement adaptable à la méthode utilisant une base de données (vous n'aurez qu'à modifier la définition de la variable
$styles).
Passons au code.
Définition des différents styles et du style préféré
Code : PHP 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22 | <?php
/* définition des différents styles */
$styles = array(
'rouge_ciel' => 'Rouge ciel',
'printemps' => 'Lumière de Printemps',
'ete' => 'Soleil d\'été',
'no_style' => 'Pas de style'
);
/* si le formulaire de changement de style est rempli avec une valeur correcte */
if(isset($_GET['style']) && array_key_exists($_GET['style'], $styles)) {
$favorite_style = $_GET['style'];
}
/* sinon, on prend la valeur du cookie s'il existe */
elseif(isset($_COOKIE['favorite_style'])) {
$favorite_style = $_COOKIE['favorite_style'];
}
/* sinon, la valeur par défaut */
else {
$favorite_style = 'rouge_ciel';
}
?>
|
Ce bout de code est à insérer avant l'affichage des pages où vous souhaitez intégrer ce système de styles alternatifs.
Vous remarquerez un style
no_style, correspondant à l'absence de style, utile pour divers handicapés.
Cette feuille de style sera vide, à l'exception d'un commentaire quelconque (afin éviter un bug sous IE/Mac).
En cas de changement de la feuille de style favorite
Code : PHP1
2
3
4
5
6 | <?php
/* si le fomulaire est rempli avec une valeur correcte, on envoie un cookie pour se souvenir du choix du visiteur */
if(isset($_GET['style']) && array_key_exists($_GET['style'], $styles)) {
setcookie('favorite_style', $_GET['style'], time() + 63115200);
}
?>
|
Remarque :
setcookie doit être placé avant tout envoi au navigateur, vous devez donc placer ce code avant tout affichage.
Linkage des feuilles de style
Code : PHP 1
2
3
4
5
6
7
8
9
10
11 | <?php
/* affichage de la feuille de style favorite */
echo '<link rel="stylesheet" type="text/css" href="style/'.$favorite_style.'/screen.css" media="screen" title="'.$styles[$favorite_style].'" />'."\n";
/* affichage des feuilles de style alternatives */
foreach($styles as $key => $value) {
if($key !== $favorite_style) {
echo '<link rel="alternate stylesheet" type="text/css" href="style/'.$key.'/screen.css" media="screen" title="'.$value.'" />'."\n";
}
}
?>
|
Si vous avez différents types de
media pour chaque style, il vous suffit d'ajouter dans les deux
echo une seconde balise
<link /> contenant le
media voulu.
Formulaire de changement de style favori
Code : PHP 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17 | <form action="" method="get">
<p>
<select name="style">
<?php
foreach($styles as $key => $value) {
if($key !== $favorite_style) { // feuilles de style alternatives
echo '<option value="'.$key.'">'.$value.'</option>'."\n";
}
else { // feuille de style favorite
echo '<option value="'.$favorite_style.'" selected="selected">'.$styles[$favorite_style].'</option>'."\n";
}
}
?>
</select>
<input type="submit" value="Envoyer" />
</p>
</form>
|
Conclusion
Pour finir, voici une page complète intégrant ce système, pouvant servir comme exemple pour vos tests, ou aider à l'intégration du script dans votre site web (les commentaires explicatifs ont été supprimés).
Code : PHP
Tutoriels
Communauté
Mon compte
Recherche
Livre d'or
Publicité
681 Zéros connectés |
7 requêtes |
0.0508s (0.0323s)
