Esteetön tapa
Parasta on katsella Ethanin 5 minuutin video ja viitata sitten tähän:
Selaimen välinen tapa (ylimääräinen merkintä)
Kääri vain kappaleen ensimmäinen merkki väliin, kohdista sitten alue CSS: llä ja tyyli pois.
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; )CSS3-tapa (ei ylimääräisiä merkintöjä)
Kohdista ensimmäisen kappaleen ensimmäinen merkki pseudoluokan valitsimilla. Lisämerkintöjä ei tarvita, mutta ei IE <9 -tukea.
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; )initial-lettertapa
Selaimen tuki initial-letteron kirjoitushetkellä melko harvinainen, mutta sitä voidaan käyttää laskemaan rivien lukumäärä, jonka pudotettavan kirjaimen tulisi olla, ja fonttikoko sen sijaan, että tekisit sen itse.
p:first-child:first-letter ( color: #903; font-family: Georgia; initial-letter: 2; )Selaimen tuki
Nämä selaintukitiedot ovat Caniuselta, jolla on tarkempia tietoja. Numero osoittaa, että selain tukee ominaisuutta kyseisessä versiossa tai uudemmassa.
Työpöytä
| Kromi | Firefox | IE | Reuna | Safari |
|---|---|---|---|---|
| Ei | Ei | Ei | Ei | TP * |
Matkapuhelin / tabletti
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| Ei | Ei | Ei | 14,0–14,4 * |