Uzávery - Triky CSS

Anonim

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

Pomocou začiatočného písmena vytvorte kvapku

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 *