Pristupačan način
Najbolje je pogledati Ethanov petominutni video, a zatim se osvrnuti na ovo:
Način više preglednika (dodatni markup)
Samo zamotajte prvi znak odlomka u raspon, a zatim ga ciljajte CSS-om i stilom.
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; )
Način CSS3 (bez dodatnih oznaka)
Ciljajte prvi znak prvog odlomka pomoću selektora pseudo klase. Nisu potrebne dodatne oznake, ali niti podrška za 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; )
initial-letter
način
Podrška preglednika za initial-letter
prilično je oskudna u vrijeme pisanja ovog teksta, ali može se koristiti za izračunavanje broja redaka koje bi trebalo zauzimati preskočeno slovo i veličine fonta, umjesto da to radite sami.
p:first-child:first-letter ( color: #903; font-family: Georgia; initial-letter: 2; )
Podrška preglednika
Podaci o podršci preglednika potječu iz tvrtke Caniuse, koja sadrži više detalja. Broj označava da preglednik podržava značajku u toj verziji i novijoj.
Radna površina
Krom | Firefox | IE | Rub | Safari |
---|---|---|---|---|
Ne | Ne | Ne | Ne | TP * |
Mobitel / tablet
Android Chrome | Android Firefox | Android | iOS Safari |
---|---|---|---|
Ne | Ne | Ne | 14,0-14,4 * |