La voie accessible
Votre meilleur pari est de regarder la vidéo de 5 minutes d'Ethan, puis de référencer ceci:
La méthode cross-browser (balisage supplémentaire)
Enveloppez simplement le premier caractère du paragraphe dans une plage, puis ciblez la plage avec CSS et style.
L orem ipsum dolor sit amet, consectetur adipiscing elit.
.firstcharacter ( color: #903; float: left; font-family: Georgia; font-size: 75px; line-height: 60px; padding-top: 4px; padding-right: 8px; padding-left: 3px; )La méthode CSS3 (pas de balisage supplémentaire)
Ciblez le premier caractère du premier paragraphe à l'aide de pseudo sélecteurs de classe. Aucun balisage supplémentaire nécessaire, mais pas de support IE <9.
Just a normal sentence.
p:first-child:first-letter ( color: #903; float: left; font-family: Georgia; font-size: 75px; line-height: 60px; padding-top: 4px; padding-right: 8px; padding-left: 3px; )Le initial-letterchemin
La prise en charge du navigateur pour initial-letterest assez rare au moment de la rédaction de cet article, mais elle peut être utilisée pour calculer le nombre de lignes que la lettre en majuscules devrait occuper et la taille de la police au lieu de le faire vous-même.
p:first-child:first-letter ( color: #903; font-family: Georgia; initial-letter: 2; )Prise en charge du navigateur
Ces données de support de navigateur proviennent de Caniuse, qui contient plus de détails. Un nombre indique que le navigateur prend en charge la fonctionnalité dans cette version et plus.
Bureau
| Chrome | Firefox | C'EST À DIRE | Bord | Safari |
|---|---|---|---|---|
| Non | Non | Non | Non | TP * |
Mobile / tablette
| Chrome Android | Android Firefox | Android | Safari sur iOS |
|---|---|---|---|
| Non | Non | Non | 14,0-14,4 * |