Carnet Wiki

Messages de réponse (des formulaires)

Notes de réflexion sur la nomenclature des messages de réponse (des formulaires) de SPIP.

Nomenclature CSS actuelle de SPIP pour les messages de réponse des formulaires :

.reponse_formulaire {}
.reponse_formulaire_erreur {}
.erreur_message {}
.reponse_formulaire_ok {}

etc.

Ces sélecteurs sont longs à écrire et je ne sais pas vous, mais moi je me trompe toujours (écrivant « formulaire_reponse » au lieu de « reponse_formulaire » et «.message_erreur » au lieu de « .erreur_message »).

Je propose de simplifier ainsi [*] :

.reponse {}
.reponse.info {}
.reponse.notice {}
.reponse.error {}
.reponse.success {}

D’après les classes anglophones de BluePrint, framework CSS répandu, qui défini très simplement et joliment :

.error,
.notice,
.success    { padding: .8em; margin-bottom: 1em; border: 2px solid #ddd; }

.error      { background: #FBE3E4; color: #8a1f11; border-color: #FBC2C4; }
.notice     { background: #FFF6BF; color: #514721; border-color: #FFD324; }
.success    { background: #E6EFC2; color: #264409; border-color: #C6D880; }
.error a    { color: #8a1f11; }
.notice a   { color: #514721; }
.success a  { color: #264409; }

En version française, ça donnerait (bof) :

.reponse {}
.reponse.info {}
.reponse.attention {}
.reponse.erreur {}
.reponse.succes {}

Autre exemple (vu à cette page) :

.remarque
.remarque.attention
.remarque.information
.remarque.erreur

Pour mémo, voici les différentes classes croisées sur le Web :

message (neutre)avertissementmessage d’erreurconfirmation de succèsetc.
.reponse_formulaire .reponse_formulaire_erreur .reponse_formulaire_ok .erreur .obligatoire .erreur_message .explication
.notice .error .success
.information .attention .erreur
.information .error .required .note
.info .warning .error .success

[*Cette nomenclature peut s’appliquer à tous les messages de réponse du système (pas seulement des formulaires), en jouant éventuellement sur les classes parentes pour distinguer, au besoin.


Voir aussi :
-  http://dmouronval.developpez.com/tutoriels/css/messages-personnalises/
-  http://www.lafermeduweb.net/billet/3-templates-d-administration-gratuits-en-xhtml-css-a-telecharger-948.html

Voir aussi : Messages d’erreur divers et variés

tetue - Mise à jour :27 March 2011 at 12:29