Travaux pratiques
TROISIÈME PARTIE
144
Variante pour anciens navigateurs
Le pseudo-élément :first-letter est peu adapté à la création de lettrines graphiques fonctionnant sur tous les navigateurs. Une autre technique le supplantera
efficacement : il s’agit d’isoler la première lettre manuellement, en la plaçant dans la
balise neutre (en ligne). Nous y appliquerons alors les effets visuels souhaités :
taille, arrière-plan et positionnement flottant, de sorte que le reste du texte s’écoule
autour de la lettrine ainsi formée.
La classe lettrine recevra les caractéristiques suivantes : hauteur de trois caractères,
interligne d’un caractère, police Georgia, gras, rouge foncé, avec bordure rouge et
fond jaune (figure 10-4).
CSS 2.1 Propriétés de :first-letter
La norme actuelle CSS 2.1 corrige la liste des propriétés applicables à :first-letter :
• letter-spacing et word-spacing sont appliquées.
• line-height est appliquée.
• text-shadow ne s’applique plus (puisqu’elle disparaît totalement de la spécification).
• clear ne s’applique plus.
• Chaque navigateur peut ajouter d’autres propriétés.
Dans les faits :
• line-height « remplace » en quelque sorte la propriété height. Si elle n’est pas appliquée à float, c’est
l’équivalent d’un line-height sur :first-line. Dans le cas contraire, elle permet le plus souvent d’obtenir
un effet similaire à height.
• width est sans effet, mais letter-spacing, éventuellement associée au padding, permet le plus souvent
de produire l’effet recherché avec width.
HTML
TROISIÈME PARTIE
144
Variante pour anciens navigateurs
Le pseudo-élément :first-letter est peu adapté à la création de lettrines graphiques fonctionnant sur tous les navigateurs. Une autre technique le supplantera
efficacement : il s’agit d’isoler la première lettre manuellement, en la plaçant dans la
balise neutre (en ligne). Nous y appliquerons alors les effets visuels souhaités :
taille, arrière-plan et positionnement flottant, de sorte que le reste du texte s’écoule
autour de la lettrine ainsi formée.
La classe lettrine recevra les caractéristiques suivantes : hauteur de trois caractères,
interligne d’un caractère, police Georgia, gras, rouge foncé, avec bordure rouge et
fond jaune (figure 10-4).
CSS 2.1 Propriétés de :first-letter
La norme actuelle CSS 2.1 corrige la liste des propriétés applicables à :first-letter :
• letter-spacing et word-spacing sont appliquées.
• line-height est appliquée.
• text-shadow ne s’applique plus (puisqu’elle disparaît totalement de la spécification).
• clear ne s’applique plus.
• Chaque navigateur peut ajouter d’autres propriétés.
Dans les faits :
• line-height « remplace » en quelque sorte la propriété height. Si elle n’est pas appliquée à float, c’est
l’équivalent d’un line-height sur :first-line. Dans le cas contraire, elle permet le plus souvent d’obtenir
un effet similaire à height.
• width est sans effet, mais letter-spacing, éventuellement associée au padding, permet le plus souvent
de produire l’effet recherché avec width.
HTML
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Pellentesque laoreet feugiat massa. Etiam
vitae massa. Vivamus aliquam aliquam pede. Suspendisse rutrum
sollicitudin metus
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Pellentesque laoreet feugiat massa. Etiam
vitae massa. Vivamus aliquam aliquam pede. Suspendisse rutrum
sollicitudin metus