Wikini

FeuillesDeStyleMultiples

PagePrincipale :: DerniersChangements :: DerniersCommentaires :: ParametresUtilisateur :: Vous êtes ec2-44-220-251-236.compute-1.amazonaws.com

Feuilles de style multiples pour un site donné


Besoin

Nous souhaitons pouvoir proposer, pour un même site donné, plusieurs feuilles de style que les utilisateurs auront loisir de voir et de sélectionner. Cette fonctionnalité peut trouver plusieurs applications :

Corrélats


Discussions

Le site http://alistapart.com/ fournit une solution quasi "clef en main" pour utiliser plusieurs feuilles de style pour un site donné.
La voici transposée pour WikiNi.

1. Créer un fichier switcher.php, mémorisant via un cookie le style choisi :
<?php
setcookie ('sitestyle', $set, time()+31536000, '/', 'wikini.net', '0');
header("Location: $HTTP_REFERER");
?>
Le nom du style choisi est passé par le paramètre "set".
Par exemple :

2. Modifier le fichier header.php

Et c'est tout. (je n'ai pas encore testé, mais ça ne devrait pas poser de problème.)
Je pense qu'on peut le mettre en place car les modifications du code sont vraiment mineures et cela pourrait nous permettre de déboguer plusieurs feuilles de style "en live" sur Wikini.net. -- CharlesNepote

Oui, mais on pourrait avoir quelque chose comme ceci (pour importer des feuilles externes).
<a href="./switcher.php?set=http://charles.nepote.free.fr/wakka/wakka.css">cliquer ici pour le style "violet" de Charles Nepote</a>

Je viens de tester cet import et ça fonctionne.
Les deux solutions, sont à mon avis utilisables si l'on s'y prend bien. L'inclusion du switcher pouvant se faire par une action avec un paramètre comme ceci {{css-switcher css="parametre"}}.
-- DavidDelon

A la réflexion, l'action me paraît en effet nécessaire, ne serait-ce que parce qu'elle est plus facile à écrire. D'autre part, il est possible de raffiner pas mal cette action avec des paramètres tels que :
-- CharlesNepote


Pistes de solutions pour revenir en arrière en cas de problème

Nous l'avons vu, le switcher peut poser des problèmes d'accessibilité au site. Le sujet a par ailleurs sur le site de LaurentDenis.
Il existe certaines pistes pour résoudre ce problème :
Qu'en pensez-vous ?
-- CharlesNepote

Alors ? On lance des tests avec une action + raccourci clavier ? -- CharlesNepote

Ok pour moi : action et raccourci clavier -- DavidDelon

Solution

En fait, une action seule ne suffit pas, car le raccourci clavier doit pointer sur une référence stable qui n'est pas susceptible d'être changée (comme cela peut-être le cas d'une action qui peut être effacée de la page) : il faut donc créer un handler.

Le handler suivant recharge la feuille de style par défaut.
/handler/resetstyle.php
<?php

// Handler resetstyle.php version 0.2 du 16/03/2004
// pour WikiNi 0.4.1rc (=> à la version du 200403xx) et supérieurs
// Par Charles Népote (c) 2004
// Licence GPL


// Fonctionnement
//
// Cet handler permet à l'utilisateur de revenir à la feuille de style par défaut du site.
// Techniquement :


// Usage :
// http://example.org/PageTest/resetstyle


// A compléter (peut-être un jour) :
//
// -- détecter le fichier par défaut via une variable de configuration
//

setcookie ('sitestyle', 'wakka', time()+31536000, '/');
header("Location: ".$this->href());

?>


/action/header.php :
. dans le <head>, il faut modifier l'appel de la feuille de style :
<style type="text/css" media="all"> @import "<?php echo (!$_COOKIE["sitestyle"])?'wakka':$_COOKIE["sitestyle"] ?>.css";</style>

. juste après la balise <body>, le code suivant offre un raccourcis clavier vers le handler "resetstyle" permettant le retour vers la feuille de style par défaut.
<div style="display: none;"><a href="<?php echo $this->href() ?>/resetstyle" accesskey="7"></a></div>

L'action suivante permet de changer le style.
/action/changestyle.php :
<?php

// Action changesstyle.php version 0.2 du 16/03/2004
// pour WikiNi 0.4.1rc (=> à la version du 200403xx) et supérieurs
// Par Charles Népote (c) 2004
// Licence GPL


// Fonctionnement
//
// Cette action regroupe la fonction de changement de style ainsi que l'interface
// de modification du style.
// Une fois le style sélectionné via l'interface, la requête est envoyée sous la forme :
// http://example.org/PageTest&set="NomDeFeuilleDeStyle"
// . si ce nom n'est pas constitué uniquement de caractères alphanumériques,
//   une erreur est retournée
// . si ce nom est valide et que la feuille de style existe :
//   . on change le cookie utilisateur
//   . on redirige l'utilisateur vers http://example.org/PageTest où
//     l'utilisateur peut alors constater le changement de style


// Usage :
//
// -- {{changestyle link="xxx.css"}}
//    donne le lien suivant :
//    Feuille de style xxx.css
//
// -- {{changestyle link="xxx.css" title="Ouragan"}}
//    donne le lien suivant :
//    Ouragan


// A compléter (peut-être un jour) :
//
// -- {{changestyle}}
//    donne un formulaire :
//    Entrer l'adresse de la feuille de style désirée : [     ]
//
// -- {{changestyle choice="zzz.css;ttt.css"}}
//    [] Feuille de style zzz
//    [] Feuille de style ttt


$set = $_GET["set"];


if ($this->GetParameter(link))
{
    echo    "<a href=\"".$this->href()."&set=".$this->GetParameter(link)."\">";
    echo    (!$this->GetParameter(title))?"Feuille de style ".$this->GetParameter(link):$this->GetParameter(title);
    echo    "</a>";
}


// Do it.
if (preg_match("/^[A-Za-z0-9][A-Za-z0-9]+$/", $set))
{
    setcookie ('sitestyle', $set, time()+31536000, '/');
    header("Location: ".$this->href());
}
else if ($set)
{
    $this->SetMessage("La feuille de style ".$set." est non valide !");
    header("Location: ".$this->href());
}
?>

Pour le moment son usage est le suivant :
Je pense affiner cette action :
-- CharlesNepote

De l'usage des feuilles de style externes

L'idée du switcher de CSS est une très bonne idée. Par contre, je pense qu'il faut proscrire l'utilisation de feuille externe au site simplement parce que cela échape au "propriétaire" du site. C'est, à mon avis, à l'administrateur du site de choisir les feuilles CSS possibles pour son site. De plus, l'utilisation d'une CSS externe expose le site à des problèmes de droits d'auteur si un site utilise une feuille CSS externe sans permission de l'auteur.
--GarfieldFr

Oui, je comprend et je partage tes craintes. Je pense que cela peut avoir une utilité mais, au moins dans un premier temps, je vais donc désactiver l'usage de feuilles de style externes (cf. le nouveau code que j'ai publié). Au pire, si on devait permettre l'usage de feuilles de style externes, il faudrait que cela soit une option de configuration, avec la valeur "no" par défaut.
-- CharlesNepote

Images dans une feuille de style

Une question : est il possible dans une CSS d'indiquer le nom d'une image à afficher ? Je pense en particulier au cas du logo qui pourrait être différent selon le style choisi (un même logo mais dans des teintes différente selon le style).
--GarfieldFr

Oui, il n'y a aucun problème ! C'est là un des grands intérêts des CSS. Je te conseille d'aller voir l'initiative CSS Zen Garden, qui est LE site de référence pour la démo de CSS : sur la base d'une seule et unique page HTML, des dizaines de designers y proposent des feuilles de style différentes pour montrer la très grande diversité des possibilités de mise en page et en image : le résultat est tout simplement fantastique ! Quelques exemples :
Pour chaque exemple, il n'y a que la CSS qui change et seulement elle ; la page HTML est identique pour chaque exemple.
Tu peux utiliser des images à plusieurs endroits en CSS :
C'est pour cela que je milite pour une séparation forte entre :
Par exemple, rien n'empêche d'imaginer le titre du wiki grisé en énorme en arrière plan, avec le titre de la page fixé en haut à droite, le corps de la page défilant sous lui et les deux menus étant positionnés à gauche sous la forme de deux petits blocs. Lorsqu'on aura mis en prod. le switcher, je vous ferai voir quelques exemples montrant les possibilités de stylage de WikiNi : je ne vous garantis pas le résultat graphique mais ça vous permettra de comprendre la richesse des possibilités.
-- CharlesNepote

Va voir aussi ce que fait DaOuar et sa bande avec WikiNi, uniquement sur la base de feuille de style : c'est supaire ! (comme on dit là bas) : http://rezal404.org/wikini/wakka.php?wiki=PagePrincipale
-- CharlesNepote
Merci, on s'est bien éclaté avec les CSS. Il y'a juste quelques modifications mineures du header.php (ajout des styles .logo et .menu), mais les feuilles de style doivent pouvoir être adaptées facilement au header de base de wikini.
--DaOuar

Blocs fonctionnels de WikiNi et CSS

Les CSS sur CSS Zen Garden m'ont fait délirer, je ne pensais pas que les CSS pouvaient être aussi puissantes (mais je suis loin d'être un designer). Il est clair que chaque élément d'une page WikiNi devrait avoir son propre id ou class ou quoiqu'il soit utile pour en modifier la présentation. Je pense qu'il faut même inclure le formatage du texte dans les CSS. Pourquoi ne pas mettre une classe .slashslash pour définir le style de la balise // ? Après tous, rien n'empèche un style de préférer une couleur de texte spécifique plutôt que de mettre en italique.
Si je n'avais pas des trucs en retard dans mes projets, je me pencherais sérieusement sur les CSS.
-- GarfieldFr

Je suis heureux que tu aies compris l'intérêt et la puissance des CSS. Mais attention, il ne faut pas confondre présentation et sémantique ; ce n'est pas parce que les CSS permettent de gérer toute la présentation qu'il faut uniformiser la sémantique. Je m'explique. En HTML, la balise <em> désigne l'emphase, elle a donc une fonction sémantique ; par défaut et sans feuille de style, les navigateurs rendent cette balise par un texte mis en italique (si mes souvenirs sont bons). Comme il s'agit d'une balise marquant l'emphase, un lecteur braille va signaler à son utilisateur qu'il s'agit d'une emphase ; de même, un lecteur vocal va changer de ton pour marquer l'emphase ; un PDA ou un navigateur texte, ne comprenant pas les feuilles de style, vont rendre encore différement cette emphase. Si tu remplace tous les marqueurs sémantiques par des <span class="slashslash"> et autres, alors tu perds toute information sémantique et les lecteurs non graphique ne rendront pas correctement l'information. Autre effet de bord, si tu remplace <h1> par <span class="titre1">, alors Google indexera moins bien le contenu de la page : en revanche, un mot-clé dans un <h1> permet à Google de comprendre que ce mot-clé est important (puisque c'est un grand titre) et améliore la pertinence de ta page. En outre, l'utilisation de balises sémantiques ne t'empêche pas styler, au contraire : pour les navigateurs graphiques tu peux styler <em> ou <h1> comme tu veux et ces derniers seront également correctement interprétés par les navigateurs non graphiques. Il faut donc faire très attention à ne pas réduire la sémantique du texte qui est très importante.
Je te rejoins cependant sur certains contenus. Par exemple, WikiNi pourrait affecter des styles à des objets qui auraient vocation à être stylés : "Éditer cette page", la date de la page, le propriétaire, le lien vers la page d'accueil, les boutons (comme le propose PierreGilles avec son OrangeJuice). Il faut voir au cas par cas.
-- CharlesNepote
Ok, j'ai bien compris, et j'avoue ne pas avoir pensé aux navigateurs non graphiques --GarfieldFr

Ailleurs

Pour information, j'ai fait un système de thèmes qui permet de choisir l'apparence du site, cela inclus les logos éventuel mais aussi la structure graphique même du site. De plus ce système permet à des non spécialistes des CSS de modifier l'aspect graphique du site.voir ici
--GarfieldFr

Ailleurs encore

Pour info également, à la recherche d'un méthode extra-simple pour gérer de multiples CSS et des "sous-thèmes" dans mon wiki, j'ai fait une modif superlight de header.php qui me donne entière satisfaction. Les variations de CSS sont liés aux propriétaires des pages. Pour ceux que cela intéresse : http://www.xtof.ouvaton.org/wakka.php?wiki=MultiplesCSS
--Christophe

Note d'un utilisateur

L'action ChangeStyle? permet à WikiNi de changer de feuille de style
MAIS;
Suppossons WikiNi installer avec xxx CSS.
Comment l'administrateur peut il définir une de ces xxx feuille comme "feuille par défaut" ?
Peut être là l'utilité de définir un "utilisateur root" pour wikiNi
Commentaires [Cacher commentaires/formulaire]
2013-04-09 23:40:33 :: Propriétaire : CharlesNepote :: Rétro-liens :: Cartographie :: Recherche :
XHTML 1.0 valide ? :: CSS valide ? :: -- Fonctionne avec WikiNi 0.5.0 (interwiki)