romy.tetue.net

Développement front et conception web
X-HTML, CSS, SPIP, sémantique et accessibilité

Paris-Web 2010, j’y vais ! (du 14 au 16 octobre).

La coquette se passe des class="spip"


22 mars 2007,
par Romy Têtue

Partagez cet article : Voter pour cet artice sur hellocoton.fr Netvibes Yahoo myspace Technorati stumbleupon Digg Del.ico.us

Lorsque vous affichez le code source d’une page réalisée avec SPIP, vous découvrez une floppée de class="spip". Kezako ? Ces sélecteurs CSS sont associés au code généré par SPIP, notamment aux « raccourcis SPIP », mais aussi aux formulaires et aux images, logos et documents, ceci afin de permettre leur personnalisation via CSS, comme l’explique cet article de la documentation : « SPIP et les feuilles de style ».

Cependant ces bienveillants sélecteurs ne sont pas tous utiles. D’aucuns se demandent même s’ils servent vraiment à quelque chose, suggérant de les supprimer tous, sans autre forme de procès (voir le billet « class="spip" »).

J’ai profité de la refonte de mon site pour tester leur nécessité. Diagnostic ? Oui, SPIP souffre un peu de « classite aïgue » [1]. Oui, les class="spip" sur les paragraphes, les intertitres, le gras, l’italique, etc. sont effectivement superflues, puisqu’on peut styler ces éléments autrement, en se servant de l’héritage. Par contre, tout n’est pas à jeter : essayez donc de vous passer de spip_documents ou de forml !

Dans le souhait d’alléger le code de mes pages, de le rendre propre et coquet, je n’ai gardé que le strict minimum de sélecteurs que j’ai préféré renommer, la recrudescence de spip_machin et spip_truc semblant quelque peu mégalomaniaque.

J’ai donc bricolé un filtre qui, passé sur chaque balise SPIP, supprime ou renomme les sélecteurs du code généré :

texte - 1.3 ko
coquette.txt
  1. Copiez le code du fichier ci-joint dans votre fichier mes_fonctions.php
  2. Appliquez ce filtre aux balises SPIP de votre choix, de cette façon : [(#TEXTE|coquette)]
  3. Côté CSS, voici les sélecteurs à utiliser, les nouveaux étant signalés en gras dans la colonne centrale :
anciens sélecteurs SPIP après filrage usage
h3.spip i.spip strong.spip p.spip p.spip_note li.spip blockquote.spip table.spip img.spip_logos, etc... h3 i strong p li blockquote table img On stylera directement les éléments HTML
.spip_in a signale les liens internes générés par le raccourci SPIP ; on stylera plus simplement la balise a
.spip_out .spip_url .spip_glossaire .out signale les liens externes, indistinctement
.on .on expose l’élément courant
.spip_note .note ancre vers les notes de bas de page
.spip_code code code informatique cité au fil du texte
.spip_cadre .cadre code informatique dans un bloc de formulaire

[1] Maladies exotiques des CSS, la Classitis et la Divitis, ainsi baptisées par Jeffrey Zeldman, désignent un surplus de class ou de div, souvent contracté par les explorateurs inexpérimentés du CSS. Lire aussi : Trop de noms nuit à la compréhension ! (ou la nommagigite), Miss Mopi, octobre 2004.

Vos commentaires

  • Le 22 mars 2007 à 12:10, par Fil

    Dans la version de dév, on trouve des options pour faire ça sans filtre. Cf http://archives.rezo.net/spip-core....

  • Le 23 mars 2007 à 03:33, par Romy Têtue

    Hé bêh, je me suis encore fait doubler ! Ça m’apprendra à ne pas suivre les spipiennes listes de diffusion ;-)

  • Le 2 juin 2007 à 23:44, par NicolasR

    Merci Tetue pour cet article, j’ai enfin compris l’enjeu de ce débat qui revient régulièrement sur les dites listes spipiennes ;-)

Un message, un commentaire ?

Qui êtes-vous ?

Pour afficher votre trombine avec votre message, enregistrez-la d'abord sur gravatar.com (gratuit et indolore) et n'oubliez pas d'indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici
  • Ce formulaire accepte les raccourcis SPIP [->url] {{gras}} {italique} <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Suivre les commentaires : RSS 2.0 | Atom



© 2000-2010 Romy Duhem-Verdière | Certains droits réservés | Qui suis-je ? | Contact | Aide | Top ↑
Vérifiez vous-même la qualité du code de cette page en la soumettant aux validateurs XHTML et CSS.