L’astuce typographique du jour
24 août 2007 7 commentaires95% webdesign is typography
Afin illustrer les propos d’Oliver Reichenstein, je vais vous expliquer comment réaliser en css un ornement typographique archi-classique dans le monde du print mais très peu utilisé sur le web : la lettrine.
Pseudo sélecteurs
Supposons que je souhaite appliquer un effet lettrine au premier paragraphe des billets de mon blog. Pour ce faire, je pourrais tout simplement entourer la première lettre du paragraphe d’un tag span et lui affecter une classe lettrine. Mais non, je ne le ferais pas. Rajouter un tag juste pour faire un effet de style c’est fastidieux, et teeeeeeellement web1.0… En 2007, les webdesigners disposent d’outils modernes tels que les css2 et les pseudo- sélecteurs qui permettent de cibler la première lettre ou la première ligne d’un paragraphe sans rajouter le moindre tag. Démonstration.
Cibler
Dans wordpress, le contenu d’un billet est en général contenu dans un div ‘storycontent’. Pour cibler le premier paragraphe de ce div, j’utilise le pseudo sélecteur :first-child
#content div.storycontent > p:first-child
Je cible ensuite la première lettre de ce paragraphe grâce au pseudo sélecteur :first-letter :
div.storycontent > p:first-child:first-letter
A noter : le pseudo sélecteur :first-child n’est pas supporté par Internet Explorer 6. Pour palier à ce manque et pour ne pas léser les internautes qui utiliseraient encore ce navigateur d’un autre âge, on peut appliquer une classe chapo au premier paragraphe. La règle devient alors :
p.chapo :first-child:first-letter
Styler
Une fois l’élément atteint, il ne me reste plus qu’à lui appliquer quelques règles de styles pou lui donner un effet lettrine :
div.storycontent > p:first-child:first-letter {
font-size: 4em; /* augmente la taille de la police*/
line-height: 80%; /* diminue l'interlignage - pour Safari */
float: left; /* pour faire flotter le texte autour de ma lettrine */
padding-right: .1em; /* histoire de donner un peu d'espace */
color: #666; /* les goûts et les couleurs... */
}
Mais toi, t’en as acheté, une des robes de Di ?
Disons que c’est mon jardin secret 😉
« A noter : le pseudo sélecteur :first-child n’est pas supporté par Internet Explorer 6 »
Tu voulais parler du sélecteur des éléments enfant > (et non pas :first-child 😉 )
Sinon, ça vaudrait le coup de tester avec jQuery si ça fonctionne avec $(”div.storycontent > p:first-child:first-letter”) ^_-
br1o > Oups ! Effectivement c’est avant tout le sélecteur enfant « div > p » qio ne fonctionne pas dans IE 6. De fait la pseudo-class :first-child, encore moins.
En me documentant sur la compatibilité du sélecteur enfant dans IE suite à ton commentaire, je suis tombé sur un contournement pour IE6 que je ne connaissais absolument pas :
http://www.journaldunet.com/developpeur/tutoriel/css/050704-css-selecteur-enfant-equivalent-ie.shtml
un peu crade, mais c’est mieux que rien !
P.S. je vois que tu es décidément un grand fan de JQuery 😉
la « solution » du jdn est un peu hors sujet, car le sélecteur enfant > est un sélecteur d’enfants directs.
C’est toute la différence entre div p img et div > p > img : dans le 1er cas on peut atteindre toutes les images contenues dans un paragraphe à l’intérieur d’une div quelque soit le nombre d’éléments intermédiaires, alors que dans le second, seules les images descendants directement d’un paragraphe lui-même descendant directement d’une div seront concernées.
Concernant jQuery, je trouve que c’est le chainon manquant entre le support tout relatif des css 2.1 dans les navigateurs actuels et celui que l’on est en droit d’attendre.
Je ne dis pas (pas encore) qu’il faut utiliser jQuery à la place des css, mais franchement, dans certains cas, la question mériterait d’être posé au grand jour ^_^
Very nice tip about CSS and web typography. Pour créer des lettrines: http://tinyurl.com/2hkhmg
À noter : jusqu’à aujourd’hui, jquery ne permet pas de sélectionner un élément « non DOM », comme
:first-letter. Le passage par une manipulation de texte de ce genre :$("p:first-child").each(function() {
var text = $(this).html();
$(this).html(text.replace(/^([A-Za-z0-9])/g,'$1'));
});
est obligatoire pour pouvoir cibler une première lettre