De toegankelijke manier
Je kunt het beste de 5 minuten durende video van Ethan bekijken en hiernaar verwijzen:
De cross-browser manier (extra markup)
Wikkel gewoon het eerste teken van de alinea in een reeks, richt de reeks vervolgens met CSS en stijl weg.
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; )De CSS3-manier (geen extra opmaak)
Target het eerste teken van de eerste alinea met behulp van pseudoklassekiezers. Geen extra opmaak nodig, maar geen IE <9-ondersteuning.
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; )De initial-letterweg
De browserondersteuning initial-letteris op het moment van schrijven vrij schaars, maar het kan worden gebruikt om het aantal regels te berekenen dat de drop-capped letter zou moeten innemen en de lettergrootte in plaats van dat alleen te doen.
p:first-child:first-letter ( color: #903; font-family: Georgia; initial-letter: 2; )Browser-ondersteuning
Deze browserondersteuningsgegevens zijn van Caniuse, die meer details bevat. Een getal geeft aan dat de browser de functie ondersteunt vanaf die versie.
Bureaublad
| Chrome | Firefox | D.W.Z | Rand | Safari |
|---|---|---|---|---|
| Nee | Nee | Nee | Nee | TP * |
Mobiel / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| Nee | Nee | Nee | 14.0-14.4 * |