Prístupná cesta
Najlepšie urobíte, keď si pozriete Ethanovo 5-minútové video a potom na ne odkazujete:
Cross-browser way (extra markup)
Stačí zabaliť prvý znak odseku do rozsahu, potom zamerať rozsah pomocou CSS a štýlu preč.
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; )Spôsob CSS3 (bez ďalších značiek)
Zamerajte prvý znak prvého odseku pomocou selektorov pseudo tried. Nie sú potrebné žiadne ďalšie značky, ale ani podpora 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-lettercesta
Podpora tohto prehliadača initial-letterje v čase písania tohto článku dosť riedka, dá sa však použiť na výpočet počtu riadkov, ktoré by písmeno s obmedzeným písmom malo zaberať, a veľkosti písma, namiesto toho, aby ste to robili svojpomocne.
p:first-child:first-letter ( color: #903; font-family: Georgia; initial-letter: 2; )Podpora prehľadávača
Údaje o podpore tohto prehľadávača sú od spoločnosti Caniuse, ktorá obsahuje viac podrobností. Číslo označuje, že prehliadač podporuje túto funkciu v danej verzii alebo vyššej.
Desktop
| Chrome | Firefox | IE | Hrana | Safari |
|---|---|---|---|---|
| Nie | Nie | Nie | Nie | TP * |
Mobil / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| Nie | Nie | Nie | 14,0 - 14,4 * |