La coquette se passe des class="spip"

22 mars 2007,
par Romy Têtue

Mots-clefs associés à cet article :

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é :

<?php

// La coquette se passe des class="spip" !
// Cf.: http://romy.tetue.net/spip.php?article415
function coquette($letexte) {
        $letexte = str_replace('i class="spip"', 'i', $letexte);
        $letexte = str_replace('strong class="spip"', 'strong', $letexte);
        $letexte = str_replace('p class="spip"', 'p', $letexte);
        $letexte = str_replace('p class="spip_note"', 'p', $letexte);
        $letexte = str_replace('h3 class="spip"', 'h3', $letexte);
        $letexte = str_replace('hr class="spip"', 'hr', $letexte);
        $letexte = str_replace('class="thumb spip_logo"', '', $letexte);
        $letexte = str_replace('class=\'thumb spip_logo\'', '', $letexte);
        $letexte = str_replace('blockquote class="spip"', 'blockquote', $letexte);
        $letexte = str_replace('<code class="spip_code"', '<code', $letexte);
        $letexte = str_replace('<code class=\'spip_code\'', '<code', $letexte);
        $letexte = str_replace('<form action="/" method="get"><div><textarea', '<textarea', $letexte);
        $letexte = str_replace('</textarea></div></form>', '</textarea>', $letexte);
        $letexte = str_replace(' class=""', '', $letexte);
        // Ensuite je renomme :
        $letexte = str_replace('external', 'out', $letexte);
        $letexte = str_replace('external', 'out', $letexte);
        $letexte = str_replace('external', 'out', $letexte);
        $letexte = str_replace('spip_note', 'note', $letexte);
        $letexte = str_replace('spip_cadre', 'cadre', $letexte);
return $letexte;
}

?>
  1. Copiez ce code 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.thumb spip_logo, etc. h3 i strong p li blockquote table img On stylera directement les éléments HTML
. a signale les liens internes générés par le raccourci SPIP ; on stylera plus simplement la balise a
.external .external .external .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
{#TITRE,#URL_ARTICLE,#INTRODUCTION}

Vos commentaires

Répondre à cet article

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
  • Raccourcis : {{gras}} {italique} -liste [bla->url] <q> <quote> <code>.

Suivre les commentaires : RSS 2.0 | Atom