Des classes CSS génériques
Problématique
De nombreuses actions utilisent des classes CSS pour modifier l'apparence du résultat de l'action dans la page. Pour le moment, il n'y a aucune directive concernant la dénomination de ces classes, ce qui peut rendre la mémorisation de ces classes optionnelles difficile pour l'utilisateur. Par ailleurs, un certain nombre de classes, bien qu'ayant un nom différent, réalisent la même opération ce qui gonfle inutilement la taille des fichiers CSS. Enfin bien souvent les auteurs des actions n'utilisent pas la possibilité des listes de classes comme expliqué dans la page
http://www.w3.org/TR/REC-CSS2/selector.html#class-html, ils créent à la place des classes dont le nom est un assemblage de noms (par exemple
include_right,
include_left, etc.) et on perd de la souplesse.
Proposition
Wikini pourrait contenir un jeu de classes CSS génériques qui paraissent particulièrement utiles et bien sûr non spécifiques à une action, par exemple :
- right : l'objet est placé sur la droite de la page, le texte défile sur sa gauche
- left : l'objet est placé sur la gauche de la page, le texte défile sur sa droite
- solid : l'objet est entouré d'une bordure continue
- font_x2 : la taille du texte dans l'objet est grossie d'un facteur 2
L'avantage est que l'on peut combiner
right,
solid et
font_x2 sans définir de classe supplémentaire :
- <div class="right solid font_x2">...</div>.
Les CSS correspondantes seraient les suivantes :
.right {
- float: right;
- clear: right;
}
.left {
- float: left;
- clear: left;
}
.solid {
}
.font_x2 {
}
Il ne reste alors plus à l'action qu'à définir le style de base de l'objet avec une classe du nom de l'action qui serait automatiquement ajoutée par l'action, par exemple pour
include :
.include {
- margin: 0.5em 1em;
- padding: 0.5em;
}
Et l'utilisateur pourrait alors taper dans la page éditée :
{{include class="left border"...}}
{{tableofcontent class="right font_x2"...}}
{{image class="left"...}}
etc.
Bien sûr l'auteur de l'action a toujours la possibilité d'adapter le code CSS à son besoin en combinant les classes dans le code CSS :
.include.left {
- margin-right: 2em; /* garder de l'espace entre le bloc et le texte */
- width: 50%; /* prendre la moitié de la page (le texte passe sur la droite) */
}
etc.
Commentaires
...
../..