Lettrines
CHAPITRE 10
143
En testant d’autres enrichissements, on constate rapidement que les propriétés
display, width, et height ne portent pas sur le pseudo-élément :first-letter.
Voilà qui restreint considérablement les fonctionnalités graphiques disponibles.
D’autre part, le pseudo-élément :first-letter n’est pas interprété sur les versions
d’Internet Explorer antérieures à 5.5. C’est pourquoi la section suivante évoque une
méthode moins sémantique mais plus pratique.
CSS
p {
width: 10em;
}
p:first-letter {
font-weight: bold;
font-size: 3em;
color: #7a0000;
float: left;
}
HTML

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Pellentesque laoreet feugiat massa. Etiam vitae massa. Vivamus aliquam
aliquam pede. Suspendisse rutrum sollicitudin metus

Figure 10–3
Lettrine mise en place
avec
:first-letter (II)
INTERNET EXPLORER Attention à l’accolade
Internet Explorer 6 ne prend pas en compte le pseudo-élément :first-letter si l’accolade lui est directement
collée. Il faut impérativement laisser une espace entre :first-letter et l’accolade ouvrante. Ce bogue est
désormais résolu dans la version IE7.