Simplifions le code des menus de SPIP

22 décembre 2005,
par Romy Têtue

Mots-clefs associés à cet article :

Supprimez quelques sélecteurs CSS : un seul suffit, le parent. Servez-vous de l’héritage et structurez correctement.

La simplication du code HTML et CSS que je propose ci-après convient pour TOUS les menus des squelettes par défaut de SPIP. Elle permet de partir sur de bonnes bases et facilite les variantes ou les modifications ultérieures.

Rappel du code des squelettes par défaut

Les squelettes par défaut de SPIP contiennent différents menus de couleurs pastel, pour les brèves, les mots-clés, les rubriques, etc. Ils ne sont pas tous construits de la même façon, mais la structure qui revient le plus fréquemment est celle-ci (prenons par exemple le menu de brèves de la page d’accueil) :

<!-- Breves -->

<h1 class="structure"><:dernieres_breves:></h1>

<B_breves>
<div class="menu">
<div class="breves">

<div class="menu-titre"><:breves:></div>

<ul class="menu-liste">
<BOUCLE_breves(BREVES){par date}{inverse}{0,8}>
<li class="menu-item">
<i>[(#DATE|affdate_court)]</i>: 
<a href="#URL_BREVE">#TITRE</a>
</li>
</BOUCLE_breves>
</ul>

</div>
</div>
</B_breves>

À mon avis, ce petit menu utilise une avalanche de sélecteurs CSS (6 pour être précise), quand un seul suffirait. En effet, en utilisant le principe de l’héritage [1], un seul sélecteur, parent d’un HTML bien structuré suffit largement pour un menu de ce type ; ce qui allégera d’autant le code, améliorera sa lisibilité et donc sa compréhension et donc sa maintenance.


- L’inconvénient du menu par défaut est que si la boucle ne renvoie aucune brève, rien n’est affiché sauf... le titre du menu !!
Pour éviter cela, construisons bien nos boucles en plaçant tout, oui TOUT, entre les balises de code optionnel <B_breves>, sans rien laisser traîner en dehors.

- Les deux div (menu et breves) sont redondantes : on peut tout aussi bien ne faire usage que d’une seule ! Voici pourquoi.
Si le sélecteur menu permet d’attraper d’un coup tous les menus (brèves, mots-clès, rubriques, etc) pour leur appliquer un style homogéne, on peut s’en passer, puisqu’on obtient le même effet en remplaçant .menu {...} par .rubriques, .breves, .forums, .divers {...} pour attribuer les caractéristiques communes à tous ces menus.
En tout cas, point n’est besoin de deux div. Il peut être effectivement plus confortable de maintenir l’usage de deux sélecteurs CSS différents, mais... sur la même div, comme ceci : <div class="menu breves">.

Aucun changement pour le reste : on utilisera .breves {...} pour attribuer les caractéristiques spécifiques au menu de brèves, et ainsi de suite pour chaque menu.

- Un seul titre suffit ! Plaçons-le à l’intérieur de cette unique div, en titre de second niveau, car si la page est correctement structurée, le h1 est déjà utilisé, certainement en titre de page. Le titre ne nécessite aucun sélecteur dédié, puisqu’il suffit de coder ainsi pour le styler : .breves h2 {...} (ne s’appliquera qu’aux h2 contenus dans la div breves et à aucun autre).

- La liste peut être ouverte par un simple <ul>, et les items par <li>, et on se débarrasse définitivement des sélecteurs .menu-liste et .menu-item, inutiles. De même que précédemment, on utilisera .breves ul {...} et .breves ul li {...}.

- Ah, oui, vous avez remarqué : j’ai oublié quelque chose. Si la plupart des menus de SPIP sont constitués d’une liste, et seulement d’une liste (certes plus ou moins imbriquée), certains contiennent également quelque texte, comme le menu auteur par exemple : le nom de l’auteur vient en titre, puis suit une courte bio, avant la liste de ses articles. Cette bio sera dotée de balises <p>, que l’on stylera ainsi dans la feuille CSS : .auteur p {...}.

Quoi d’autre ?

Code simplifié

Dans le fichier HTML, 10 lignes suffisent (soit moitié moins) :

<B_breves>
<div class="breves">
    <h2><:dernieres_breves:></h2>
    <ul>
        <BOUCLE_breves(BREVES){!par date}{0,8}>
        <li>[(#DATE|affdate_court) : ]<a href="#URL_BREVE">#TITRE</a></li>
        </BOUCLE_breves>
    </ul>
</div>
</B_breves>

Le style correspondant dans la feuille de style CSS, est d’une simplicité enfantine [2] ; il suffit de suivre la structure HTML :

.breves {...}
.breves h2 {...}
.breves ul {...}
.breves ul li {...}
.breves p {...}

C’est tout !

{#TITRE,#URL_ARTICLE,#INTRODUCTION}

Vos commentaires

  • Le 27 décembre 2005 à 12:39, par comradE Ogilvy En réponse à : De l’art de faire de jolis menus

    Arrête-moi si je dis une bêtise, mais même la div menu est inutile... On peut se contenter d’un ul style=menu, dans le texte conditionnel avant :

    <!-- Boussole -->
    <!-- Sites Spip utiles (indexés par mot-clé Boussole)-->
    
    <B_Boussole>
    <ul style="boussole">
    <h2>Boussole</h2>
    <BOUCLE_Boussole(SITES){titre_mot=Boussole}{par titre}>
    <li><a href="#URL_SITE" [title="(#DESCRIPTIF|textebrut|entites_html)"]>#NOM_SITE</a></li>
    </BOUCLE_Boussole>
    </ul>
    </B_Boussole>

    Reste le style du titre h2, et soit on peut styler spécifiquement un h2 dans un ul (pas sûr), soit il faut intervenir au niveau de la colonne/coquille, ou d’un div englobant (div="navigation"), soit encore en faisant un h2 de ce style au body, et en reprenant ailleurs les styles typo des articles (

  • Le 27 décembre 2005 à 18:52, par Romy Têtue En réponse à : De l’art de faire de jolis menus

    C’est tout vu ;) et je ne le conseillerais pas comme base.

    Ça peut se faire, mais ce n’est pas valable par défaut, pour TOUS les menus : certains sont faits de listes imbriquées, d’autres contiennent du texte (bio du menu auteurs) qui n’est pas en liste...

    Mieux vaut donc garder une belle div englobante, qui permet de gérer l’emplacement à part (via float, position, margin et compagnie), et réserver à <ul> son rôle de liste (qu’on peut aussi, du coup, supprimer facilement si on n’en a pas besoin, sans tout foutre en l’air). C’est moins contraignant.

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