Dans un effort de présentation, et pendant que je suis en train de développer les feuilles de style du site, j’ai eu envie de charger un thème qui vous rapprochera de l’ambiance future de ce blog.
Une petite recherche sur les thèmes de Wordpress, un thème en noir, fluide, et trois colonnes. Celui ci me plait assez, il n’est pas incohérent avec le titre du blog, il fera l’affaire pour quelques jours.
Un zeste de personnalisation ?
C’est là que les choses se compliquent, les barres latérales sont codées en dur, et l’insertion de widget ne se fait pas correctement, les styles sont incohérents.
Surtout, impossible d’augmenter facilement la police de caractère, car les tailles sont inscrites en pixels dans la feuille de style.
Il n’est pas pas difficile de coder une feuille de style en em (proportionnel) ou en pixel. La seule chose à faire, quand on décide d’utiliser les em, c’est de faire une petite déclaration de base (ou remise à zéro des tailles) pour bien définir la taille de départ, à la place des valeurs par défaut des navigateurs divers. Un html {font-size:100%;} par exemple le fait très bien, il restera ensuite à définir le “vrai” font-size dans la balise body, j’ai l’habitude de mettre 0.8 em.
L’avantage ?
Très simple… toutes les tailles de caractères sont définies par rapport à la taille du body (ou du conteneur parent <em>si</em> il a une propriété font-size et qu’elle s’hérite.
En gros, au lieu de dire “je fais mes textes en 12 points et mes titres en14 points”, vous dites “je fais mes titres 120% plus gros que mes textes”… et il vous reste à changer uniquement la taille de base du texte (au niveau du body habituellement), pour que tous les autres textes changent en proportion.
Cela peut demander un peu plus de soin au départ, car parfois l’imbrication des conteneurs donne quelques surprises, mais à la fin quel plaisir, et quelle facilité de maintenance !
Vous resterez donc quelques jours avec un blog dont les caractères sont à mon goût trop serrés.
Tags :bonne pratique, CSS, em















Très joli le site … et très bonne idée de nous faire partager sa construction :-)